jQuery树控件zTree使用方法详解(一)


Posted in Javascript onFebruary 28, 2017

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

二、节点异步加载:1、点击展开时加载数据;2、选中节点时加载数据。

前台代码如下:

js:

<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>

html:

<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);
 }

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
js substring从右边获取指定长度字符串(示例代码)
Dec 23 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 Javascript
给easyui datebox扩展一个清空的实例
Nov 09 Javascript
Canvas + JavaScript 制作图片粒子效果
Feb 08 Javascript
js+html获取系统当前时间
Nov 10 Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 Javascript
JavaScript实现班级抽签小程序
May 19 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 #Javascript
js数字舍入误差以及解决方法(必看篇)
Feb 28 #Javascript
JS实现浏览器打印、打印预览示例
Feb 28 #Javascript
JS基于面向对象实现的多个倒计时器功能示例
Feb 28 #Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 #Javascript
jQuery图片切换动画效果
Feb 28 #Javascript
jQuery 判断元素整理汇总
Feb 28 #Javascript
You might like
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
安装docker和docker-compose实例详解
2019/07/30 PHP
php实现登录页面的简单实例
2019/09/29 PHP
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
AngularJS教程 ng-style 指令简单示例
2016/08/03 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
2017/12/20 Javascript
vue引入js数字小键盘的实现代码
2018/05/14 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
python调用staf自动化框架的方法
2018/12/26 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
Django如何批量创建Model
2020/09/01 Python
python把一个字符串切开的实例方法
2020/09/27 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
C语言笔试题
2014/09/04 面试题
幼儿园三八妇女节活动方案
2014/03/11 职场文书
一年级小学生评语
2014/04/22 职场文书
企业理念标语
2014/06/09 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
护理目标管理责任书
2014/07/25 职场文书
教育实习指导教师评语
2014/12/31 职场文书
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技
JS前端使用Canvas快速实现手势解锁特效
2022/09/23 Javascript