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 $.data()方法使用注意细节
Dec 31 Javascript
JS图片根据鼠标滚动延时加载的实例代码
Jul 13 Javascript
node.js中的buffer.write方法使用说明
Dec 10 Javascript
jQuery简单实现验证邮箱格式
Jul 15 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
Sep 11 Javascript
写给小白看的JavaScript异步
Nov 29 Javascript
微信小程序实现YDUI的ScrollNav组件
Feb 02 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
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
解决中英文字符串长度问题函数
2007/01/16 PHP
PHP获取163、gmail、126等邮箱联系人地址【已测试2009.10.10】
2009/10/11 PHP
php中动态调用函数的方法
2015/03/16 PHP
Laravel 5框架学习之表单
2015/04/08 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
web打印小结
2017/01/11 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
2019/01/19 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
vue  elementUI 表单嵌套验证的实例代码
2019/11/06 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
深入理解NumPy简明教程---数组2
2016/12/17 Python
老生常谈python的私有公有属性(必看篇)
2017/06/09 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
台湾母婴用品购物网站:Infant婴之房
2018/06/15 全球购物
法制宣传口号
2014/06/16 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书
史上最牛的辞职信
2015/02/28 职场文书
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS
python游戏开发之pygame实现接球小游戏
2022/04/22 Python