学步园

1、拖动前

2、拖动中

3、拖动后

5、代码1

$("#corp-grid").datagrid({
		title:"泥头车企业管理",
		toolbar:"#corp-grid-toolbar",
		border:false,
		fit:true,
		width:$(window).width()-252,
		columns:[[
					{field:"ckb",checkbox:true},
					{field:"corpName",title:"企业名称",width:200,halign:"center",align:"center",resizable:true},
					{field:"linkedCorpName",title:"挂靠深圳企业名称",width:200,halign:"center",align:"center",resizable:true},
					{field:"corpType",title:"企业类型",width:80,align:"center",resizable:false},
					{field:"businessScope",title:"经营范围",width:80,align:"center",resizable:false},
					{field:"effectiveDate",title:"有效日期",width:80,align:"center",resizable:false},
					{field:"opePeriod",title:"营业期限",width:80,align:"center",resizable:false},
					{field:"ifLocal",title:"是否本地",width:80,align:"center",resizable:false},
					{field:"state",title:"有效状态",width:80,align:"center",resizable:false}
				]],
		//striped:true,
		fitColumns:true,
		//autoRowHeight:true,
		rownumbers:false,
		singleSelect:false,
		ctrlSelect:true,
		pagination:true,
		pageSize:10,
		pageList:[5,10,15,20,25,30],
		sortName:"corpId",
		sortOrder:"desc",
		url:"corp_getInfoList.action",
		method:"post",
		loadMsg:"加载数据中，请稍后",
		onDblClickRow:function(rowIndex, rowData){
			openDialog({
				type:"view",
				title:"泥头车企业信息查看",
				width:800,
				height:400,
				maximizable:true,
				href:"BaseInfo/Corp/CorpInfoView.html"
			});
		},
		onRowContextMenu:function(e, rowIndex, rowData){
			e.preventDefault();
			
			$(this).datagrid("unselectAll");
			
			$(this).datagrid("selectRow", rowIndex);
			
			$("#corp-menu").menu("show",{
				left:event.pageX,
				top:event.pageY
			});
		}
	}).datagrid("columnMoving");

6.代码2

$.extend($.fn.datagrid.methods,{
	columnMoving:function(jq){
		return jq.each(function(){
			var grid = this;
			
			var directionDiv = $("<div></div>");
			
			directionDiv.hide();
			
			$("body").append(directionDiv);
			
			$(grid).datagrid("getPanel")
					.find(".datagrid-header td[field]:not(td[field='ckb'])").draggable({
				revert:true,
				cursor:"move",
				deltaX:10,
				deltaY:10,
				edge:10,
				proxy:function(source){
					var proxyEl = $("<div></div>");
					
					proxyEl.addClass("dg-proxy dg-proxy-error");
					
					proxyEl.text($(source).text());
					
					proxyEl.appendTo($("body"));
					
					return proxyEl;
				}
			}).droppable({
				accept:".datagrid-header td[field]",
				onDragOver:function(e,source){
					$(source).draggable("proxy").removeClass("dg-proxy-error").addClass("dg-proxy-right");
					
					$(".dg-hide-div").hide();
					
					var thisIndex = $(this).index();
					var sourceIndex = $(source).index();
					
					var className = null;
					
					var height = null;
					
					var thisOffset = null;
					
					var left = null;
					var top = null;
					
					height = $(this).height();
					
					if(sourceIndex > thisIndex){
						className = "dg-move-prev";

						thisOffset = $(this).offset();
						
						left = thisOffset.left;
						top = thisOffset.top;
					}else{
						className = "dg-move-next";
						
						if(thisIndex == $(this).parent().children(":last").index()){
							thisOffset = $(this).offset();
							
							left = thisOffset.left + $(this).width() - directionDiv.width();
							top = thisOffset.top;
						}else{
							thisOffset = $(this).next().offset();
							
							left = thisOffset.left - directionDiv.width();
							top = thisOffset.top;
						}
					}
					
					directionDiv.removeClass().addClass(className);
					directionDiv.css({height:height, left:left, top:top});
					directionDiv.show();
				},
				onDragLeave:function(e,source){
					$(source).draggable("proxy").removeClass("dg-proxy-right").addClass("dg-proxy-error");
					
					directionDiv.hide();
				},
				onDrop:function(e,source){
					directionDiv.remove();
					
					var thisIndex = $(this).index();
					var sourceIndex = $(source).index();
					
					var sourceCol = new Array();
					
					$(source).remove();
					$.each($(grid).datagrid("getPanel")
									.find(".datagrid-body tr"),function(index,obj){
						var sourceTd = $(obj).children("td:eq(" + sourceIndex + ")");
						
						sourceCol.push(sourceTd);
						
						sourceTd.remove();
					});
					
					var prev = sourceIndex > thisIndex;
					
					thisIndex = $(this).index();
					
					if(prev){
						$(this).before($(source));
					}else{
						$(this).after($(source));
					}
					
					$.each($(grid).datagrid("getPanel")
									.find(".datagrid-body tr"),function(index,obj){
						var thisTd = $(obj).children("td:eq(" + thisIndex + ")");
						
						if(prev){
							thisTd.before(sourceCol[index]);
						}else{
							thisTd.after(sourceCol[index]);
						}
					});
					
					$(grid).datagrid("columnMoving").datagrid("columnHiding");
				}
			});
		});
	}
});

程序员淘宝店点击打开链接