layui-Dtree树结构

文章目录

layui-Dtree树结构
- 看效果
一、Dtree的下载
二、数据格式
- 2.1 标准格式
- 2.2 list类型
- 2.3 layui+list集合数据格式
三、代码实现
四、Dtree的事件监听
- 4.1 图标监听
- 4.2 节点监听（重点）
- 4.3 节点双击事件
五、带有复选框的Dtree

layui-Dtree树结构

看效果

一、Dtree的下载

https://www.wisdomelon.com/DTreeHelper/

二、数据格式

2.1 标准格式


dtree.render({elem: "#dataTree1",url: "../../../json/case/dataTree.json"
});

json的数据格式

{"status":{"code":200,"message":"操作成功"},
"data": [{"id":"001","title": "湖南省","parentId": "0","children":[]},{"id":"002","title": "湖北省","parentId": "0","children":[]},{"id":"003","title": "广东省","parentId": "0","children":[]},{"id":"004","title": "浙江省","parentId": "0","children":[]},{"id":"005","title": "福建省","parentId": "0","children":[]}
]
}

2.2 list类型

dtree.render({elem: "#dataTree2",url: "../../../json/case/dataTree2.json",dataFormat: "list",  //配置data的风格为listcheckbar:true //开启复选框
});

json格式


{"status":{"code":200,"message":"操作成功"},
"data": [{"id":"001","title": "湖南省","checkArr": "0","parentId": "0"},{"id":"002","title": "湖北省","checkArr": "0","parentId": "0"},{"id":"003","title": "广东省","checkArr": "0","parentId": "0"},{"id":"004","title": "浙江省","checkArr": "0","parentId": "0"},{"id":"005","title": "福建省","checkArr": "0","parentId": "0"},{"id":"001001","title": "长沙市","checkArr": "0","parentId": "001"},{"id":"001002","title": "株洲市","checkArr": "0","parentId": "001"},{"id":"001003","title": "湘潭市","checkArr": "0","parentId": "001"},{"id":"001004","title": "衡阳市","checkArr": "0","parentId": "001"},{"id":"001005","title": "郴州市","checkArr": "0","iconClass": "dtree-icon-caidan_xunzhang","parentId": "001"}
]
}

2.3 layui+list集合数据格式

dtree.render({elem: "#dataTree3",url: "../../../json/case/dataTree2.json",dataStyle: "layuiStyle",  //使用layui风格的数据格式dataFormat: "list",  //配置data的风格为listresponse:{message:"msg",statusCode:0},  //修改response中返回数据的定义checkbar:true //开启复选框
});

json格式

{"code":0,
"msg":"操作成功",
"data": [{"id":"001","title": "湖南省","checkArr": "0","parentId": "0"},{"id":"002","title": "湖北省","checkArr": "0","parentId": "0"},{"id":"003","title": "广东省","checkArr": "0","parentId": "0"},{"id":"004","title": "浙江省","checkArr": "0","parentId": "0"},{"id":"005","title": "福建省","checkArr": "0","parentId": "0"},{"id":"001001","title": "长沙市","checkArr": "0","parentId": "001"},{"id":"001002","title": "株洲市","checkArr": "0","parentId": "001"},{"id":"001003","title": "湘潭市","checkArr": "0","parentId": "001"},{"id":"001004","title": "衡阳市","checkArr": "0","parentId": "001"},{"id":"001005","title": "郴州市","checkArr": "0","iconClass": "dtree-icon-caidan_xunzhang","parentId": "001"}
]
}

三、代码实现

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="resourse/layui/css/layui.css" media="all">
<link rel="stylesheet" href="resourse/layui_ext/dtree/dtree.css"><link rel="stylesheet" href="resourse/layui_ext/dtree/font/dtreefont.css">
</head>
<body><ul id="dataTree3" class="dtree" data-id="0" ></ul>
<script src="resourse/layui/layui.js"></script><script>layui.extend({dtree:'resourse/layui_ext/dist/dtree'}).use([ 'dtree', 'laydate','jquery','layer','form' ], function() {var $=layui.jquery;var table = layui.table;var form=layui.form;var dtree=layui.dtree;var laydate = layui.laydate;//初始化树-基本数据格式<!--var DemoTree = dtree.render({elem: "#demoTree",url: "resourse/layui_ext/json/case/asyncTree1.json" ,// 使用url加载（可与data加载同时存在）});-->//list类型<!--dtree.render({elem: "#dataTree2",url: "resourse/layui_ext/json/case/asyncTree2.json",dataFormat: "list",  //配置data的风格为listcheckbar:true //开启复选框});-->//layui+list集合数据格式dtree.render({elem: "#dataTree3",url: "resourse/layui_ext/json/case/asyncTree3.json",dataStyle: "layuiStyle",  //使用layui风格的数据格式dataFormat: "list",  //配置data的风格为listresponse:{message:"msg",statusCode:0},  //修改response中返回数据的定义checkbar:true //开启复选框});});</script>
</body>
</html>

四、Dtree的事件监听

4.1 图标监听

 dtree.on("changeTree('dataTree2')" ,function(obj){console.log(obj.param); // 点击当前节点传递的参数console.log(obj.dom); // 当前节点的jquery对象console.log(obj.show); // 节点展开为true，关闭为false});

4.2 节点监听（重点）

  dtree.on("node('dataTree2')" ,function(obj){console.log(obj.param); // 点击当前节点传递的参数console.log(obj.dom); // 当前节点的jquery对象console.log(obj.childParams); // 当前节点的所有子节点参数console.log(obj.parentParam); // 当前节点的父节点参数});

4.3 节点双击事件

 dtree.on("nodedblclick('dataTree2')" ,function(obj){console.log(obj.param); // 点击当前节点传递的参数console.log(obj.dom); // 当前节点的jquery对象console.log(obj.childParams); // 当前节点的所有子节点参数console.log(obj.parentParam); // 当前节点的父节点参数});

五、带有复选框的Dtree

     $("#requestValue").click(function () {var params = dtree.getCheckbarNodesParam("dataTree2");  //获取复选框的值layer.alert(JSON.stringify(params),{title:'提交信息'});});

好了，今天的分享就到这里了哦

layui-Dtree树结构相关推荐

layui.dtree下拉树踩坑
提示:针对dtree版本v2.5.7 文章目录前言-下拉树实现描述一.单击选中bug 二.使用reload()重新加载数据(data方式) 三.实现reload,严格控制reload在init后, ...
layui dtree ajax,layui中使用dtree插件数据无法正常显示
layui中使用dtree插件数据无法正常显示 layui中使用dtree插件数据无法正常显示检查自己返回的josn数据格式和dtree需要的数据是否相同示例格式: { "code&qu ...
layui dtree 设置初始值
使用 data-value 标签 <ul class="dtree"data-id="0" id="selectParent" th: ...
dtree渲染下拉树，layui集成dtree，dtree渲染下拉框
文档位置 dtree官方文档地址链接渲染下拉树js dTreeUtil.js /**** @param id 要渲染的dom* @param data 数据* @param none 无数据时显示 ...
Layui第三方Dtree的使用——简单记录
一. 最近使用layui做了个项目,由于合同额小,也不需要太多繁琐复杂的处理,于是前端选用的layui.但是用到layui的树时,layui对树支持的不太好,后来找到了Dtree这个第三方插件. 二. ...
layui文件树Dtree的使用
1.下载Dtree文件下载地址:https://fly.layui.com/extend/dtree/ 将文件解压后放到项目静态文件的位置 2.使用在页面分别引入dtree.css和dtreefo ...
layui 数据表格代码
一套增删改查,打完收工. layui版本:2.4.5 + 默认请求,分页. /rest_address?page=1&limit=1 json数据格式要求. 参数说明文档 https://ww ...
dtree树形结构异步传输
首先引入css文件 https://gitee.com/sunzhenzhen/ziyuanmulu/blob/master/src/main/webapp/layui/css/layui.css h ...
mysql关系型数据库生成树形结构，Layui页面渲染树型结构图（详细）
文章目录一.学使用DTree 上代码(详细说明注释见) 引入结构说明 dataFormat:"list" 二.使用MySQL查询结果说明三.效果展示总结 # 前言项目使 ...

layui-Dtree树结构

文章目录

layui-Dtree树结构

看效果

一、Dtree的下载

二、数据格式

2.1 标准格式

2.2 list类型

2.3 layui+list集合数据格式

三、代码实现

四、Dtree的事件监听

4.1 图标监听

4.2 节点监听（重点）

4.3 节点双击事件

五、带有复选框的Dtree

layui-Dtree树结构相关推荐

最新文章

热门文章

layui-Dtree树结构

文章目录

layui-Dtree树结构

看效果

一、Dtree的下载

二、数据格式

2.1 标准格式

2.2 list类型

2.3 layui+list集合数据格式

三 、代码实现

四、Dtree的事件监听

4.1 图标监听

4.2 节点监听（重点）

4.3 节点双击事件

五、带有复选框的Dtree

layui-Dtree树结构相关推荐

最新文章

热门文章

三、代码实现