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 相关文章推荐
js定时器(执行一次、重复执行)
Mar 07 Javascript
javascript获取flash版本号的方法
Nov 20 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
整理Javascript数组学习笔记
Nov 29 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
全面理解JavaScript中的继承(必看)
Jun 16 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
JS 组件系列之BootstrapTable的treegrid功能
Jun 16 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
Vue3为什么这么快
Sep 23 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
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
图书管理程序(二)
2006/10/09 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
javascript 流畅动画实现原理
2009/09/08 Javascript
jQuery中读取json文件示例代码
2013/05/10 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
JQuery中extend使用介绍
2014/03/13 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
React.js入门实例教程之创建hello world 的5种方式
2016/05/11 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
在Python的Django框架中加载模版的方法
2015/07/16 Python
Numpy掩码式数组详解
2018/04/17 Python
python如何爬取个性签名
2018/06/19 Python
python批量修改图片大小的方法
2018/07/24 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
python实现手机销售管理系统
2019/03/19 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
python实现手势识别的示例(入门)
2020/04/15 Python
python实现图像外边界跟踪操作
2020/07/13 Python
Python 解析xml文件的示例
2020/09/29 Python
Python实现随机爬山算法
2021/01/29 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
开业主持词
2014/03/21 职场文书
廉政教育的心得体会
2014/09/01 职场文书
推荐信范文大全
2015/03/27 职场文书
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL