ztree加载完成后显示勾选节点的实现代码


Posted in Javascript onOctober 22, 2018

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

介绍

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是 树状菜单、树状数据的Web显示、权限管理等等。
zTree 是开源免费的软件(MIT 许可证)。在开源的作用下,zTree 越来越完善,目前已经拥有了不少粉丝,并且今后还会推出更多的 zTree 扩展功能库,让 zTree 更加强大。

特点

● zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载
● 采用了延迟加载技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀
● 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
● 支持 JSON 数据
● 支持静态和 Ajax 异步加载节点数据
● 支持任意更换皮肤 / 自定义图标(依靠css)
● 支持极其灵活的 checkbox 或 radio 选择功能
● 提供多种事件响应回调
● 灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽哟
● 在一个页面内可同时生成多个 Tree 实例
● 简单的参数配置实现 灵活多变的功能

下面给大家介绍ztree加载完成后显示勾选节点的实例代码

①前言:这个在度娘上没有搜到解决的办法,于是自己查看了ztree的API,发现其实还是比较简单的。做个笔记以备不时之需。

②需求:

像下图一样,在加载完成之后就显示需要勾选的项。

ztree加载完成后显示勾选节点的实现代码

③解决方案:

首先页面上肯定是要获取数据库的数据,比如你存储的是id或者Code之类的以,隔开的数据。我这里存贮的是code。

然后将数据库的数据以,隔开成数组。

利用API中的treeObj提供的getNodeByParam(),checkNode()方法即可完成需求。

ztreeAPI传送门:点击这里

参考代码如下:

var treeObj = $.fn.zTree.getZTreeObj("mytree");
var data = "${userInfo.area_code}";
var datas = data.split(',');
for(var i = 0;i<datas.length;i++) {
console.log(treeObj.getNodeByParam("code", datas[i],null))

treeObj.checkNode(treeObj.getNodeByParam("code", datas[i],null),true, false);
}

总结

以上所述是小编给大家介绍的ztree加载完成后显示勾选节点的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript中的常见排序算法
Mar 27 Javascript
复制本贴标题和地址的js代码
Jul 01 Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
Oct 29 Javascript
jQuery 使用手册(六)
Sep 23 Javascript
JS获取各种浏览器窗口大小的方法
Jan 14 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
javascript实现继承的简单实例
Jul 26 Javascript
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
Jquery获取radio选中值实例总结
Jan 17 jQuery
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
javascript实现电商放大镜效果
Nov 23 Javascript
javascript拖曳互换div的位置实现示例
Jun 28 Javascript
electron实现qq快捷登录的方法示例
Oct 22 #Javascript
Electron-vue脚手架改造vue项目的方法
Oct 22 #Javascript
angular 服务的单例模式(依赖注入模式下)详解
Oct 22 #Javascript
vue 配置多页面应用的示例代码
Oct 22 #Javascript
微信小程序引用iconfont图标的方法
Oct 22 #Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 #Javascript
js异步上传多张图片插件的使用方法
Oct 22 #Javascript
You might like
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
PHP 面向对象 final类与final方法
2010/05/05 PHP
PHP学习之数组的定义和填充
2011/04/17 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
基于jquery自定义图片热区效果
2012/07/21 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
[00:56]PWL开团时刻DAY8——追追追追追!
2020/11/09 DOTA
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
Python专用方法与迭代机制实例分析
2014/09/15 Python
Python中常见的数据类型小结
2015/08/29 Python
python 内置函数filter
2017/06/01 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
Python入门之后再看点什么好?
2018/03/05 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
解决Python获取字典dict中不存在的值时出错问题
2018/10/17 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
python进程和线程用法知识点总结
2019/05/28 Python
python进阶之自定义可迭代的类
2019/08/20 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
详解使用HTML5的classList属性操作CSS类
2017/10/13 HTML / CSS
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
小学一年级评语大全
2014/04/22 职场文书
党性心得体会
2014/09/03 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
2014年稽查工作总结
2014/12/20 职场文书