jquery zTree异步加载、模糊搜索简洁实例分享_

1、jquery zTree异步加载、模糊搜索简洁实例分享_ 本文实例为大家讲解了jquery zTree树插件的基本用法方法，具体内容如下 一、节点模糊搜索功能：搜索胜利后，自动高亮显示并定位、绽开搜索到的节点。 二、节点异步加载：1、点击绽开时加载数据；2、选中节点时加载数据。 前台代码如下： script type=text/javascript /ztree设置 var setting = view: fontCss: getFontCss , check: enable: true , data: simpleData: enable: true, idKey: id, pIdKey:

2、pId, rootPId: 0 , async: enable: true, url: #getStudentsJsonUrl, autoParam: id, level , callback: beforeCheck: zTreeBeforeCheck, onNodeCreated: zTreeOnNodeCreated, beforeExpand: zTreeBeforeExpand ; var reloadFlag = false; /是否重新异步恳求 var checkFlag = true; /是否选中 /节点绽开前 function zTreeBeforeExpand(treeId

3、, treeNode) reloadFlag = false; return true; ; /节点创建后 function zTreeOnNodeCreated(event, treeId, treeNode) var zTree = $.fn.zTree.getZTreeObj(treeId); if (reloadFlag) if (checkFlag) zTree.checkNode(treeNode, true, true); if (!treeNode.children) zTree.reAsyncChildNodes(treeNode, refresh); ; /选中节点前 fu

4、nction zTreeBeforeCheck(treeId, treeNode) var zTree = $.fn.zTree.getZTreeObj(treeId); if (!treeNode.children) reloadFlag = true; checkFlag = true; zTree.reAsyncChildNodes(treeNode, refresh); return true; /页面加载完成 _run(function () require(zTree/js/jquery.ztree.all-3.5, function () $.ajax( type: POST,

5、url: #getStudentsJsonUrl, success: function (data) if (data data.length != 0) /假如结果不为空 $.fn.zTree.init($(#tree), setting, data); else /搜索不到结果 ); ); /提交 $(#inputSubmit).click(function () var zTree = $.fn.zTree.getZTreeObj(tree); var nodes = zTree.getCheckedNodes(true); var ids = ; var names = ; for (

6、var i = 0; i nodes.length; i+) /遍历选择的节点集合 if (!nodesi.isParent) ids += nodesi.id.replace(level + nodesi.level, ) + ,; names += + ,; Simpo.ui.box.hideBox(); parent.$(.boxFrm).contents().find(#inputRange).val(names.substr(0, names.length - 1); parent.$(.boxFrm).contents().find(#hidRange).v

7、al(ids.substr(0, ids.length - 1); ) ); /查找节点 var lastNodeList = ; var lastKey; function searchNode() var zTree = $.fn.zTree.getZTreeObj(tree); var key = $.trim($(#inputSearchNode).val(); if (key != key != lastKey) nodeList = zTree.getNodesByParamFuzzy(name, key); for (var i = 0, l = lastNodeList.len

8、gth; i l; i+) /上次查询的节点集合取消高亮 lastNodeListi.highlight = false; zTree.updateNode(lastNodeListi); zTree.expandAll(false); /全部收缩 if (nodeList.length 0) for (var i = 0, l = nodeList.length; i l; i+) /遍历找到的节点集合 if (nodeListi.getParentNode() zTree.expandNode(nodeListi.getParentNode(), true, false, false);

9、/绽开其父节点 nodeListi.highlight = true; zTree.updateNode(nodeListi); zTree.refresh(); / 很重要，否则节点状态更新混乱。 lastNodeList = nodeList; lastKey = key; /加载数据 function loadData() var zTree = $.fn.zTree.getZTreeObj(tree); var rootNodes = zTree.getNodes(); reloadFlag = true; checkFlag = false; for (var i = 0; i ro

10、otNodes.length; i+) if (!rootNodesi.children) zTree.reAsyncChildNodes(rootNodesi, refresh); /异步加载 /全部收缩 function closeAll() var zTree = $.fn.zTree.getZTreeObj(tree); if ($(#inputCloseAll).val() = 全部收缩) zTree.expandAll(false); $(#inputCloseAll).val(全部绽开) else zTree.expandAll(true); $(#inputCloseAll).

11、val(全部收缩) /高亮样式 function getFontCss(treeId, treeNode) return (treeNode.highlight) ? color: #A60000, font-weight: bold : color: #333, font-weight: normal ; /script - div style=width: 200px; height: 260px; overflow: auto; border: solid 1px #666; ul id=tree class=ztree /ul /div 后台代码（后台返回Json数据）： public

12、 void SelStudent() set(getStudentsJsonUrl, to(GetStudentsJson); public void GetStudentsJson() ListDictionarystring, string dicList = new ListDictionarystring, string(); string level = ctx.Post(level); string id = ctx.Post(id); if (strUtil.IsNullOrEmpty(id) #region 加载班级 /猎取当前登录用户 Sys_User user = Admi

13、nSecurityUtils.GetLoginUser(ctx); /猎取当前用户关联的老师 Edu_Teacher teacher = edu_TeacService.FindByUserId(user.Id); /猎取班级集合 ListEdu_ClaNameFlow list = edu_ClaNameFlowService.GetListByTeacherId(teacher.Id); foreach (Edu_ClaNameFlow item in list) Dictionarystring, string dic = new Dictionarystring, string();

14、dic.Add(id, level0 + item.Calss.Id.ToString(); dic.Add(pId, 0); dic.Add(name, item.Gra.Name + item.Calss.Name); dic.Add(isParent, true); dicList.Add(dic); #endregion else if (level = 0) /加载同学 ListEdu_Student list = edu_StudService.GetListByClassId(id.Replace(level0, ); foreach (Edu_Student item in l

15、ist) Dictionarystring, string dic = new Dictionarystring, string(); dic.Add(id, level1 + item.Id.ToString(); dic.Add(pId, id); dic.Add(name, item.Name); dic.Add(isParent, false); dicList.Add(dic); echoJson(dicList); 三、基于cookie实现zTree树刷新后，绽开状态不变 1、除了引用jQuery和zTree的JS外，引用cookie的JS： 复制代码 代码如下: script t

16、ype=text/javascript src=/Scripts/jquery-treeview/lib/jquery.cookie.js/script 2、JS代码： $(function () /ztree设置 var setting = data: simpleData: enable: true, idKey: id, pIdKey: pId, rootPId: null , callback: onExpand: onExpand, onCollapse: onCollapse ; $.ajax( type: POST, url: /Tech/TemplateTypeManage/G

17、etData, success: function (data) if (data data.length != 0) $.fn.zTree.init($(#tree), setting, data); var treeObj = $.fn.zTree.getZTreeObj(tree); var cookie = $.cookie(z_tree + window.location); if (cookie) z_tree = JSON2.parse(cookie); for (var i = 0; i z_tree.length; i+) var node = treeObj.getNode

18、ByParam(id, z_treei) treeObj.expandNode(node, true, false) ); );/end $ function onExpand(event, treeId, treeNode) var cookie = $.cookie(z_tree + window.location); var z_tree = new Array(); if (cookie) z_tree = JSON2.parse(cookie); if ($.inArray(treeNode.id, z_tree) 0) z_tree.push(treeNode.id); $.cookie(z_tree + window.location, JSON2.stringify(z_tree) function onCollapse(event, treeId, treeNode) var cookie = $.cookie(z_tree + window.location); var z_tree = new Array(); if (cookie) z_tree = JSON2.parse(cookie); var index = $.