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 相关文章推荐
关于Blog顶部的滚动导航条代码
Sep 25 Javascript
IE和FireFox(FF)中js和css的不同
Apr 13 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
jQuery1.9+中删除了live以后的替代方法
Jun 17 Javascript
jQuery实现6位数字密码输入框
Dec 29 Javascript
jQuery快速高效制作网页交互特效
Feb 24 Javascript
实现两个文本框同时输入的实例
Sep 25 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 Javascript
一起来了解一下JavaScript的预编译(小结)
Mar 01 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移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
点击广告后才能获得下载地址
2006/10/26 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
Python getopt模块处理命令行选项实例
2014/05/13 Python
Python实现统计代码行的方法分析
2017/07/12 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
部队领导证婚词
2014/01/12 职场文书
婚礼证婚人证婚词
2014/01/13 职场文书
上班离岗检讨书
2014/01/27 职场文书
公司成本主管岗位责任制
2014/02/21 职场文书
秋季校运动会广播稿
2014/02/23 职场文书
超市仓管员岗位职责
2014/04/07 职场文书
初中生评语大全
2014/04/24 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
2014年团工作总结
2014/11/27 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
redis lua限流算法实现示例
2022/07/15 Redis
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers