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 相关文章推荐
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 Javascript
jquery判断输入密码两次是否相等
Apr 22 Javascript
浅析JS运动
Dec 28 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 Javascript
微信小程序组件 marquee实例详解
Jun 23 Javascript
jquery拖动改变div大小
Jul 04 jQuery
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
Aug 24 Javascript
JS实现网站楼层导航效果代码实例
Jun 16 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 Javascript
用webAPI实现图片放大镜效果
Nov 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
简单的PHP多图上传小程序代码
2011/07/17 PHP
php中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
PHP实现的封装验证码类详解
2013/06/18 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
Prototype 学习 工具函数学习($方法)
2009/07/12 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
jquery中EasyUI实现异步树
2015/03/01 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
jquery过滤特殊字符',防sql注入的实现方法
2016/08/17 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
python3读取excel文件只提取某些行某些列的值方法
2018/07/10 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
Python数据分析模块pandas用法详解
2019/09/04 Python
python 初始化一个定长的数组实例
2019/12/02 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
django model通过字典更新数据实例
2020/04/01 Python
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
高中生职业生涯规划书
2014/02/24 职场文书
小学社会实践活动总结
2014/07/03 职场文书
运动员获奖感言
2014/08/15 职场文书
组工干部对照检查材料
2014/08/25 职场文书
党支部考察意见范文
2015/06/02 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang
解决Pytorch中关于model.eval的问题
2021/05/22 Python