bootstrap treeview增加搜索树search

bootstrap treeview增加搜索树search

HTML代码

// 这里是html代码片段
 <div style="width: 100%;padding: 5px;overflow: auto;">
    <li class="list-group-item disabled">
        筛选:
        <input type="text" class="form-control" id="client_name" placeholder="请输入名称搜索" style="display: inline-block;width: 80%;" onkeyup="client_search()">
    </li>
    <div id="tree"></div>
</div>

//这里是完整的treeview js
$('#tree').treeview({
        data: bminfos,
        multiSelect: true,//开启多选
        showIcon: true,
        showCheckbox: true,
        highlightSelected: false,
        levels: 5,
        onNodeChecked: function (event, node) { //选中节点
            var selectNodes = getChildNodeIdArr(node); //获取所有子节点

            if (selectNodes) { //子节点不为空，则选中所有子节点
                $('#tree').treeview('checkNode', [selectNodes, {silent: true}]);
                clientaddhtml(selectNodes);
            }
            // var parentNode = $("#tree").treeview("getNode", node.parentId);

            setParentNodeCheck(node);

            // setTimeout(function () {
            //     client_search();
            // },500)

        },
        onNodeUnchecked: function (event, node) { //取消选中节点
            var selectNodes = getChildNodeIdArr1(node); //获取所有子节点
            if (selectNodes) { //子节点不为空，则取消选中所有子节点
                $('#tree').treeview('uncheckNode', [selectNodes, {silent: true}]);
                clientdelhtml(selectNodes);
            }
            var parentNode = $("#tree").treeview("getNode", node.parentId);
            if (typeof  parentNode.nodeId != "undefined") {
                setParentNodeUnCheck(parentNode);
            }
            // setTimeout(function () {
            //     client_search();
            // },500)
        }
    });

  function getChildNodeIdArr(node) {
        var ts = [];
        if (node.parentId) {
            ts.push(node.parentId);
        }
        if (node.nodes) {
            for (x in node.nodes) {
                if (node.nodes[x].state.disabled !== true && node.nodes[x].state.disabled !== 'disabled')
                ts.push(node.nodes[x].nodeId);
                if (node.nodes[x].nodes) {
                    var getNodeDieDai = getChildNodeIdArr(node.nodes[x]);
                    for (j in getNodeDieDai) {
                        ts.push(getNodeDieDai[j]);
                    }
                }
            }
        } else {
            ts.push(node.nodeId);
        }
        return ts;
    }

  /*
 * 将选中的项添加到底部
 */
    function clientaddhtml(nodes) {
        var client = [];
        for (var i in nodes) {
            var nodeId = nodes[i];
            var xxx = $('#tree').treeview('getNode', nodeId);
            if (typeof xxx.MachineID != "undefined") {
                if ($("a.list-group-item[data-id='" + xxx.MachineID + "']").length < 1) {
                    client.push(xxx.MachineID);
                }
            }
        }
        if (client.length > 0) {
            jQuery.ajax({
                type: "post",
                url: APP_PATH + "/Manager/Index/taskclientv3/",
                async: true,
                dataType: "json",
                data: {Machine_arr: client},
                success: function (data) {
                    if (data.ErrorCode == 0) {
                        var clinfo = JSON.parse(data.data);
                        var html = '';
                        for (var i in clinfo) {
                            var cll = clinfo[i];
                            html += "<a href=\"javascript:void(0);\" class=\"list-group-item\" data-id=\"" + cll.MachineID + "\">\n" +
                                cll.UserName + "&#x3000;(部门：" + cll.GroupName + ")\n" +
                                "                                        <span class=\"glyphicon glyphicon-remove ccremove\" data-id=\"" + cll.MachineID + "\"\n" +
                                "                                              data-field=\"" + cll.UserName + "\"\n" +
                                "                                              οnclick=\"ccremove(this)\"\n" +
                                "                                              style=\"position: absolute;right: 4%;top: 33%;\"></span>\n" +
                                "                                    </a>";
                        }
                        $("#iiselected").append(html);
                    }
                    clientcount();
                }
            })
        }
    }

 function setParentNodeCheck(node) {
        // console.log(node,node.parentId);
        var parentNode = $("#tree").treeview("getNode", node.parentId);
        // console.log(parentNode,parentNode.nodes);
        if (parentNode.nodes) {
            var checkedCount = 0;
            for (var x in parentNode.nodes) {
                if (parentNode.nodes[x].state.checked) {
                    checkedCount++;
                }
            }
            if (checkedCount === parentNode.nodes.length) {
                $("#tree").treeview("checkNode", node.nodeId);
                setParentNodeCheck(parentNode.nodes);
            }
        }
    }

function getChildNodeIdArr1(node) {
        var ts = [];
        if (node.nodes) {
            for (x in node.nodes) {
                if (node.nodes[x].state.disabled !== true && node.nodes[x].state.disabled !== 'disabled')
                ts.push(node.nodes[x].nodeId);
                if (node.nodes[x].nodes) {
                    var getNodeDieDai = getChildNodeIdArr(node.nodes[x]);
                    for (j in getNodeDieDai) {
                        ts.push(getNodeDieDai[j]);
                    }
                }
            }
        } else {
            ts.push(node.nodeId);
        }
        return ts;
    }

	function clientdelhtml(nodes) {
	   for (var i in nodes) {
	       var nodeId = nodes[i];
	       var xxx = $('#tree').treeview('getNode', nodeId);
	       if (typeof xxx.MachineID != "undefined") {
	           $("a.list-group-item[data-id='" + xxx.MachineID + "']").remove();
	       }
	   }
	   clientcount();
	}
	function clientcount() {
	   $("#clientcount").html($("#iiselected").children("a.list-group-item").length - 1)
	}

	function setParentNodeUnCheck(node) {
	
	   var uncheckedCount = node.nodes.length;
	   for (var x in node.nodes) {
	       if (node.nodes[x].state.checked) {
	           uncheckedCount--;
	       }
	   }
	   if (uncheckedCount === node.nodes.length) {
	       $("#tree").treeview("uncheckNode", node.nodeId);
	       var parentNode = $("#tree").treeview("getNode", node.parentId);
	       if (typeof  parentNode.nodeId != "undefined") {
	           setParentNodeUnCheck(parentNode);
	       }
	   }
	}

//检查范围设置模糊查询  这里是点击搜索事件方法
   function client_search () {

       var client_name = $("#client_name").val().trim();
       if (client_name.length < 1) {
           $('#tree').treeview('collapseAll', { silent: true });
           layer.msg('请输入关键词');
           return false;
       }
       $("#tree").treeview("search", [
           client_name,
           {
               ignoreCase: true, // case insensitive
               exactMatch: false, // like or equals
               revealResults: true, // reveal matching nodes
           },
       ]);
   }

 // 这里是treeview searchComplete事件函数 针对search 搜索会跳转到第一模糊搜索的位置
	$('#tree').on('searchComplete',function(event, data) { 
	
        if(data.length == 0 || JSON.stringify(data) == "{}"){
            return false;
        }
        //如果查找到的位置数据超出当前范围滚动条直接滚动到搜索结果中的第一条数据的位置
        var nodeId = data[0].nodeId;

        var firstSearchResult = $('#tree').find('ul').find('li[data-nodeid='+ nodeId +']');
        $(document).scrollTop(firstSearchResult[0].offsetTop);
    });

效果是输入后模糊匹配到的显示红色