<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Basic Draggable - jQuery EasyUI Demo</title>
<link rel="stylesheet" href="./easyUI库/easyui.css" />
<link rel="stylesheet" href="./easyUI库/icon.css" />
<link rel="stylesheet" href="./easyUI库/demo.css" />
<script src="./easyUI库/jquery.min.js"></script>
<script src="./easyUI库/jquery.easyui.min.js"></script>
</head>
<body>
<table id="dg"></table>
</body>
<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];
return c;
}
}
return null;
}
function _insert(field, c) {
var newcc = [];
var a = 0;
var b = 0;
cc.forEach((item, i) => {
if (item.field == field) {
a = i;
}
if (item == c) {
b = i;
}
});
if (a < b) {
cc.splice(b, 1);
for (var i = 0; i < cc.length; i++) {
if (cc[i].field == field) {
newcc.push(c);
}
newcc.push(cc[i]);
}
}
if (a > b) {
cc.splice(b, 1);
for (var i = 0; i < cc.length; i++) {
if (cc[i].field == field) {
newcc.push(cc[i]);
newcc.push(c);
} else {
newcc.push(cc[i]);
}
}
}
columns[0] = newcc;
}
}
});
},
});
</script>
<body>
<div id="tt"></div>
<script type="text/javascript">
$("#tt")
.datagrid({
data: [
{ y: "value11", x: "value12" },
{ y: "value11", x: "value12" },
{ itemid: "value11", productid: "value12" },
{ itemid: "value11", productid: "value12" },
{ itemid: "value11", productid: "value12" },
{ itemid: "value11", productid: "value12" },
],
columns: [
[
{
field: "itemid",
title: "Item ID",
rowspan: 2,
width: 80,
sortable: true,
},
{
field: "productid",
title: "Product ID",
rowspan: 2,
width: 80,
sortable: true,
},
{
field: "ye",
title: "YE ID",
rowspan: 2,
width: 80,
sortable: true,
},
{ field: "ss", title: "Item Details", colspan: 4 },
],
[
{
field: "listprice",
title: "List Price",
width: 80,
align: "right",
sortable: true,
},
{
field: "unitcost",
title: "Unit Cost",
width: 80,
align: "right",
sortable: true,
},
{ field: "attr1", title: "Attribute", width: 100 },
{ field: "status", title: "Status", width: 60 },
],
],
})
.datagrid("columnMoving");
</script>
</body>
</html>
9423
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
