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 相关文章推荐
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 Javascript
Android中的jQuery:AQuery简介
May 06 Javascript
JavaScript中Math.SQRT2属性的使用详解
Jun 14 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 Javascript
JS验证邮件地址格式方法小结
Dec 01 Javascript
Javascript复制实例详解
Jan 28 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
Typescript的三种运行方式(小结)
Sep 18 Javascript
详解JS函数防抖
Jun 05 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 21 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
PHP备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
php链表用法实例分析
2015/07/09 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
关于Mozilla浏览器不支持innerText的解决办法
2011/01/01 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
Javascript基础知识(三)BOM,DOM总结
2014/09/29 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
解决iView中时间控件选择的时间总是少一天的问题
2018/03/15 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
python Web开发你要理解的WSGI &amp; uwsgi详解
2018/08/01 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
python多线程扫描端口(线程池)
2019/09/04 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
基于Python fminunc 的替代方法
2020/02/29 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
html5与css3小应用
2013/04/03 HTML / CSS
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
数控技术学生的自我评价
2014/02/15 职场文书
《美丽的小路》教学反思
2014/02/26 职场文书
文化宣传方案
2014/03/13 职场文书
Python进程间的通信之语法学习
2022/04/11 Python