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无缝向上滚动实现代码
Mar 29 Javascript
String.prototype实现的一些javascript函数介绍
Nov 22 Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
基于JSON数据格式详解
Aug 31 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
Dec 11 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
vue src动态加载请求获取图片的方法
Oct 17 Javascript
VuePress 静态网站生成方法步骤
Feb 14 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 Javascript
Selenium执行JavaScript脚本的方法示例
Dec 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 文章采集正则代码
2009/12/28 PHP
2014过年倒计时示例
2014/01/31 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
YII框架http缓存操作示例
2019/04/29 PHP
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
遍历json 对象的属性并且动态添加属性的实现
2016/12/02 Javascript
详解jQuery选择器
2016/12/21 Javascript
JS验证字符串功能
2017/02/22 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
2019/04/28 Javascript
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
Python正则表达式和re库知识点总结
2019/02/11 Python
python下载微信公众号相关文章
2019/02/26 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
python动态视频下载器的实现方法
2019/09/16 Python
python输入错误后删除的方法
2019/10/12 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
python中的itertools的使用详解
2020/01/13 Python
python实现五子棋游戏(pygame版)
2020/01/19 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
《十六年前的回忆》教学反思
2014/02/14 职场文书
会计专业自荐书
2014/07/08 职场文书
个人作风建设总结
2014/10/23 职场文书
2015元旦文艺汇演主持稿(开场白+结束语)
2014/12/14 职场文书
网络营销计划书
2015/01/17 职场文书
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL
Java中的随机数Random
2022/03/17 Java/Android