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 相关文章推荐
IE6不能修改NAME问题的解决方法
Sep 03 Javascript
Script的加载方法小结
Jan 12 Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
轻松掌握JavaScript装饰者模式
Aug 27 Javascript
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 Javascript
MVVM 双向绑定的实现代码
Jun 21 Javascript
基于Fixed定位的框选功能的实现代码
May 13 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
Vue.js watch监视属性知识点总结
Nov 11 Javascript
JS对象属性的检测与获取操作实例分析
Mar 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读取xml实例代码
2010/01/28 PHP
Thinkphp中Create方法深入探究
2014/06/16 PHP
php实现留言板功能
2017/03/05 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
php7下的filesize函数
2019/09/30 PHP
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
2009/10/11 Javascript
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
动态添加删除表格行的js实现代码
2014/02/28 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
Python调用服务接口的实例
2019/01/03 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
成品仓管员岗位职责
2013/12/11 职场文书
社团成立邀请函
2014/01/08 职场文书
电脑专业个人求职信范文
2014/02/04 职场文书
文员的职业生涯规划发展方向
2014/02/08 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
《分一分》教学反思
2014/04/13 职场文书
合伙购房协议样本
2014/10/06 职场文书
会计专业求职信范文
2015/03/19 职场文书
清明节寄语2015
2015/03/23 职场文书
担保贷款承诺书
2015/04/30 职场文书
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python
Java设计模式之代理模式
2022/04/22 Java/Android