Draggable Datagrid Columns
擴充方法：
1: $.extend($.fn.datagrid.methods, {
2: columnMoving: function (jq) {
3: return jq.each(function () {
4: var target = this;
5: var cells = $(this).datagrid('getPanel').find('div.datagrid-header td[field]');
6: cells.draggable({
7: revert: true,
8: cursor: 'pointer',
9: edge: 5,
10: proxy: function (source) {
11: var p = $('<div class="tree-node-proxy tree-dnd-no" style="position:absolute;border:1px solid #ff0000"/>').appendTo('body');
12: p.html($(source).text());
13: p.hide();
14: return p;
15: },
16: onBeforeDrag: function (e) {
17: e.data.startLeft = $(this).offset().left;
18: e.data.startTop = $(this).offset().top;
19: },
20: onStartDrag: function () {
21: $(this).draggable('proxy').css({
22: left: -10000,
23: top: -10000
24: });
25: },
26: onDrag: function (e) {
27: $(this).draggable('proxy').show().css({
28: left: e.pageX + 15,
29: top: e.pageY + 15
30: });
31: return false;
32: }
33: }).droppable({
34: accept: 'td[field]',
35: onDragOver: function (e, source) {
36: $(source).draggable('proxy').removeClass('tree-dnd-no').addClass('tree-dnd-yes');
37: $(this).css('border-left', '1px solid #ff0000');
38: },
39: onDragLeave: function (e, source) {
40: $(source).draggable('proxy').removeClass('tree-dnd-yes').addClass('tree-dnd-no');
41: $(this).css('border-left', 0);
42: },
43: onDrop: function (e, source) {
44: $(this).css('border-left', 0);
45: var fromField = $(source).attr('field');
46: var toField = $(this).attr('field');
47: setTimeout(function () {
48: moveField(fromField, toField);
49: $(target).datagrid();
50: $(target).datagrid('columnMoving');
51: $(target).datagrid('loadData', $(target).datagrid('getData')); //LoadData
52: }, 0);
53: }
54: });
55:
56: // move field to another location
57: function moveField(from, to) {
58: var columns = $(target).datagrid('options').columns;
59: var cc = columns[0];
60: var c = _remove(from);
61: if (c) {
62: _insert(to, c);
63: }
64:
65: function _remove(field) {
66: for (var i = 0; i < cc.length; i++) {
67: if (cc[i].field == field) {
68: var c = cc[i];
69: cc.splice(i, 1);
70: return c;
71: }
72: }
73: return null;
74: }
75: function _insert(field, c) {
76: var newcc = [];
77: for (var i = 0; i < cc.length; i++) {
78: if (cc[i].field == field) {
79: newcc.push(c);
80: }
81: newcc.push(cc[i]);
82: }
83: columns[0] = newcc;
84: }
85: }
86: });
87: }
88: });
使用方式：
1: $('#dataList').datagrid('columnMoving');