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 相关文章推荐
这些年、我收集的JQuery代码小结
Aug 01 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
JavaScript运行时库属性一览表
Mar 14 Javascript
JS特效实现图片自动播放并可控的效果
Jul 31 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
Jan 16 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
Jan 31 Javascript
vue2配置scss的方法步骤
Jun 06 Javascript
Vue使用NProgress的操作过程解析
Oct 10 Javascript
vue-cli3中配置alias和打包加hash值操作
Sep 04 Javascript
Vue2.0搭建脚手架
Mar 13 Vue.js
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/02/03 PHP
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
Yii框架where查询用法实例分析
2019/10/22 PHP
List the Codec Files on a Computer
2007/06/18 Javascript
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
浅析如何利用JavaScript进行语音识别
2016/10/27 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
js实现无缝轮播图效果
2020/03/09 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
推荐11个实用Python库
2015/01/23 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
Django调用百度AI接口实现人脸注册登录代码实例
2020/04/23 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
保安拾金不昧表扬信
2014/01/15 职场文书
黄河象教学反思
2014/02/10 职场文书
2014组织生活会方案
2014/05/19 职场文书
论文诚信承诺书
2014/05/23 职场文书
质量整改通知单
2015/04/21 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python