最近项目用到easyui的treegrid,也在网上找了下没有有效的行上下移的方法,于是自己琢磨出来给大家分享下
首先是项目框架
点击下移之后
当然上移也是可以的,下面看看代码
function move(o) {//将此方法加入上下移的按钮事件即可
var n = $("#lineNodes").treegrid("getSelected");if(n==null){alert("无法移动!");return;};
var selectRow = $('#datagrid-row-r2-2-'+n.id);
if(o=="up") {
var pre = selectRow.prev();//此处获得上一节点,关键
// alert(typeof(pre.attr("node-id"))=="undefined");return;
if(typeof(pre.attr("node-id"))=="undefined" || pre.attr("node-id").indexOf("L")==0) {
alert("无法移动!");
}else {//下面写数据库中的排序逻辑
var preId = pre.attr("node-id");
$.post("lineNodes/exchangeOrder.json",{"id1":n.id,"id2":preId},function(data) {
if(data=="true") {
var n2 = $("#lineNodes").treegrid("pop",n.id);
$("#lineNodes").treegrid("insert",{before:preId,data:n2});
$("#lineNodes").treegrid("select",n.id);
}else {
alert("移动过程出现异常,请稍后再试");
}
});
}
}else if(o=="down") {
var next = selectRow.next();//此处获得下一节点,关键
//alert(next.attr("node-id"));return;
if(typeof(next.attr("node-id"))=="undefined" || next.attr("node-id").indexOf("L")==0) {
alert("无法移动!")
}else {
var nextId = next.attr("node-id");
$.post("lineNodes/exchangeOrder.json",{"id1":n.id,"id2":nextId},function(data) {
if(data=="true") {
var n2 = $("#lineNodes").treegrid("pop",nextId);
$("#lineNodes").treegrid("insert",{before:n.id,data:n2})
}else {
alert("移动过程出现异常,请稍后再试");
}
});
}
}
}
操作就是选中某行记录点击上下移按钮,关键代码:
var n2 = $("#lineNodes").treegrid("pop",nextId);
$("#lineNodes").treegrid("insert",{before:n.id,data:n2})
先把当前选中行弹出来再插入到某行前面,如果是上移就插入到上条记录前面,如果是下移就将下一行插入到当前选中行前面,获取上、下行代码:
var next = selectRow.prev();
var next = selectRow.next();
注意取不到会是null的判断
代码应该是很浅显易懂的,第一次写博客,排版不好请见谅