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加载完成后显示勾选节点的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • jQuery zTree 异步加载添加子节点重复问题

    zTree 简介 zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree 是开源免费的软件(MIT 许可证).如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去,可以进行捐助. zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载 采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀 兼容 IE.FireFox.Chrome.Opera.

  • zTree异步加载展开第一级节点的实现方法

    在 setting 中的 callback 中加上 onAsyncSuccess:onAsyncSuccess 回调函数 , 然后实现回调函数 var isFirst = true; function onAsyncSuccess(event, treeId) { if (isFirst) { //获得树形图对象 var zTree = $.fn.zTree.getZTreeObj("treeDemo"); //获取根节点个数,getNodes获取的是根节点的集合 var nodeLi

  • 详解Angular结合zTree异步加载节点数据

    1 前提准备 1.1 新建一个angular4项目 参考://www.jb51.net/article/119668.htm 1.2 去zTree官网下载zTree zTree官网:点击前往 三少使用的版本:点击前往 1.3 参考博客 //www.jb51.net/article/133284.htm 2 编程步骤 从打印出zTree对象可以看出,zTree对象利用init方法来实现zTree结构:init方法接收三个参数 参数1:一个ul标签的DOM节点对象 参数2:基本配置对象 参数3:标题

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

    zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 介绍 zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点.专门适合项目开发,尤其是 树状菜单.树状数据的Web显示.权限管理等等. zTree 是开源免费的软件(MIT 许可证).在开源的作用下,zTree 越来越完善,目前已经拥有了不少粉丝,并且今后还会推出更多

  • 页面加载完后自动执行一个方法的js代码

    1.在body中用onload: <body onload="myfunction()"> 2.在脚本中用window.onload: <script type="text/javascript"> function myfun() { alert("this window.onload"); } /*用window.onload调用myfun()*/ window.onload=myfun;//不要括号 </scr

  • Bootstrap Table从服务器加载数据进行显示的实现方法

    Bootstrap Table从服务器加载数据进行显示的实现方法

    Bootstrap-Table是一个Boostrap的表格插件,能够将JSON数据直接显示在表格中.当然,这需要配置一些参数并进行初始化表格才行.其官方网站地址为:http://bootstrap-table.wenzhixin.net.cn/.里面可以下载使用所需的JS和CSS文件,以及参考文档和例子. Bootstrap-Table显示数据到表格的方式有两种,一种是客户端(client)模式,一种是服务器(server)模式. 所谓客户端模式,指的是在服务器中把要显示到表格的数据一次性加载出

  • 判断在css加载完毕后执行后续代码示例

    最近在写项目的framework,写个JQueryMessageBox的类,以使用jquery ui中的dialog()来显示消息框,为了使方法方便调用,便加入了自动判断页面是否加入了ui.js和ui.css,代码如下: //如果没有包含ui.js,则引用 if ($('script[src$=""jquery-ui-1.8.11.custom.min.js""]').length == 0) {{ $(""<script src='/js

  • jQuery实现图片加载完成后改变图片大小的方法

    本文实例讲述了jQuery实现图片加载完成后改变图片大小的方法.分享给大家供大家参考,具体如下: 要改变图片的大小并不难,可以用jQuery操作css改变.但是前提是要判断图片是否加载完成.主要是通过jQuery的load事件和onreadystatechange来判断其状态. 对于IE6,用onreadystatechange可以直接处理,在IE7中,则需要用定时器来判断图片的readystate状态.而对于FF和Chrome刚可以直接用load事件来判断. 以下是在实例中使用的完整代码: <

  • 在页面加载完成后通过jquery给多个span赋值

    由于我想在页面加载完成后,有几个地方显示当前时间,所以我需要给多个span赋值. span代码的写法如下: 复制代码 代码如下: <span name="currentDate"></span> (多个span) jQuery写法: 复制代码 代码如下: <script> $(document).ready(function() { var currentDate = new Date().toLocaleDateString(); $("

  • 在css加载完毕后自动判断页面是否加入css或js文件

    最近在写项目的framework,写个JQueryMessageBox的类,以使用jquery ui中的dialog()来显示消息框,为了使方法方便调用,便加入了自动判断页面是否加入了ui.js和ui.css,代码如下: //如果没有包含ui.js,则引用 if ($('script[src$=""jquery-ui-1.8.11.custom.min.js""]').length == 0) {{ $(""<script src='/js

  • IE8中jQuery.load()加载页面不显示的原因

    一.jQuery.load() jQuery.load(url,[data],[callback])通过Ajax异步请求加载服务器中的数据,并把数据放到指定元素中. •url :请求服务器的地址 •data :可选项,请求时发送的数据 •callback :可选项,请求成功后的回调函数 例: $(".content").load(" https://www.imooc.com/data/fruit_part.html ") 二.IE8中使用jQuery.load()

  • Qt实现边加载数据边显示页面的示例代码

    目录 1.定义显示定时器 1:定义定时器 2:定时器调用 3:定时器加载数据 2.线程加载数据 3.实时呈现加载进度 做过C++开发的人们都知道,无论是MFC框架还是QT框架,实现加载数据的等待效果都是很麻烦的,不像WEB端轻轻松松一句代码就搞定了.而我们这些做C++的,最常用的方法就是开线程了. 刚开始,我也是采用的开线程的方式,但是,想象总是与事实相悖的. 假设页面展示的数据比较多,导致加载页面时间较长,用户体验度很差,点击了触发按钮之后很长时间才会有响应,总让人误会程序死机了,但真正的原因

  • Angular懒加载动态创建显示该模块下声明的组件

    Angular懒加载动态创建显示该模块下声明的组件

    目录 环境: Angular 13.x.x 新建一个angular项目 懒加载工具栏组件 toolbar.module.ts toolbar.component.ts toolbar.component.html app.component.ts 环境: Angular 13.x.x angular中支持可以通过路由来懒加载某些页面模块已达到减少首屏尺寸, 提高首屏加载速度的目的. 但是这种通过路由的方式有时候是无法满足需求的. 比如, 点击一个按钮后显示一行工具栏, 这个工具栏组件我不希望它默

随机推荐