extend jQuery easyUI datagrid methods

$.extend($.fn.datagrid.methods,{
	columnMoving: function(jq){
		return jq.each(function(){
			var target = this;
			var cells = $(this).datagrid('getPanel').find('div.datagrid-header td[field]');
			cells.draggable({
				revert:true,
				cursor:'pointer',
				edge:5,
				proxy:function(source){
					var p = $('
').appendTo('body');
					p.html($(source).text());
					p.hide();
					return p;
				},
				onBeforeDrag:function(e){
					e.data.startLeft = $(this).offset().left;
					e.data.startTop = $(this).offset().top;
				},
				onStartDrag: function(){
					$(this).draggable('proxy').css({
						left:-10000,
						top:-10000
					});
				},
				onDrag:function(e){
					$(this).draggable('proxy').show().css({
						left:e.pageX+15,
						top:e.pageY+15
					});
					return false;
				}
			}).droppable({
				accept:'td[field]',
				onDragOver:function(e,source){
					$(source).draggable('proxy').removeClass('tree-dnd-no').addClass('tree-dnd-yes');
					$(this).css('border-left','1px solid #ff0000');
				},
				onDragLeave:function(e,source){
					$(source).draggable('proxy').removeClass('tree-dnd-yes').addClass('tree-dnd-no');
					$(this).css('border-left',0);
				},
				onDrop:function(e,source){
					$(this).css('border-left',0);
					var fromField = $(source).attr('field');
					var toField = $(this).attr('field');
					setTimeout(function(){
						moveField(fromField,toField);
						$(target).datagrid();
						$(target).datagrid('columnMoving');
					},0);
				}
			});
			
			// move field to another location
			function moveField(from,to){
				var columns = $(target).datagrid('options').columns;
				var cc = columns[0];
				var c = _remove(from);
				if (c){
					_insert(to,c);
				}
				
				function _remove(field){
					for(var i=0; i

开始调用

$('#tt').datagrid({
	url: 'datagrid_data3.json',
	title: 'DataGrid',
	width: 700,
	height: 220,
	fitColumns: true,
	nowrap:false,
	rownumbers:true,
	showFooter:true,
	columns:[[
		{field:'itemid',title:'Item ID',width:80},
		{field:'productid',title:'Product ID',width:120},
		{field:'listprice',title:'List Price',width:80,align:'right'},
		{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
		{field:'attr1',title:'Attribute',width:250},
		{field:'status',title:'Status',width:60,align:'center'}
	]]
}).datagrid("columnMoving");

 

空说无凭，有图为正

1)开始拖拽

2）拖拽到目标

释放拖拽

到此结束，如感觉样式不好看，可以更改CSS。

记得在QQ群里有人问我这样做有什么用呢，又记不住，杯具

解决办法

var columns = $(target).datagrid('options').columns存放在服务端呗，嘿嘿