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 相关文章推荐
文本框回车提交与禁止提交示例
Sep 27 Javascript
JavaScript实现给按钮加上双重动作的方法
Aug 14 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 Javascript
Vue组件选项props实例详解
Aug 18 Javascript
微信小程序实现图片放大预览功能
Oct 22 Javascript
fullpage.js最后一屏滚动方式
Feb 06 Javascript
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
js的对象与函数详解
Jan 21 Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 Javascript
javascript实现评分功能
Jun 24 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
Nov 09 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
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
php实现mysql数据库操作类分享
2014/02/14 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
php中使用gd库实现下载网页中所有图片
2015/05/12 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
2014/10/20 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
javascript实现图片上传前台页面
2015/08/18 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
python基于socket实现网络广播的方法
2015/04/29 Python
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
Python os模块学习笔记
2015/06/21 Python
Python中几个比较常见的名词解释
2015/07/04 Python
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
Python提取网页中超链接的方法
2016/09/18 Python
python实现多线程网页下载器
2018/04/15 Python
简单谈谈python基本数据类型
2018/09/26 Python
Python configparser模块操作代码实例
2020/06/08 Python
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
违反校纪校规检讨书
2014/02/15 职场文书
小学安全教育材料
2014/02/17 职场文书
大学生交通专业求职信
2014/09/01 职场文书
教师政风行风评议心得体会
2014/10/21 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技