美文网首页
ztree中模糊搜索和checked多选功能的联用

ztree中模糊搜索和checked多选功能的联用

作者: 羊绘霖 | 来源:发表于2019-10-25 11:21 被阅读0次

    1、出现的问题 : 模糊搜索不同的关键字时选中的节点不在一个数组内,无法得到一个选中集合
    2、解决方法:通过遍历当前树的选中结点和未选中结点来拼接
    整体代码如下

            // ztree配置
        var setting = {
                view: {
                    showIcon: false,
                    dblClickExpand: false
                },
                check: {
                    enable: true,
                    chkboxType : {"Y": "", "N": ""}    //  父子节点无关联
                    },
                data: {
                    simpleData: {
                        enable: true,
                        idkey:"id",    //修改ztree对节点id的命名
                        pIdKey:"parentId"    //修改ztree对父节点id的命名
                    },
                    key: {name:"namePatents"}
                },
                callback: {
                    onClick: onNodeClick,
                    onCheck: zTreeOnCheck
                }
            };
            //  ztree渲染 
             $.fn.zTree.init($("#ztreeBox"), setting, zNodes);
              fuzzySearch('ztreeBox', '#searchText', true, false);
                  initJqZtree()
            // 单击节点展开节点
            function onNodeClick(e, treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj("ztreeBox");
                zTree.expandNode(treeNode);
                var that = e.target;
                var postData;
                var name = unWrapHighlight(treeNode.name);
            };
              // 单击选中节点
                var checkedNameString="";
            var schoolCheckedNameStr="";
            var provinceCheckedNameStr="";
            var isSchool;
            // 节点名称集合
            var user = "";
            // 节点id集合
            var id = "";
            function zTreeOnCheck(e, treeId, treeNode) {
                    var treeObj = $.fn.zTree.getZTreeObj("ztreeBox");
                    // 获取所有节点
                    var nodes = treeObj.getNodes();
                    // 获取选中节点
                    var sNodes = treeObj.getCheckedNodes(true);
                // 获取未选中节点
                    var nodesFalse = treeObj.getCheckedNodes(false);
                    // 获取所选节点的全部name
                    for(var i=0; i <sNodes.length;i++) {
                        if (sNodes[i].name != null && sNodes[i].name != "无") {
                            saveData(sNodes[i].name, sNodes[i].id);
                          }
                          isSchool = sNodes[i].level == 0 ? 0 : 1
                      }
                     for (var i = 0; i < nodesFalse.length; i++) {
                    if (id.split(",").indexOf(nodesFalse[i].id) != 0) {
                        var start = id.indexOf("," + nodesFalse[i].id);
                        if (start != -1) {
                            id = id.replace("," + nodesFalse[i].id, "");
                            user = user.replace("," + nodesFalse[i].name, "");
                        }
                    } else {
                        var start = id.indexOf(nodesFalse[i].id);
                        var ids = id.split(",");
                        if (ids.length != 1 && start != -1) {
                            id = id.replace(nodesFalse[i].id + ",", "");
                            user = user.replace(nodesFalse[i].name + ",", "");
                        } else if (ids.length == 1){
                            id = id.replace(nodesFalse[i].id, "");
                            user = user.replace(nodesFalse[i].name, "");
                        }
                    }
                }
                      // 对后台要的参数进行父子级分类
                      if(isSchool == 0) {
                          provinceCheckedNameStr = user
                          schoolCheckedNameStr = "";
                      } else {
                          schoolCheckedNameStr = user
                          provinceCheckedNameStr = "";
                      }
                      // 获取所有子节点
                      var cNodes = [];
                      $.each(nodes, function(i, item){
                          if(item.children) {
                              $.each(item.children, function(i, items){
                                  if(items) {
                                      cNodes.push(items);
                                }
                            });
                        }
                    });
                    // 判断一级二级不能同时选中
                    if (sNodes.length > 0) {
                        var isParent = sNodes[0].level;
                        if(isParent == '1') {
                            for(var i=0;i < nodes.length;i++) {
                                treeObj.setChkDisabled(nodes[i], true);
                            }
                       } else {
                            for(var j=0;j < cNodes.length;j++) {
                                treeObj.setChkDisabled(cNodes[j], true);
                            }
                        }
                    } else {
                        for(var i=0;i < nodes.length;i++) {
                            treeObj.setChkDisabled(nodes[i], false);
                        }
                        for(var j=0;j < cNodes.length;j++) {
                            treeObj.setChkDisabled(cNodes[j], false);
                        }
                    }
            }
            // 保存选中的name值及id
            function saveData (name, treeid) {
                var ids = id.split(",");
                if (ids.indexOf(treeid) == -1) {
                    if (user != "") {
                        id += "," + treeid;
                        user += "," + name;
                    } else {
                        id = treeid;
                        user = name;
                    }
                }
            }
            // 去掉高亮标签
            function unWrapHighlight(content) {
                if (!content) return content;
                return content.replace('<span style="color: red;">', '').replace('<\/span>', '');
            }
            // 修复ztree title
            function initJqZtree() {
                $(document).on('mouseenter', '.ztree li a', ztreeHover)
                function ztreeHover() {
                    var titleStr = jQuery(this).attr('title')
                    titleStr = titleStr.replace('<span style="color: red;">', '')
                    titleStr = titleStr.replace('</span>', '')
                    jQuery(this).attr('title', titleStr)
                }
            }
    

    相关文章

      网友评论

          本文标题:ztree中模糊搜索和checked多选功能的联用

          本文链接:https://www.haomeiwen.com/subject/ylkgyctx.html