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 相关文章推荐
jQuery Ajax 实例全解析
Apr 20 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 Javascript
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 Javascript
浅析VUE防抖与节流
Nov 24 Vue.js
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脚本的10个技巧(6)
2006/10/09 PHP
新手学PHP之数据库操作详解及乱码解决!
2007/01/02 PHP
自动分页的不完整解决方案
2007/01/12 PHP
php header功能的使用
2013/10/28 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
JS获取select的value和text值的简单实例
2014/02/26 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
javascript格式化日期时间方法汇总
2015/06/19 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
js的三种继承方式详解
2017/01/21 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
Python Socket编程入门教程
2014/07/11 Python
Python3中常用的处理时间和实现定时任务的方法的介绍
2015/04/07 Python
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
python实现给数组按片赋值的方法
2015/07/28 Python
python读取几个G的csv文件方法
2019/01/07 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
对Python3之方法的覆盖与super函数详解
2019/06/26 Python
Python shelve模块实现解析
2019/08/28 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
python判断变量是否为列表的方法
2020/09/17 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
市场营销专业推荐信
2013/11/03 职场文书
通信工程专业毕业生推荐信
2013/12/25 职场文书
合作意向书模板
2014/03/31 职场文书
捐书倡议书
2014/08/29 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript