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控制表格隔行变色
Jun 26 Javascript
jscript之List Excel Color Values
Jun 13 Javascript
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 Javascript
JavaScript中的Primitive对象封装介绍
Dec 31 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
对js eval()函数的一些见解
Aug 15 Javascript
Vue实现内部组件轮播切换效果的示例代码
Apr 07 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 Javascript
Javascript删除数组里的某个元素
Feb 28 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
S900/ ETON E1-XM 收音机
2021/03/02 无线电
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
python脚本爬取字体文件的实现方法
2017/04/29 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
python3爬取各类天气信息
2018/02/24 Python
Python基于whois模块简单识别网站域名及所有者的方法
2018/04/23 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
python基础梳理(一)(推荐)
2019/04/06 Python
浅析python redis的连接及相关操作
2019/11/07 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
python能否java成为主流语言吗
2020/06/22 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
夜班门卫岗位职责
2013/12/09 职场文书
旺仔牛奶广告词
2014/03/20 职场文书
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
2015年服务员工作总结
2015/04/08 职场文书
金陵十三钗观后感
2015/06/04 职场文书
《圆的面积》教学反思
2016/02/19 职场文书