一个神奇的jq插件----zTree
最近在公司做项目中用到了一个树（ztree）的插件，使用起来非常顺手，便写下这篇博客，用来记录一下，以便后续使用
首先先放上ztree官方的地址:http://www.treejs.cn/v3/main.php#_zTreeInfo
开始之前ztree的js和css怎么引用请看这篇博客：https://blog.csdn.net/wangmx1993328/article/details/80075318，我就不再啰嗦，我下面要写的主要是ztree的一些功能
1:实现节点多选
$scope.SetTimeset = function () { workersChanChiServer.getlist().then(function (res) { var zNodes = res.result; //数据 $scope.ztreedata = res.result; //用于展开和关闭 zTreeObj = $.fn.zTree.init($('#treeDemo'), setting, zNodes); //将数据渲染到页面上 $scope.liactive(); }) } var zTreeObj; //数据渲染用的 var setting = { data: { key: { name: 'nodeName' //要显示文本 }, simpleData: { enable: true, //是否使用简单数据模式 标准模式：{name:'aa',children:[{name:'bb'},{name:'cc'}]} idKey: 'nodeId', //节点 pIdKey: 'parentId', //父节点 rootPId: 0 } }, view: { selectedMulti: false, //设置能否同时选择多个节点 }, check: { enable: true, chkStyle: "checkbox",//此处设置为checkbox就可以设置树为多选 checkboxType: { "Y": "s", "N": "ps" } }, callback: { onCheck: function (event, treeId, treeNode, clickFlag) { console.log(treeNode)//这里面会打印出点击的某个节点 } } }
那么问题来了，既然选择了多选，我们就想拿到我们所有勾选上的值，
2：获取选中节点值
var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); var nodes = treeObj.getCheckedNodes(true); //获取所有选中的值
$.fn.zTree.getZTreeObj("treeDemo")，括号里面是ztree树的id，这句话相当于初始化一下树，treeObj.getCheckedNodes(true)会获取到所有勾选上的节点，他返回的是一个数数组，遍历这个数组会得到我们想要的任何数据
那么随之产生额问题来了，很多时候我们只想的到最小节点的数组，也就是根节点的数据，不想得到我们选中节点的父节点，
3：只获取根节点数据
for (var a = 0; a < nodes.length; a++) { // 判断有无下一节点，如果没有就代表是根节点 if (nodes[a].isParent) {
//这里面代表他是父节点；
return;
}else{
//这里代表不是父节点
//你的代码
}
}
对的，就是代码的这样，遍历我们获取到的所有选中节点数据，然后用ztree的isParent方法,他的返回值时布尔类型，为true就代表是父节点，因此在else里面就可以往一个新的数组里面push遍历后的数据，这样我们的新数组里面就会存放所有根节点的数据，
那么还有问题，我们勾选完成之后调用接口吧数据发送给后台之后，想根据后台来的数据自动回显并打开所勾选的节点，要怎么做呢
4：根据接口数据自动勾选并打开
workersChanChiServer.gettimehuixian().then(function (res) { for (var f = 0; f < res.result.length; f++) { var timeztree = $.fn.zTree.getZTreeObj("treeDemo"); //循环获取所有要回显的id，自动勾选到树上 timeztree.checkNode(timeztree.getNodeByParam("nodeId", res.result[f].orgId), true) var nodes = zTreeObj.getCheckedNodes(true); //获取所有选中的节点 // 根据选中的节点展开父节点 for (var i = 0; i < nodes.length; i++) { var pNode = nodes[i].getParentNode(); //获取每个节点的父节点 zTreeObj.expandNode(pNode, true, true, true); //展开该节点 } } })
首先解释一下代码标红的字段
checkNode:ztree自带的自动勾选方法
nodeId：要勾选的子节点，也就是这个数的子节点名称
orgId:是nodeld对应的字段，我们从接口返回的数据里面找到对应值
getCheckedNodes:ztree自带的获取所有选中的节点
getParentNode:ztree自带的获取当前节点的父节点
expandNode:ztree自带的展开节点方法
理解了以上几个字段含义，上面说的自动勾选并打开勾选的节点就不是问题，总结一点就是说。根据接口的数据用checkNode方法先自动勾选，然后用getCheckedNodes方法获取所有已经选中的父节点，然后调用wxpandNode方法吧他们的父节点打开，最后说明一点，zTreeObj.expandNode(pNode,true,true,true)，写三个true可以理解为js里面的===，不管根节点上面有几层父节点，都会展开
还有一种情况是我们点击父节点时再调用接口去获取该节点下的子节点，并将数据添加到该节点下
5：添加节点到某个节点下
AddorderParticularsServer.gettitletwo(treeNode.checkItemId, treeNode.checkFormCode, $stateParams.code).then(function (res) { $scope.newNode = res.result.children; //需要添加的节点 var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); var selectedNode = treeObj.getSelectedNodes(); //获取当前选中节点 if (selectedNode[0].isParent) { // 表示已经添加过了节点 return; } else { // 表示没有节点 if ($scope.newNode.length > 0) { // 大于0代表有可以添加的子节点数据 $scope.newNode = treeObj.addNodes(selectedNode[0], $scope.newNode) } } })
通过代码不难理解，当我们点击某个节点时，可以拿到点击的该节点数据，通过调用接口会获取到该节点下有哪些子节点数据，其中getSelectedNodes方法是获取当前选中的节点，（上面我写的getCheckedNodes 也是获取当前选中节点，这里解释一下，getCheckedNodes 是在有多选条件时用这个方法来获取多个选中的节点，getSelectedNodes 则是在没有多选条件时用来获取单个选中数据），然后调用ztree的addNodes方法将需要添加的子节点数据添加到当前选中节点下，使当前的节点变成父节点，在每一次点击之前都会判断一下当前点击的节点是否为父节点，如果是，就不再添加数据
以上就是我在项目中遇到的一些问题以及解决方案，希望能够帮到你，如有错误，欢迎批评指正
后续补充
// zTree = $.fn.zTree.getZTreeObj("treeDemo");//treeDemo界面中加载ztree的div
// var node = zTree.getNodeByParam("id",101 );
// zTree.cancelSelectedNode();//先取消所有的选中状态
// zTree.selectNode(node,true);//将指定ID的节点选中
// zTree.checkNode(node,true);//将指定ID的复选框选中
// zTree.expandNode(node, true, false);//将指定ID节点展开
