easyUI列拖動
<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>
上方標紅的兩部分為實現功能的主要內容。