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


Posted in Javascript onMarch 24, 2016

本文实例为大家讲解了jquery zTree树插件的基本使用方法,具体内容如下

一、节点模糊搜索功能:搜索成功后,自动高亮显示并定位、展开搜索到的节点。

二、节点异步加载:1、点击展开时加载数据;2、选中节点时加载数据。
前台代码如下:

<script type="text/javascript">
 //ztree设置
 var setting = {
 view: {
 fontCss: getFontCss
 },
 check: {
 enable: true
 },
 data: {
 simpleData: {
 enable: true,
 idKey: "id",
 pIdKey: "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, 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");
 }
 }
 };

 //选中节点前
 function 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",
 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 (var i = 0; i < nodes.length; i++) { //遍历选择的节点集合
 if (!nodes[i].isParent) {
 ids += nodes[i].id.replace("level" + nodes[i].level, "") + ",";
 names += nodes[i].name + ",";
 }
 }
 Simpo.ui.box.hideBox();
 parent.$(".boxFrm").contents().find("#inputRange").val(names.substr(0, names.length - 1));
 parent.$(".boxFrm").contents().find("#hidRange").val(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.length; i < l; i++) { //上次查询的节点集合取消高亮
 lastNodeList[i].highlight = false;
 zTree.updateNode(lastNodeList[i]);
 }
 zTree.expandAll(false); //全部收缩
 if (nodeList.length > 0) {
 for (var i = 0, l = nodeList.length; i < l; i++) { //遍历找到的节点集合
 if (nodeList[i].getParentNode()) {
 zTree.expandNode(nodeList[i].getParentNode(), true, false, false); //展开其父节点
 }
 nodeList[i].highlight = true;
 zTree.updateNode(nodeList[i]);
 }
 }
 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 < rootNodes.length; i++) {
 if (!rootNodes[i].children) {
 zTree.reAsyncChildNodes(rootNodes[i], "refresh"); //异步加载
 }
 }
 }

 //全部收缩
 function closeAll() {
 var zTree = $.fn.zTree.getZTreeObj("tree");
 if ($("#inputCloseAll").val() == "全部收缩") {
 zTree.expandAll(false);
 $("#inputCloseAll").val("全部展开")
 }
 else {
 zTree.expandAll(true);
 $("#inputCloseAll").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 void SelStudent()
 {
 set("getStudentsJsonUrl", to(GetStudentsJson));
 }

 public void GetStudentsJson()
 {
 List<Dictionary<string, string>> dicList = new List<Dictionary<string, string>>();

 string level = ctx.Post("level");
 string id = ctx.Post("id");
 if (strUtil.IsNullOrEmpty(id))
 {
 #region 加载班级
 //获取当前登录用户
 Sys_User user = AdminSecurityUtils.GetLoginUser(ctx);
 //获取当前用户关联的老师
 Edu_Teacher teacher = edu_TeacService.FindByUserId(user.Id);
 //获取班级集合
 List<Edu_ClaNameFlow> list = edu_ClaNameFlowService.GetListByTeacherId(teacher.Id);
 foreach (Edu_ClaNameFlow item in list)
 {
 Dictionary<string, string> dic = new Dictionary<string, string>();
 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")
 {
 //加载学生
 List<Edu_Student> list = edu_StudService.GetListByClassId(id.Replace("level0", ""));
 foreach (Edu_Student item in list)
 {
 Dictionary<string, string> dic = new Dictionary<string, 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 type="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/GetData",
 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.getNodeByParam('id', z_tree[i])
   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 = $.inArray(treeNode.id, z_tree);
 z_tree.splice(index, 1);
 for (var i = 0; i < treeNode.children.length; i++) {
 index = $.inArray(treeNode.children[i].id, z_tree);
 if (index > -1) z_tree.splice(index, 1);
 }
 $.cookie("z_tree" + window.location, JSON2.stringify(z_tree))
}

更多关于ztree控件的内容,请参考专题《jQuery插件ztree使用汇总》

以上就是关于树插件zTree异步加载、模糊搜索简单实例讲解,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript编程起步(第四课)
Feb 27 Javascript
javascript div 弹出可拖动窗口
Feb 26 Javascript
JavaScript关于select的相关操作说明
Jan 13 Javascript
javascript 图片上一张下一张链接效果代码
Mar 12 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
Oct 11 Javascript
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
使用Jquery实现点击文字后变成文本框且可修改
Sep 21 Javascript
理解javascript正则表达式
Mar 08 Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
JS异步处理的进化史深入讲解
Aug 25 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
Nov 17 Javascript
js+css实现select的美化效果
Mar 24 #Javascript
基于jQuery Ajax实现上传文件
Mar 24 #Javascript
Angular.js如何从PHP读取后台数据
Mar 24 #Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 #Javascript
JavaScript驾驭网页-CSS与DOM
Mar 24 #Javascript
JavaScript驾驭网页-DOM
Mar 24 #Javascript
常用的JQuery函数及功能小结
Mar 24 #Javascript
You might like
PHP学习 变量使用总结
2011/03/24 PHP
解析左右值无限分类的实现算法
2013/06/20 PHP
php常用的url处理函数总结
2014/11/19 PHP
PHP生成plist数据的方法
2015/06/16 PHP
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
web基于浏览器的本地存储方法应用
2012/11/27 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
jquery append()方法与html()方法的区别及使用介绍
2014/08/01 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
js实现下一页页码效果
2017/03/07 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
python的依赖管理的实现
2019/05/14 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
python 如何在测试中使用 Mock
2021/03/01 Python
Stella McCartney官网:成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
应届毕业生求职信范文
2013/12/18 职场文书
进步之星获奖感言
2014/02/22 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
教师见习总结范文
2015/06/23 职场文书
2016国培研修心得体会
2016/01/08 职场文书
SQL中的三种去重方法小结
2021/11/01 SQL Server
Apache POI的基本使用详解
2021/11/07 Servers
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫