$(function () { var setting = { //此处根据自己需要进行配置 view: { selectedMulti: false }, data: { simpleData: { enable: true } }, callback: { onClick: onDesignTreeClick, onRightClick: OnRightClick, beforeRename: beforeRename, onCheck：onCheck } }; $.ajax({ type: "Get", url: "/Design/GetDesignTreeData", //ajax请求地址 success: function (data) { $.fn.zTree.init($("#treeZo"), setting, data); //加载数据 }, }); });
后台代码如下，可以根据需要返回你想要的任何数据，绑定到zTree上，然后通过treeNode.属性名取到对应的值，实现一些界面逻辑操作。
public ActionResult GetDesignTreeData() { var result = _designAppService.GetDesignTreeData(); List<ModelTreeViewModel> treeModels = new List<ModelTreeViewModel>(); bool open = false; foreach (var design in result.Designs) { if (design.ParentId == Guid.Empty) open = true; else open = false; treeModels.Add(new ModelTreeViewModel() { Id = design.Id.ToString(), PId = design.ParentId.ToString(), Name = design.Name, Open = open, Data = design.Remarks ?? "", ViewPoint = design.ViewPoint ?? "", Checked = true }); } return Json(treeModels, JsonRequestBehavior.AllowGet); }
2.1 节点单击操作
节点单击事件会捕获事件对象e，zTree的唯一标识treeId，当前选中的节点对象treeNode三个参数。根据实际需求可获取treeNode中包含的任何属性数据，进行相关操作
function onClick(e, treeId, treeNode) { if (treeNode.isParent) //如果不是叶子结点，结束 return; alert(treeNode.name); //获取当前结点上的相关属性数据，执行相关逻辑 };
2.2 节点复选框事件
一般情况下我们会直接使用treeObj.getCheckedNodes(true);获取所有选中的节点，然后遍历所有选中的节点进行相关操作，当面对大数据量时，这种操作方法便不可取，可通过getChangeCheckedNodes()方法获取勾选状态被改变的节点集合，值针对状态改变的节点做相应处理。
function onCheck() { var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); //获取树对象 var nodes = treeObj.getChangeCheckedNodes(); //获取勾选状态改变的节点 var designIds = []; var status = 0; //定义初始勾选状态为未勾选 if (nodes[0].checked) status = 1; //如果状态改变节点为勾选状态，说明当前操作是从未勾选变为已勾选。 $.each(nodes, function (i, item) { designIds.push(item.id); //将状态改变的节点id输出到数组 item.checkedOld = item.checked; //这句话很关键，将节点的初始状态置为当前状态。否则每次勾选操作获取状态改变节点时只会跟树初始化的状态相比较。 }) $.ajax({ type: "Post", url: "/Design/GetRelationComponentIdsByDesigns", data: { "designIds": designIds }, success: function (data) { RealBimOcx.BatchAddSubClrInfoBegin(); $.each(data.result, function (i, item) { if (status == 1) //这里根据发生改变的节点是勾选还是为勾选进行相关逻辑操作。 RealBimOcx.AddSubClrInfo(item, 255, 255, 0); else RealBimOcx.AddSubClrInfo(item, 0, 255, 0); if (i % 100 == 0) { RealBimOcx.BatchAddSubClrInfoEnd(); RealBimOcx.BatchAddSubClrInfoBegin(); } }) RealBimOcx.BatchAddSubClrInfoEnd(); } }) };
2.3 实现zTree的右键增删改操作
首先定义右键弹出面板
<div> <ul> <li>新增节点</li> <li>删除节点</li> <li>编辑节点</li><li>升级</li> <li>降级</li> <li>上移</li> <li>下移</li> <li>重置节点</li> <li>展开所有</li> <li>收起所有</li> </ul> </div>
实现zTree右键单击事件回调函数
//右键单击回调函数 function OnRightClick(event, treeId, treeNode) { $("#treeZo").hide(); if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) { zTree.cancelSelectedNode(); showRMenu("root", event.clientX, event.clientY); //根据鼠标位置显示右键操作面板 } else if (treeNode && !treeNode.noR) { zTree.selectNode(treeNode); showRMenu("node", event.clientX, event.clientY); } $("#treeZo").show(); } //根据节点类型，控制右键操作菜单哪些可用哪些不可用 function showRMenu(type, x, y) { $("#rMenu ul").show(); if (type == "root") { $("#m_del").hide(); $("#m_edit").hide(); $("#m_left").hide(); $("#m_right").hide(); $("#m_up").hide(); $("#m_down").hide(); $("#m_add").addClass('mboder'); } else { $("#m_del").show(); $("#m_edit").show(); $("#m_left").show(); $("#m_right").show(); $("#m_up").show(); $("#m_down").show(); $("#m_add").removeClass('mboder'); } rMenu.css({ "top": y + "px", "left": x + "px", "visibility": "visible" }); $("body").bind("mousedown", onBodyMouseDown); } //以藏右键面板 function hideRMenu() { if (rMenu) rMenu.css({ "visibility": "hidden" }); $("body").unbind("mousedown", onBodyMouseDown); } //单击页面其他位置 隐藏右键面板 function onBodyMouseDown(event) { if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) { rMenu.css({ "visibility": "hidden" }); } }
新增节点