Ztree实现搜索框自动检索功能
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; } }
