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解决数字不能换行问题
Aug 10 Javascript
JQuery插件Style定制化方法的分析与比较
May 03 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 Javascript
jQuery插件jRumble实现网页元素抖动
Jun 05 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
May 29 Javascript
教你JS中的运算符乘方、开方及变量格式转换
Aug 09 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
js面向对象编程总结
Feb 16 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
对layui数据表格动态cols(字段)动态变化详解
Oct 25 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 11 Javascript
微信小程序实现页面左右滑动
Nov 16 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
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
2015/07/27 Javascript
js面向对象的写法
2016/02/19 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
python基础教程之循环介绍
2014/08/29 Python
python实现三次样条插值
2018/12/17 Python
Python中print和return的作用及区别解析
2019/05/05 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
python/golang 删除链表中的元素
2020/09/14 Python
美体小铺法国官方网站:The Body Shop法国
2020/06/04 全球购物
C#和SQL Server的面试题
2016/08/12 面试题
2015年党小组工作总结
2015/05/26 职场文书
大学生社会服务心得体会
2016/01/22 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis
基于Python实现对比Exce的工具
2022/04/07 Python