ztree加载完成后显示勾选节点的实现代码

 更新时间:2018年10月22日 11:35:40   作者:Kingram  
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。这篇文章主要介绍了ztree加载完成后显示勾选节点的实现代码 ,需要的朋友可以参考下

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,发现其实还是比较简单的。做个笔记以备不时之需。

②需求:

像下图一样,在加载完成之后就显示需要勾选的项。

③解决方案:

首先页面上肯定是要获取数据库的数据,比如你存储的是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加载完成后显示勾选节点的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • JS验证码实现代码

    JS验证码实现代码

    本文通过实例代码给大家分享基于javascript实现的验证码功能,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-09-09
  • JS实现时间格式化的方式汇总

    JS实现时间格式化的方式汇总

    这篇文章介绍了JS实现时间格式化的方式,有需要的朋友可以参考一下
    2013-10-10
  • js遍历添加栏目类添加css 再点击其它删除css【推荐】

    js遍历添加栏目类添加css 再点击其它删除css【推荐】

    这篇文章主要介绍了js遍历添加栏目类添加css 再点击其它删除css的实例代码,非常不错,具有一定的参考借鉴借鉴价值,需要的朋友可以参考下
    2018-06-06
  • javascript实例--教你实现扑克牌洗牌功能

    javascript实例--教你实现扑克牌洗牌功能

    我们一般都会按照顺序把随机摸过来的牌从小到大的顺序在手上理整齐(记得小时候打牌两副牌手都抓不过来),这篇随笔就是想通过实现这个功能来熟悉下js中排序数组等相关知识。
    2014-05-05
  • javascript获取本机操作系统类型的方法

    javascript获取本机操作系统类型的方法

    关于我们使用电脑的操作系统,我们通过鼠标点击就能获取,如果我们想用脚本怎么实现javascript获取本机操作系统类型的方法呢,下面给大家分享javascript获取本机操作系统类型的方法,需要的朋友可以参考下
    2015-08-08
  • uniapp项目优化方式及建议

    uniapp项目优化方式及建议

    性能优化自古以来就是重中之重,本文关于uniapp项目优化方式最全整理,会根据开发情况进行补充,感兴趣的可以了解一下
    2021-08-08
  • uniapp自定义tabbar的方法(支持中间凸起、角标、动态隐藏tab和全端适用)

    uniapp自定义tabbar的方法(支持中间凸起、角标、动态隐藏tab和全端适用)

    一个项目有多个角色,比如医生和患者,tabBar跳转的路径不一样,但是在pages.json中无法配置多个tabBar,这时候就要自定义tabBar了,下面这篇文章主要给大家介绍了关于uniapp自定义tabbar(支持中间凸起、角标、动态隐藏tab和全端适用)的相关资料,需要的朋友可以参考下
    2023-04-04
  • JavaScript中继承原理与用法实例入门

    JavaScript中继承原理与用法实例入门

    这篇文章主要介绍了JavaScript中继承原理与用法,结合实例形式分析了JavaScript中继承的基本概念、原理、用法及相关操作注意事项,需要的朋友可以参考下
    2020-05-05
  • 判断数组是否包含某个元素的js函数实现方法

    判断数组是否包含某个元素的js函数实现方法

    下面小编就为大家带来一篇判断数组是否包含某个元素的js函数实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • js数组的基本使用总结

    js数组的基本使用总结

    这篇文章主要给大家介绍了关于js数组的基本使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01

最新评论