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 相关文章推荐
EasyUI中的tree用法介绍
Nov 01 Javascript
js获取url参数值的两种方式
Sep 10 Javascript
动态加载js、css等文件跨iframe实现
Feb 24 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
JavaScript匿名函数之模仿块级作用域
Dec 12 Javascript
artDialog+plupload实现多文件上传
Jul 19 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
Nov 26 Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
vue 实现上传组件
May 31 Vue.js
JS前端宏任务微任务及Event Loop使用详解
Jul 23 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 错误之引号中使用变量
2009/05/04 PHP
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
基于JQuery的cookie插件
2010/04/07 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
Python爬虫学习之翻译小程序
2019/07/30 Python
浅谈对python中if、elif、else的误解
2020/08/20 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
会计主管岗位职责范文
2013/11/08 职场文书
《影子》教学反思
2014/02/21 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
暑期社会实践心得体会
2014/09/02 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
工会文体活动总结
2015/05/07 职场文书
八年级英语教学反思
2016/02/15 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
温馨祝福晨语:美丽的一天从我的问候开始
2019/11/28 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server