当前位置: 代码迷 >> Web前端 >> jQuery Ui 拖拽排序兑现
  详细解决方案

jQuery Ui 拖拽排序兑现

热度:616   发布时间:2012-09-04 14:19:30.0
jQuery Ui 拖拽排序实现

感觉使用jqueryUi 进行拖拽排序比箭头移动排序要爽多了,实现了下跟大家分析下:

1 使用 jquery ui控件的 drag功能

2 实现拖拽,拖拉位置

3 循环读取当前位置的id

4 ajax到后台,依次找到位置的id 然后修改sequence

?

?

?

?

<script type="text/javascript">
var params={};
$(function() {

	    	
			$( "#recommendBar" ).sortable({
					revert: true
				});
				$( "#draggable" ).draggable({
					connectToSortable: "#recommendBar",
					helper: "clone",
					revert: "invalid"
				});
		
			       $( "#sore" ).click(function() {
				$(".recomend_list .barMoving div").each(function(i){
				   var vals= $(this).attr("id");
				    var valu=i+1;
				    var param="L"+valu;
				    params[param]=vals+""; 
				
				});
				$.post("<@ofbizUrl>recommendSore</@ofbizUrl>",params,ajaxFormCallback);	   	
			 
			});
	});
</script>


<ul id="recommendBar" class="recomend_list">
						
	div class="barSetting" id="${product.getString("productId")?if_exists}"></div>
			          
</ul>

?

?

		
public static String recommendSore(HttpServletRequest request, HttpServletResponse response) {
Delegator delegator = (Delegator) request.getAttribute("delegator");
		List<GenericValue> leftBar=FastList.newInstance();
		String partyId = ((GenericValue) request.getSession().getAttribute("userLogin")).getString("partyId");
		String productStoreId=BusinessWorker.getProductStoreId(delegator, partyId);
		try {
			TransactionUtil.begin();
			leftBar = delegator.findByAnd("YProductRecommend", UtilMisc.toMap("productStoreId", productStoreId),UtilMisc.toList("+sequence"));
			if (leftBar.size() > 0) {
				for (int i=0;i<leftBar.size();i++) {
				int val=i+1;
				String param = request.getParameter("L"+val);
				GenericValue Gv=delegator.findByPrimaryKey("YProductRecommend", UtilMisc.toMap("productId", param));
				Gv.put("sequence", val+"");
				Gv.store();
				}
			}
			TransactionUtil.commit();
		} catch (GenericEntityException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return "success";
	}
?
  相关解决方案