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 相关文章推荐
window.onload追加函数使用示例
Mar 03 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
JavaScript生成福利彩票双色球号码
May 15 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
详解vue 中 scoped 样式作用域的规则
Sep 14 Javascript
JavaScript快速调试的两个技巧
Nov 04 Javascript
原生js实现九宫格拖拽换位
Jan 26 Javascript
javascript实现计算器功能详解流程
Nov 01 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随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
使用prototype.js进行异步操作
2007/02/07 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
推荐一个自己用的封装好的javascript插件
2015/01/29 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
Electron 如何调用本地模块的方法
2019/02/01 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
python封装对象实现时间效果
2020/04/23 Python
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
Python 多线程实例详解
2017/03/25 Python
Python爬虫抓取代理IP并检验可用性的实例
2018/05/07 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
美国翻新电子产品商店:The Store
2019/10/08 全球购物
大学生毕业自我评价范文分享
2013/11/11 职场文书
药剂专业求职信
2014/06/20 职场文书
2015年班级元旦晚会活动总结
2014/11/28 职场文书
党风廉正建设责任书
2015/01/29 职场文书
医院病假条怎么写
2015/08/17 职场文书
2016年村党支部公开承诺书
2016/03/24 职场文书
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python
JavaScript 对象创建的3种方法
2021/11/17 Javascript
Python 全局空间和局部空间
2022/04/06 Python
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers