Balloon.2.11 —— UI组件之树（基于zTree封装）

最新推荐文章于 2022-09-15 09:40:29 发布
原创 最新推荐文章于 2022-09-15 09:40:29 发布 · 2.1k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#jquery插件
本文介绍了一个基于zTree的组件配置方法，包括初始化组件、定义模板及设置配置属性等内容。该组件支持静态和动态数据源，并可通过特定配置实现树形结构的展示。

方法入口

var $tree= $().$b("tree",config)  //返回组件的jQuery对象，即下面模板的jQuery对象

组件模板

<ul class="ztree"></ul>

配置属性(通用属性参看2.3节)

属性名类型默认值说明
localOptionArray[]复选框选项，静态数据源，固定不变
dataOptionArray[]复选框选项，动态数据源
treeSettingObject{view: {dblClickExpand: false},
data: {simpleData: {enable:true,idKey: "id",pIdKey: "pId",rootPId: ""}}}		树的配置，可参见zTree官网
isVerifyBooleanfalse组件是否需要验证
tplUrlStringtemplate/tree.html模板路径
方法(通用方法参看2.3节)
暂无
说明 
入参  
返回  
Vue使用zTree插件封装树组件操作示例
12-12
本文实例讲述了Vue使用zTree插件封装树组件操作。分享给大家供大家参考，具体如下： 1.通过npm安装jquery npm install jquery --save-dev 2.在build/webpack.base.conf文件当中引入jquery module.exports = { ... resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'jque
zTree封装辅助JS（弹出层，弹出层筛选，上下键选择）
01-22
主要是传统下拉框的优化选择，分单选和多选两种类型，可以是弹出层形式，也可以是平铺的形式展现。 集成搜索，多选，区段识别功能，内置设置和获取选中的API。 搜索主要是用于单选时内容较多的情况。 多选支持全选和反选。 区段识别是输入多个值，选中多个项（以ztree中的id作为识别条件，全匹配识别） 以ztree为核心，依赖jquery，easyUI（弹出层选择所用）
layui 树形 Ztree
左--右
04-06 1697
layui.use(['tree', 'util'], function() { var tree = layui.tree , layer = layui.layer , util = layui.util, $ = layui.$, //模拟数据 data = [ { title:"系统设置", .
在前端layui项目中使用ztree
爱码士的博客
05-19 1273
说明 ztree是一款很好的树形控件，无需对数据进行严格的格式控制，比如需要建立层级关系，只要你数据存在parent_id即可 官网：http://www.treejs.cn/v3/main.php#_zTreeInfo 基础使用，例子都在官网看。这里讲述怎么集成。 项目集成 项目是layui，其本身有jquery模块，为了配合插件，需要重新引入。 <link th:href="@{/lib/ztree/css/metroStyle/metroStyle.css}" rel="stylesheet"&
基于ztree的封装
qq_28865227的博客
06-22 481
1.使用方法 <script> var methods = {onclick:fn2}; initSelTree("dwtree", "dw", methods, true); function fn2(e, treeId, treeNode){ console.log($("#DW").val()); console.log( ...
ztree在vue中的使用 使用封装好的vue-giant-tree
limmt2020的博客
06-07 3001
ztree在vue中的使用 使用封装好的vue-giant-tree
vue封装ztree
南有乔木的博客
01-14 2164
Ztree官网下载全量的插件包，然后解压。 封装成vueZtree，代码如下： &lt;!—- ztree封装的vue树，依赖ztree3.5版本的css和js，setting配置项等配置可查看ztree官网的api文档。要正常使用，则项目需要引入jQuery--&gt; &lt;style&gt; @import "./ztree/metroStyle/metroStyle.css"; ...
数据结构与算法：15 树
老马的程序人生
10-30 999
15 树 知识结构： 1. 树的基本概念与术语 1.1 树的定义 树是N(N≥0)N(N \geq 0)N(N≥0)个结点组成的有穷集合 ，该集合具有如下特征： （1）除N=0N=0N=0的树外，有且仅有一个特定的称为根的结点。 （2）其余结点分为m(m≥0)m (m\geq 0)m(m≥0)个互不相交的有穷集合T1,T2,⋯ ,TmT_1,T_2,\cdots,T_mT1​,T2​,⋯,Tm​，其中每一个集合都是一棵树，称为该根的子树。 例： 树的特点： （1）有一个总根。 （2）没有分支相交。 （
ztree树封装 json实例_009 Java 继承、封装及多态
weixin_39537680的博客
11-24 175
1.super关键字 super是直接父类对象的引用。可以通过super来访问父类中被子类覆盖的方法或属性。 使用super调用普通方法，语句没有位置限制，可以在子类中随便调用。 若是构造方法的第一行代码没有显式的调用super(...)或者this(...);那么Java默认都会调用super(),含义是调用父类的无参数构造方法。这里的super()可以省略。super关...
layui结合zTree写树状图
人生几度秋凉
03-06 1万+
转载请注明出处：https://mp.csdn.net/postedit/88244560 树状图功能：最开始加载父级，在点击某个父节点时异步加载对应的子节点 在要求页面兼容ie8的情况下我选择的layui作为我的后台管理页面框架，但是layui对树状图的支持并不算太好，这里引入zTree作为补充。下面用到的一些js和css请到对应的官网下载首先看前端jsp的页面： org.jsp:页面...
layui中引用zTree -- jQuery 树插件 使用
ll_883963的博客
07-29 2121
引入插件 layui.use(['layer', 'tree'], function () { var $ = layui.jquery; var layer = layui.layer; ｝ var setting = {//树设置 treeId : "", //zTree 的唯一标识，初始化后，等于 用户定义的 zTree 容器的 id 属性值。 identValueSetting: {//区划树设置 edit: {
vue2.x + zTree，简单的二次封装
mf_717714的博客
07-12 1710
针对zTree在Vue中的简单的二次封装，实现简单的基本功能。能够进行快速开发。
vue2.x + zTree，简单的二次封装(二) -- 添加模糊搜索功能
mf_717714的博客
09-15 1457
根据官方提供的模糊搜索功能fuzzySearch函数进行稍微修改，添加到自己的封装Tree中。
html6+树状下拉列表,layui+ztree 树状下拉框
weixin_36230541的博客
06-03 859
一、效果图【关闭】【展开】二、代码【HTML】注:布局一定要用DIV不是select否则效果····部门@**@【js】① 以下为固定方法function initSelectTree(id, isMultiple, chkboxType, zNodes) {var setting = {data: {simpleData: {enable: true}},check: {enable: fals...
封装zTree实现大数据树
HaleyTiger的博客
10-22 1255
对zTree树进行了二次封装： 【功能说明】： 1.支持异步获取下一层级节点数据。 2.支持指定数量节点分页功能。 3.支持增删改节点。 4.支持模糊搜索已加载（缓存）节点数据。 【缺点（暂未做）】： 1.搜索定位缺点，浏览器展开节点过多时，搜索效率低下（浏览器假死）。 2.不支持提供数据库全量模糊搜索。 3.设定为分页树时，建议不要配置节点操作（增删改）功能。 4.当数据量过大时，限制于浏览器，...
layui ztree 实现下拉树
热门推荐
Glory丶笨小孩
01-26 5万+
完整代码下载 JS 代码 //id div 的id，isMultiple 是否多选，chkboxType 多选框类型{"Y": "ps", "N": "s"} 详细请看ztree官网 function initSelectTree(id, isMultiple, chkboxType) { var setting = { view: { d
使用Layui Select框集成Ztree
Gxttsmn的博客
07-29 1888
前几天项目中有个需求，需要在select 框中加载一个两层的树（树本身是无线级，但需求是只要获取根节点及根节点的下级节点）。 具体样式如图： 这里因为采用异步加载树，所以使用Ztree 进行开发，完成后效果如上图。 整个开发过程还是有点繁琐的，下边将所作的做一个整理。 引入ztree 插件省略。。。 界面html 代码，构建select 元素 ​<div class="...
layui +ztree实现下拉分类树完整实例
fengcai0123的专栏
03-26 1864
html： <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <!--<head th:include="layout :: htmlhead" th:with="title='...
layui+ztree 树状下拉框
qq_34266804的博客
10-27 2294
https://www.cnblogs.com/xqz0618/p/layui_ztree.html 一、效果图 【关闭】 　　 【展开】　　　　 　　　　　 二、代码 【HTML】注:布局一定要用DIV不是select否则效果···· <div class="layui-form-item"> <label class...
zTree加Layui 实现增加和删除，有子节点不允许删除
weixin_45799001的博客
12-14 738
引入zTree文件 <link rel="stylesheet" th:href="@{/zTree_v3/css/zTreeStyle/zTreeStyle.css}" /> <script th:src="@{/zTree_v3/js/jquery.ztree.all.js}" type="text/javascript"></script> div 部分 <div class="mainbox"> <!-- 隐藏域--> <
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值