位置: 编程技术 - 正文

jQuery树形控件zTree使用小结(html5 树形控件)

编辑:rootadmin

推荐整理分享jQuery树形控件zTree使用小结(html5 树形控件),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery 树形菜单插件,jquery树形结构,html树形控件,js树形控件,js树形控件,js树形控件,js树形控件,jquery树形结构,内容如对您有帮助,希望把文章链接给更多的朋友!

0 zTree简介

树形控件的使用是应用开发过程中必不可少的。zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

0.0 zTree的特点 &#;最新版的zTree将核心代码按照功能进行了分割,不需要的代码可以不用加载,如普通使用只需要加载核心的jquery.ztree.core-3.5.js,需要使用勾选功能加载jquery.ztree.excheck-3.5.min.js,需要使用编辑功能加载jquery.ztree.exedit-3.5.min.js &#;采用了延迟加载技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀 &#;兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器 &#;支持 JSON 数据 &#;支持静态 和 Ajax 异步加载节点数据 &#;支持任意更换皮肤 / 自定义图标(依靠css) &#;支持极其灵活的 checkbox 或 radio 选择功能 &#;提供多种事件响应回调 &#;灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽 &#;在一个页面内可同时生成多个 Tree 实例 &#;简单的参数配置实现,灵活多变的功能

0.1 zTree文件介绍 从zTree官网下载的zTree包括以下组成部分

&#;metroStyle文件夹:zTree的metro风格样式相关文件(图片及css样式表)。&#;zTreeStyle文件夹:zTree的标准风格样式文件夹(图片及css样式表)&#;js文件:zTree.all.js是完整的js库,可单纯加载此文件实现所有zTree功能,ztree.core、ztree.excheck、ztree.exedit、ztree.exhide是对ztree按照功能进行的分割,分别对应基本功能、复选功能、编辑功能、显隐功能。

1 zTree的基本使用

1.0 zTree的创建在页面中添加对zTree的js及css引用,由于zTree基于JQuery,JQuery的引用是必须的。

运行结果如下

1.1 zTree的配置zTree的配置采用Json格式,按照配置的类型分为view(可视界面相关配置)、data(数据相关配置)、check(复选框相关配置)、callback(各类事件的回调函数配置)、async(zTree异步加载配置),一下是我们经常会使用到的一些配置及说明,其他详细配置可以参考zTree官方API文档的详细介绍。

需要注意的是,zTree的事件回调部分,基本上每一个事件都对应一个beforeXXX事件,比如onClick事件对应有一个beforeOnClick事件,主要用于控制相关事件是否允许执行,如果before事件返回false,则取消执行对应相关事件。

1.2 zTree的数据格式 zTree的每一个节点都是一个treeNode对象,treeNode对象经常用到的属性和方法如下:

zTree的数据源一般有标准数据格式、简单数据格式两种,标准数据格式通过指定节点的chidren属性构建层级关系,而简单数据格式根据根据id,pid属性构建层级关系,我们在应用开发中使用关系型数据库,一般采用的都是简单数据格式。 标准数据格式

简单数据格式

注意zTree的默认配置是不启用简单数据格式,使用简单数据格式一定要在setting中进行简单数据格式的相关配置。

jQuery树形控件zTree使用小结(html5 树形控件)

1.3 zTree的常用方法zTree的主要操作方法介绍如下 获取zTree对象:var treeObj = $.fn.zTree.getZTreeObj("tree");增加节点:addNodes(parentNode,index,newNodes,isSlient)

parentNode:指定的父节点,如果增加根节点,请设置 parentNode 为 null 即可

index:新节点插入的位置(从 0 开始),index = -1 时,插入到最后,此参数可忽略

newNodes:需要增加的节点数据 JSON 对象集合,数据只需要满足 zTree 的节点数据必需的属性即可

isSilent:true 时,添加节点后不展开父节点,其他值或缺省状态都自动展开

勾选或取消勾选全部节点:checkAllNodes(checked); checked参数为true时全部勾选,为false时全部取消勾选。 勾选或取消勾选单个节点:checkNode(node, checked, checkedTypeFlag,callbackFlag); node:要进行操作的节点 checked:为true勾选,为false取消勾选 checkeTypeFlag:为true表示对当前结点的子节点及父节点进行勾选状态的联动,为false不联动 callbackFlag:为true时表示执行beforeOnCheck和onCheck事件的回调函数,为false不执行 编辑节点 edit(node); 使节点处于编辑状态,必须引用jquery.ztree.exedit 扩展。 展开或折叠全部节点:expandAll(expand); expand为true是展开所有节点,为false是折叠所有节点。 根据节点属性查找结点:getNodesByParam(key,value, parentNode); key:属性名 value:属性值 parentNode:是否在指定节点下查找,为null表示整个树查找。 获取被勾选或未被勾选的节点集合:getCheckedNodes(checked); checked为true表示获取所有被勾选的节点集合,为false表示所有未被勾选的节点集合 获取输入框勾选状态被改变的节点集合:getChangeCheckedNodes()

2 zTree的常用操作2.0 ajax请求数据并创建zTree

后台代码如下,可以根据需要返回你想要的任何数据,绑定到zTree上,然后通过treeNode.属性名取到对应的值,实现一些界面逻辑操作。

2.1 节点单击操作 节点单击事件会捕获事件对象e,zTree的唯一标识treeId,当前选中的节点对象treeNode三个参数。根据实际需求可获取treeNode中包含的任何属性数据,进行相关操作

2.2 节点复选框事件

一般情况下我们会直接使用treeObj.getCheckedNodes(true);获取所有选中的节点,然后遍历所有选中的节点进行相关操作,当面对大数据量时,这种操作方法便不可取,可通过getChangeCheckedNodes()方法获取勾选状态被改变的节点集合,值针对状态改变的节点做相应处理。

2.3 实现zTree的右键增删改操作首先定义右键弹出面板

实现zTree右键单击事件回调函数

新增节点

编辑节点

节点编辑状态离开时触发事件

删除节点数据

2.4 一些总结 我们通常使用到树形控件做授权或关联类似的操作,一般会先全部取消勾选,然后根据选中的数据关联对树控件的复选框进行选中操作,在大数据量时,大约几万条数据,全部取消勾选+根据关联数据勾选相关节点这个操作通过js执行会很慢,这种情况建议在后台通过关联关系重新组织zTree需要的数据源,对每条数据(对应树节点)设置checked属性,然后再前台页面重新加载树,这种操作速度要快得多。

更多关于ztree控件的内容,请参考专题《jQuery插件ztree使用汇总》

标签: html5 树形控件

本文链接地址:https://www.jiuchutong.com/biancheng/384118.html 转载请保留说明!

上一篇:jquery 判断selection range 是否在容器中的简单实例(jQuery 判断复选框是否选中)

下一篇:实例详解jQuery的无new构建(jquery教程与例子)

  • 小规模纳税人应纳增值税额的计算
  • 每年税务师考试几次
  • 缓交的社保费,包括个人部分
  • 社保本期工资总额是怎么填的
  • 清包工取费标准
  • 红字信息表撤销失败B80095
  • 全国通用机打销售票违法吗
  • 定额备用金的账务处理
  • 小规模纳税人的增值税账务处理
  • 购进农产品取得专用发票
  • 哪些邮政业务可以寄快递
  • 摊余成本加还是减
  • 地方教育费附加是什么意思
  • 兼营免税业务,如何才能享受免税的优惠政策?
  • 电子发票如何报销做账
  • 如何界定企业所得税的不征税收入与应税收入
  • 增值税减免了,附加税申报表还用填吗
  • 开票软件安装6位地区编号填什么
  • 成品油电子普通发票开错了
  • 应付质保金到期怎么办
  • 厂房装修费用计入制造费用吗
  • 无租使用房产协议
  • 房地产企业土地出让金抵减销项税额
  • 财政拨款收入如何记账
  • 华为手机屏幕下的三个功能键设置方法
  • 如何维护电脑系统安全?
  • 调整应收账款如何做账
  • 怎样开发票的具体步
  • 报考中级会计的工作证明
  • 报销金额和发票金额不一致怎么做账
  • PHP:imagesetstyle()的用法_GD库图像处理函数
  • 打开苹果safari浏览器
  • win7界面旋转
  • 调整以前年度少计提的工资
  • 一天看小说十几个小时的人
  • 差额征税专用发票税额怎么算
  • css width height
  • 增值税发票开了没有抵扣有什么后果?
  • 企业购买期货
  • 当月勾选认证可以在下月抵扣吗
  • 机动车发票哪几联 做帐
  • 无形资产摊销是按原值吗
  • python tqdm是什么
  • 购买的烟酒怎么入账
  • 资产损失税前扣除最新政策2021
  • 税控系统如何清卡
  • 企业开户行信息是什么意思
  • 申报纳税的步骤
  • 收回上年度拨款怎么做账
  • 小规模减免税款会计分录
  • 费用报销单如何粘贴票据
  • 3%减按2%征收增值税是什么意思
  • 公司代缴社保生育津贴大概领多少
  • 旅游业差额开票的票据可以累计一季度吗
  • 投资有哪些方面
  • 新公司初期费用全部入哪里
  • 为什么贷款要收手续费
  • 垫付的开办费怎么做账
  • 施工企业主营业务收入二级科目有哪些
  • 企业筹建期间发生的费用应计入什么账户
  • 公司增资需要什么流程呢 最新
  • sql server常用
  • win8.1 升级
  • dwrg_repair.exe什么意思
  • 电脑总是关不了怎么办
  • mac屏保怎么换
  • win8关机一直转圈
  • Win8开启SmartScreen筛选器保护上网安全
  • linux安装jdk和tomcat
  • 淘宝店铺首页导航栏css
  • jquery和css的区别
  • 置顶在哪里
  • JUnit in android
  • unity总结
  • json对象转化为list
  • jquerymobile实例网站
  • 收到虚开增值税专用发票怎么处理
  • 广东电子税务局电话
  • 下载重庆税务官方app
  • 开票时间超时怎么办
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设