Easyui Treegrid 上下移动实现

最近项目用到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的判断

代码应该是很浅显易懂的，第一次写博客，排版不好请见谅