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 相关文章推荐
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
jQuery事件 delegate()使用方法介绍
Oct 30 Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
JS操作Cookie写入和读取实例代码
Oct 20 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
Nov 18 Javascript
javascript实现获取浏览器版本、操作系统类型
Jan 29 Javascript
js+html5实现canvas绘制网页时钟的方法
May 21 Javascript
浅谈jquery页面初始化的4种方式
Nov 27 Javascript
jquery与js实现全选功能的区别
Jun 11 jQuery
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 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 5.0 Pear安装方法
2006/12/06 PHP
PHP详解ASCII码对照表与字符转换
2011/12/05 PHP
php过滤敏感词的示例
2014/03/31 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
PHP中实现获取IP和地理位置类分享
2015/02/10 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
2017/01/20 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
详解vue axios中文文档
2017/09/12 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
vue中将html字符串转换成html后遇到的问题小结
2018/12/10 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
python登陆asp网站页面的实现代码
2015/01/14 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
Python udp网络程序实现发送、接收数据功能示例
2019/12/09 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
python logging设置level失败的解决方法
2020/02/19 Python
django实现模型字段动态choice的操作
2020/04/01 Python
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
秋季婚礼证婚词
2014/01/11 职场文书
火锅店的活动方案
2014/08/15 职场文书
先进事迹演讲稿
2014/09/01 职场文书
房产转让协议书(2014版)
2014/09/30 职场文书
浅谈@Value和@Bean的执行顺序问题
2021/06/16 Java/Android