Ztree实现搜索框自动检索功能

标签：自动检索 string btmid ztree Ztree 搜索 result var children

ztree自定搜索框添加搜索功能，注：菜单内容一次性加载，后端数据使用父子嵌套的json数据

前段代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="plugins/layui-v2.5.6/css/layui.css" rel="stylesheet" />
    <link href="plugins/ztree/css/demo.css" rel="stylesheet" />
    <link href="plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    <!--<link href="plugins/ztree/css/metroStyle/metroStyle.css" rel="stylesheet" />-->
    <script src="plugins/XBBase.js"></script>
    <script src="plugins/ztree/js/jquery-1.4.4.min.js"></script>
    <script src="plugins/ztree/js/jquery.ztree.core.js"></script>
    <script src="plugins/ztree/js/jquery.ztree.excheck.js"></script>
    <script src="plugins/layui-v2.5.6/layui.js"></script>
　　/*父节点折叠关闭图标样式*/
    <style type="text/css">
        .ztree li span.button.pIcon01_ico_open {
            margin-right: 2px;
            background: url(plugins/ztree/css/zTreeStyle/img/diy/1_open.png) no-repeat scroll 0 0 transparent;
            vertical-align: top;
            *vertical-align: middle
        }

        .ztree li span.button.pIcon01_ico_close {
            margin-right: 2px;
            background: url(plugins/ztree/css/zTreeStyle/img/diy/1_open.png) no-repeat scroll 0 0 transparent;
            vertical-align: top;
            *vertical-align: middle
        }

        .ztree li span.button.pIcon02_ico_open {
            margin-right: 2px;
            background: url(plugins/ztree/css/zTreeStyle/img/diy/1_close.png) no-repeat scroll 0 0 transparent;
            vertical-align: top;
            *vertical-align: middle
        }

        .ztree li span.button.pIcon02_ico_close {
            margin-right: 2px;
            background: url(plugins/ztree/css/zTreeStyle/img/diy/1_close.png) no-repeat scroll 0 0 transparent;
            vertical-align: top;
            *vertical-align: middle
        }
    </style>
</head>
<body>
    <div class="layui-container">
        <form class="layui-form" style="padding: 5px;" action="">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input id="key" type="text" name="title" required lay-verify="required" placeholder="请输入搜索内容" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn layui-btn-sm" id="btnSearch">刷新</button>
                </div>
            </div>
        </form>
        <ul id="treeDemo" class="ztree"></ul>
    </div>
    <script>

        var tree,
            util,
            btmid,
            xbdep,
            jdmc,
            key,
            zNodesMap,
            zNodes,
            curNode,
            setting = {
                view: {
                    selectedMulti: true
                },
                check: {
                    enable: true
                },
                data: {
                    key: {
                        checked: "checked",
                        children: "children",
                        name: "title"
                    }
                },
                callback: {
                    //beforeCheck: beforeCheck,
                    onCheck: onCheck
                }
            };;
        layui.use(['tree', 'util'],
            function () {
                tree = layui.tree, util = layui.util;

                btmid = getQueryString(window.location.href, "btmid");
                xbdep = getQueryString(window.location.href, "xbdep");
                jdmc = getQueryString(window.location.href, "jdmc");

                loadPage(btmid);
　　　　　　　　　　//文本框绑定搜索事件
                key = $("#key");
                key.bind("propertychange", searchNode)
                    .bind("input", searchNode);
            });
　　　　 //重载数据
        $("#btnSearch").click(function () {
            loadPage(btmid);
        });
　　　　//获取点击节点数据自动保存
        function onCheck(e, treeId, treeNode) {
            console.log(treeNode);
            var roleids = [];
            if (treeNode.children.length > 0) {
                roleids = getChildren(treeNode.children, treeNode.checked);
            } else {
                roleids.push({ roleid: treeNode.id, ischeck: treeNode.checked });
            }
            console.log(roleids);
            $.post(url,
                { btmid: btmid, xbdep: decodeURI(xbdep), jdmc: decodeURI(jdmc), roleids: roleids },
                function (result) {
                    console.log(result);

                });
        }
　　　　//递归获取最后一级叶子节点
        function getChildren(list, ischeck, returnValue = []) {
            for (let i in list) {
                if (Object.prototype.hasOwnProperty.call(list, i)) {
                    var item = list[i];
                    if (item.children.length > 0) {
                        returnValue.push(...getChildren(item.children, ischeck, []));
                    } else {
                        returnValue.push({ roleid: item.id, ischeck: ischeck });
                    }
                }
            }
            return returnValue;
        }
        function loadPage(btmid) {
            $.ajax({
                url: url,
                type: 'get',
                dataType: 'json',
                success: function (result) {
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    if (result.code === 1) {
　　　　　　　　　　　　　　//初始化ztree
                        $.fn.zTree.init($("#treeDemo"), setting, result.data);
                        zNodes = result.data;
                    }
                }
            });
        }
　　　　//搜索方法
        function searchNode(e) {
            var value = $.trim(key.get(0).value);
            var result = getSearchChildren(zNodes, value);
            //console.log(result);
            // 每次查询后都重新初始化 zTree
            $.fn.zTree.init($("#treeDemo"), setting, result);
        }
　　　　　　
//递归查询
function getSearchChildren(list, value) {
　　var filterList = [];
　　list.forEach((ele) => {
　　　　if (ele.children.length > 0) {
　　　　　　var curele = JSON.parse(JSON.stringify(ele));
　　　　　　curele.children = [];
　　　　　　var curResult = getSearchChildren(ele.children, value);

　　　　　　if (curResult.length) {
　　　　　　　　curele.children = curResult;
　　　　　　　　//搜索后节点默认打开
　　　　　　　　curele.open = true;
　　　　　　　　filterList.push(curele);
　　　　　　}
　　　　　　if (!curResult.length && curele.title.indexOf(value) > -1) {
　　　　　　　　//节点默认打开
　　　　　　　　curele.open = true;
　　　　　　　　filterList.push(curele);
　　　　　　}
　　　　}
　　　　else {
　　　　　　if (ele.title.indexOf(value) > -1) {
　　　　　　　　ele.open = true;
　　　　　　　　filterList.push(ele);
　　　　　　}
　　　　}
　　});
　　return filterList;
}

</script>
</body>
</html>

后端代码：

public ActionResult GetTreeList(string btmid, string xbdep, string jdmc)
        {
            var model = workFlow_Extend.GetListXbInfo(btmid, xbdep);
            string valstr = string.Empty;
            if (model != null)
            {
                var dict = JsonConvert.DeserializeObject<Dictionary<string, string>>(model.XBGCPZ);
                dict.TryGetValue(jdmc, out valstr);
            }
　　　　　　//注：数据量不多情况，把所有数据读取到集合中，减少每次子节点查询对数据库的访问
            var allList = workFlow_Extend.GetRoleByPID("");
            var result = allList.Where(s => s.PARENTROLEID is null);
            List<TreeViewModel> list = new List<TreeViewModel>();
            foreach (var item in result)
            {
                bool ischeck = valstr.Contains(item.ROLEID);
                var pTree = new TreeViewModel
                {
                    id = item.ROLEID,
                    title = item.ROLENAME,
                    Checked = ischeck,
                    iconSkin = "pIcon01"
                };

                pTree.children = CreateChildTree(item.ROLEID, valstr, allList);
                list.Add(pTree);
            }
            return JsonNew(new { code = 1, data = list });
        }
        //添加子分类
        private List<TreeViewModel> CreateChildTree(string pid, string valstr, List<SFS_ROLEINFO> allList)
        {
            List<TreeViewModel> nodeList = new List<TreeViewModel>();

            var children = allList.Where(s => s.PARENTROLEID == pid); //workFlow_Extend.GetRoleByPID(pid);
            foreach (var citem in children)
            {
                bool ischeck = valstr.Contains(citem.ROLEID);
                var cTree = new TreeViewModel
                {
                    id = citem.ROLEID,
                    title = citem.ROLENAME,
                    Checked = ischeck,
                    iconSkin = "pIcon02"
                };
                cTree.children = CreateChildTree(citem.ROLEID, valstr, allList);
                nodeList.Add(cTree);
            }
            return nodeList;
        }

public class TreeViewModel
    {
        public string title { get; set; }
        public string id { get; set; }

        public List<TreeViewModel> children { get; set; }

        [JsonProperty("checked")]
        public bool Checked { get; set; }

        public string iconSkin { get; set; }

    }

标签：自动检索,string,btmid,ztree,Ztree,搜索,result,var,children
From： https://www.cnblogs.com/MrLiu90/p/16986529.html

Ztree实现搜索框自动检索功能

相关文章

赞助商

阅读排行