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 相关文章推荐
ext for eclipse插件安装方法
Apr 27 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
浅析javascript中的DOM
Mar 01 Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
JS函数节流和函数防抖问题分析
Dec 18 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
傻瓜式vuex语法糖kiss-vuex整理
Dec 21 Javascript
Vue开发环境跨域访问问题
Jan 22 Javascript
快速解决element的autofocus失效问题
Sep 08 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模板引擎比较分析
2008/05/26 PHP
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
php绘制圆形的方法
2015/01/24 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
laravel多条件查询方法(and,or嵌套查询)
2019/10/09 PHP
JavaScript 编写匿名函数的几种方法
2010/02/21 Javascript
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
JS小游戏之宇宙战机源码详解
2014/09/25 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
盘点javascript 正则表达式中 中括号的【坑】
2016/03/16 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
Python and、or以及and-or语法总结
2015/04/14 Python
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
Python网络爬虫实例讲解
2016/04/28 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
Python图像处理之图像的缩放、旋转与翻转实现方法示例
2019/01/04 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
Django 自定义分页器的实现代码
2019/11/24 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
医学院毕业生自荐信
2013/11/08 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
javascript对象3个属性特征
2021/11/17 Javascript
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS