zTree的异步加载与搜索高亮

最新推荐文章于 2021-04-01 11:25:40 发布

肥仔哥哥1930

最新推荐文章于 2021-04-01 11:25:40 发布

阅读量1.2k

点赞数

分类专栏： web开发文章标签： zTree zTree模糊搜索 zTree节点高亮

本文链接：https://blog.csdn.net/zwrlj527/article/details/88361854

版权

web开发专栏收录该内容

20 篇文章 0 订阅

订阅专栏

最近这次的2个大模块需求产品还是狠用心的写了，也协调了设计做了一个大致的页面，交付到我这边的html基本上该有的都有了，剩下的前端与后端的工作就我这个java一手做了。

这次的页面上有个树形展示，要求输入内容检索节点高亮，先上一张效果图吧：

蓝色加粗是树形检索高亮效果，绿色白字是节点选中效果。

我这边的树形数据实际不是来源一张表，而是4张表，还没算关系表。顶级节点在项目表，二级节点楼栋在楼栋表，三级节点单元在单元表，子节点房间在房间表。这里的加载用到的是异步，ztree节点上增加了一个自定义属性nodetype,请求接口是一个，出来的节点数据是一个，但是实际我在后台serviceimpl层是根据节点nodetype和id一起做的查询。后台的代码我就不贴了，贴前端的吧：

树形的初始化

初始化定义的几个回调

//这个过滤有点坑，api上回有一个正则判断，过滤的逻辑。直接导致的是我每次都有一个undefined的节点，目前还不台清楚这个回调的用处，所以直接干掉里面的

//同步错误回调
   function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {

   }

//这个就是异步加载的关键方法，这个方法回自动调用初始化里定义的url，并且传约定的参数，data就是你的ajax返回的，然后就是配合节点的addNodes方法增加节点了
   function onAsyncSuccess(event, treeId, treeNode, data) {
       if(data != null && data != ""){
           var jsonData = eval("[" + data + "]");
           //alert("dt:" + jsonData[0].companyTree);
           var reTreeArr = jsonData[0].companyTree;
           var treeData = [];
           if(reTreeArr != null && reTreeArr.length > 0){
               for (var i = 0; i < reTreeArr.length; i++) {
                   var tmpNode = reTreeArr[i];
                   var childNode = {};
                   childNode["id"] = tmpNode.id;
                   childNode["pId"] = tmpNode.parentId;
                   childNode["name"] = tmpNode.nodeName;
                   childNode["node_type"] = tmpNode.nodeType;
                   if(tmpNode.nodeType != 4){
                       childNode["isParent"] = true;
                   }
                   treeData.push(childNode);
               }
           }

           if(treeNode == undefined){
               treeObj.addNodes(null,treeData,true);// 如果是根节点，那么就在null后面加载数据
           }else{
               treeObj.addNodes(treeNode,treeData,true);//如果是加载子节点，那么就是父节点下面加载
           }

           expandTreeAll(treeNode);

       }else{
           layer.msg("数据加载错误");
       }

   }

树形模糊查询与高亮设置

//树形模糊查询，这个就是input输入框oninput调用的方法，跟随内容输入反应，不用按搜索/回车，搞得好像狠聪明一样
   function searchFun() {
var inVal = $("#roomCodeIn").val();
var allNode = treeObj.transformToArray(treeObj.getNodes());
if(inVal != null && inVal != ''){
   //console.log("---"+allNode + "---length:"+allNode.length);
   var conNodes = treeObj.getNodesByParamFuzzy("name", inVal, null);//搜索含有value关键字的节点
   console.log(conNodes);
   highlightAndExpand_ztree(conNodes,allNode);
}else{
   highlightAndExpand_ztree(null,allNode);
}
}
   //高亮设置节点，这个的逻辑实际就是把全部节点跟要高亮的节点都设置属性后做节点更新，其实方法可以优化下，做全部节点清除样式时判断下是否被高亮包含，如果有可以不做样式清除
   function highlightAndExpand_ztree(highlightNodes,allNode) {
       //先把全部节点更新为普通样式
for(var i = 0; i < allNode.length; i++) {
   allNode[i].highlight = false;
treeObj.updateNode(allNode[i]);
}
//把指定节点的样式更新为高亮显示，并展开
if(highlightNodes != null) {
for(var i = 0; i < highlightNodes.length; i++) {
//高亮显示节点
highlightNodes[i].highlight = true; //设置
treeObj.updateNode(highlightNodes[i]); //执行
}
}
}