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 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
写出更好的JavaScript程序之undefined篇(中)
Nov 23 Javascript
将查询条件的input、select清空
Jan 14 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
利用Keydown事件阻止用户输入实现代码
Mar 11 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 Javascript
浅谈js闭包理解
Mar 28 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
小程序接入腾讯位置服务的详细流程
Mar 03 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
写出高质量的PHP程序
2012/02/04 PHP
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
php使用PDO操作MySQL数据库实例
2014/12/30 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
js鼠标左右键 键盘值小结
2010/06/11 Javascript
jQuery学习笔记之Helloworld
2010/12/22 Javascript
JS实现商品倒计时实现代码
2013/05/03 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
jQuery表单域属性过滤器用法分析
2015/02/10 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
基于jQuery的checkbox全选问题分析
2016/11/18 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
javascript 内存模型实例详解
2020/04/18 Javascript
[02:31]2014DOTA2国际邀请赛2009专访:干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
python中os模块详解
2016/10/14 Python
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
python set集合使用方法解析
2019/11/05 Python
Python验证码截取识别代码实例
2020/05/16 Python
Python运算符+与+=的方法实例
2021/02/18 Python
阿波罗盒子:Apollo Box
2017/08/14 全球购物
经贸日语毕业生自荐信
2013/11/03 职场文书
仓库组长岗位职责
2014/01/29 职场文书
物业经理自我鉴定
2014/03/03 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
餐馆开业致辞
2015/08/01 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书