<script type="text/javascript">
$.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 = $('<div class="tree-node-proxy tree-dnd-no" style="position:absolute;border:1px solid #ff0000"/>').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 < cc.length; i++) {if(cc[i].field == field) {var c = cc[i];cc.splice(i, 1);return c;}}return null;}
function _insert(field, c) {var newcc = [];for(var i = 0; i < cc.length; i++) {if(cc[i].field == field) {newcc.push(c);}newcc.push(cc[i]);}columns[0] = newcc;}}});}});</script>
<body><div id="tt"></div><script type="text/javascript">var cols = [{field: 'testName',title: '<span class="dropitem">测试名</span>',align: 'center',width: 120}, {field: 'testValue',title: '<span class="dropitem">测试值</span>',align: 'center',width: 120}];var data = []; // 用代码造30条数据 for(var i = 1; i < 200; ++i) { data.push({ "testName": i, "testValue": "张三旺旺" + i }) } //表$('#tt').datagrid({title: 'DataGrid',width: 700,height: 220,fitColumns: true,nowrap: false,rownumbers: true,showFooter: true,columns: [cols],data: data.slice(0, 10),}).datagrid("columnMoving");</script>
</body>
上方标红的两部分为实现功能的主要内容。
