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 混淆加密收藏
Jan 16 Javascript
JS的数组迭代方法
Feb 05 Javascript
JS实现判断碰撞的方法
Feb 11 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
修改Jquery Dialog 位置的实现方法
Aug 26 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
vue组件父与子通信详解(一)
Nov 07 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
vue.js在标签属性中插入变量参数的方法
Mar 06 Javascript
vue组件jsx语法的具体使用
May 21 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 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常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
js 获取服务器控件值的代码
2010/03/05 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
jsonp跨域请求详解
2017/07/13 Javascript
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
小试SVG之新手小白入门教程
2019/01/08 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
python中验证码连通域分割的方法详解
2018/06/04 Python
Python线程之定位与销毁的实现
2019/02/17 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
django的模型类管理器——数据库操作的封装详解
2020/04/01 Python
Python3.7安装PyQt5 运行配置Pycharm的详细教程
2020/10/15 Python
中国最大的名表商城:万表网
2016/08/29 全球购物
员工辞退通知书
2015/04/17 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
Java数组详细介绍及相关工具类
2022/04/14 Java/Android