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如何实现点击页面获得当前点击元素的id或其他信息
Jan 09 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
Nov 10 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
JS中this的指向以及call、apply的作用
May 06 Javascript
简单的三步vuex入门
May 20 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
vue页面跳转实现页面缓存操作
Jul 22 Javascript
vuex存取值和映射函数使用说明
Jul 24 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检测图片木马多进制编程实践
2013/04/11 PHP
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
PHP的变量类型和作用域详解
2014/03/12 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
jQuery使用ajaxSubmit()提交表单示例
2014/04/04 Javascript
JS交换变量的方法
2015/01/21 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
Javascript的表单验证-初识正则表达式
2016/03/18 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
浅谈JavaScript作用域和闭包
2017/09/18 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
[08:40]Navi Vs Newbee
2018/06/07 DOTA
python 从远程服务器下载日志文件的程序
2013/02/10 Python
Python中用于返回绝对值的abs()方法
2015/05/14 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
会计电算化个人自我评价
2013/11/17 职场文书
《检阅》教学反思
2016/02/22 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
golang 如何通过反射创建新对象
2021/04/28 Golang
日元符号 ¥
2022/02/17 杂记
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python