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最新动画教程+iso光盘下载
Jan 22 Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
Mar 21 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
Dec 08 Javascript
点击页面其它地方隐藏该div的两种思路
Nov 18 Javascript
SWFObject基本用法实例分析
Jul 20 Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 Javascript
实现vuex与组件data之间的数据同步更新方式
Nov 12 Javascript
js 动态校验开始结束时间的实现代码
May 25 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
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中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
php旋转图片90度的方法
2013/11/07 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
javascript 流畅动画实现原理
2009/09/08 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
详解NodeJs支付宝移动支付签名及验签
2017/01/06 NodeJs
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
Python中join和split用法实例
2015/04/14 Python
Python算术运算符实例详解
2017/05/31 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
Python 编程速成(推荐)
2019/04/15 Python
python使用KNN算法识别手写数字
2019/04/25 Python
pow在python中的含义及用法
2019/07/11 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
大学校园生活自我鉴定
2014/01/13 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
工商行政管理专业求职书
2014/05/23 职场文书
租车协议书
2015/01/27 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫