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 相关文章推荐
innerText和innerHTML 一些问题分析
May 18 Javascript
jQuery ui 1.7更新小结
Aug 15 Javascript
javascript Array数组对象的扩展函数代码
May 22 Javascript
javascript 日期时间 转换的方法
Feb 21 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
简单了解JavaScript作用域
Jul 31 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滚动日志的代码实现
2015/06/10 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
简单的自定义php模板引擎
2016/08/26 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
JSONP和批量操作功能的实现方法
2016/08/21 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
[09:43]DOTA2每周TOP10 精彩击杀集锦vol.5
2014/06/25 DOTA
用Python实现一个简单的线程池
2015/04/07 Python
python如何查看系统网络流量的信息
2016/09/12 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
解决运行django程序出错问题 'str'object has no attribute'_meta'
2020/07/15 Python
护士思想汇报
2014/01/12 职场文书
幼儿园中班开学寄语
2014/04/03 职场文书
2014年入党积极分子党课学习心得体会模板
2014/04/03 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
2016年社区文体活动总结
2016/04/06 职场文书
Linux中如何安装并部署Redis
2022/04/18 Servers