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 相关文章推荐
比较简单的一个符合web标准的JS调用flash方法
Nov 29 Javascript
用Javascript同时提交多个Web表单的方法
Dec 26 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
Aug 01 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
用vue构建多页面应用的示例代码
Sep 20 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 Javascript
微信小程序实现日历签到
Sep 21 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 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
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
jQuery $.each的用法说明
2010/03/22 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
JavaScript实现的购物车效果可以运用在好多地方
2014/05/09 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
2017/04/24 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
JSON Web Tokens的实现原理
2017/04/02 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
Python if语句知识点用法总结
2018/06/10 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
python实现猜拳游戏项目
2020/11/30 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
美国电视购物HSN官网:HSN
2016/09/07 全球购物
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
任课老师推荐信范文
2013/11/24 职场文书
管理部部长岗位职责
2013/12/05 职场文书
银行介绍信范文
2014/01/10 职场文书
结婚保证书范文
2014/04/29 职场文书
捐书活动倡议书
2015/04/27 职场文书
信用卡催款律师函
2015/05/27 职场文书
node快速搭建后台的实现步骤
2022/02/18 NodeJs