easyui datagrid 列拖動

實現代碼-code

$.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>

轉載于:https://www.cnblogs.com/huangf714/p/5872297.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/256373.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/256373.shtml
英文地址，請注明出處：http://en.pswp.cn/news/256373.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！