欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-10 20:34:04
ztree 是一个依靠 jquery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 ztree 最大优点。 介绍 ztree 是一个依靠 jque...

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加载完成后显示勾选节点的实现代码,希望对大家有所帮助