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 相关文章推荐
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
JavaScript对象参数的引用传递
Jan 14 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
基于vue实现分页/翻页组件paginator示例
Mar 09 Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 Javascript
详解Angular-Cli中引用第三方库
May 21 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 Javascript
vue实现给div绑定keyup的enter事件
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 memcache扩展的三种安装方法
2009/04/26 PHP
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
php微信公众号js-sdk开发应用
2016/11/28 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
Js中sort()方法的用法
2006/11/04 Javascript
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python实现爬取千万淘宝商品的方法
2015/06/30 Python
使用Python读取大文件的方法
2018/02/11 Python
python调用staf自动化框架的方法
2018/12/26 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
python如何更新包
2020/06/11 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
印度网上购物首选目的地:Flipkart
2016/08/01 全球购物
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
自主招生自荐信
2013/12/08 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
毕业生就业推荐表自我评价
2015/03/02 职场文书
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang