-
树形组件dtree
-
下载
https://gitee.com/miniwatermelon/DTreeHelper
-
基本使用
创建json
|
{ "status":{"code":200,"message":"操作成功"}, "data":[{ "id":"001", "title": "湖南省", "last": false, "parentId": "0", "children":[{ "id":"001001", "title": "长沙市", "last":true, "parentId": "001" },{ "id":"001002", "title": "株洲市", "last":true, "parentId": "001" },{ "id":"001003", "title": "湘潭市", "last":true, "parentId": "001" },{ "id":"001004", "title": "衡阳市", "last":true, "parentId": "001" },{ "id":"001005", "title": "郴州市", "last":true, "parentId": "001" }] },{ "id":"002", "title": "湖北省", "last": false, "parentId": "0", "children":[{ "id":"002001", "title": "武汉市", "last":true },{ "id":"002002", "title": "黄冈市", "last":true, "parentId": "002" },{ "id":"002003", "title": "潜江市", "last":true, "parentId": "002" },{ "id":"002004", "title": "荆州市", "last":true, "parentId": "002" },{ "id":"002005", "title": "襄阳市", "last":true, "parentId": "002" }] }] } |
页面
-
数据类型
标准数据格式
和基本使用里面一样
节点与节点之间有层级关系 通过clildren去确定层级
layui风格数据格式（dataStyle）
json
|
{ "code":0, "msg":"操作成功", "data":[{ "id":"001", "title": "湖南省", "last": false, "parentId": "0", "children":[{ "id":"001001", "title": "长沙市", "last":true, "parentId": "001" },{ "id":"001002", "title": "株洲市", "last":true, "parentId": "001" },{ "id":"001003", "title": "湘潭市", "last":true, "parentId": "001" },{ "id":"001004", "title": "衡阳市", "last":true, "parentId": "001" },{ "id":"001005", "title": "郴州市", "last":true, "parentId": "001" }] },{ "id":"002", "title": "湖北省", "last": false, "parentId": "0", "children":[{ "id":"002001", "title": "武汉市", "last":true },{ "id":"002002", "title": "黄冈市", "last":true, "parentId": "002" },{ "id":"002003", "title": "潜江市", "last":true, "parentId": "002" },{ "id":"002004", "title": "荆州市", "last":true, "parentId": "002" },{ "id":"002005", "title": "襄阳市", "last":true, "parentId": "002" }] }] } |
页面
list集合数据格式（dataFormat）
json
|
{ "status":{"code":200,"message":"操作成功"}, "data":[ {"id":"001","title": "湖南省", "last": false, "parentId": "0"}, {"id":"002","title": "湖北省","last": false,"parentId": "0"},
{"id":"001001", "title": "长沙市", "last":true, "parentId": "001"}, {"id":"001002", "title": "株洲市", "last":true, "parentId": "001" }, {"id":"001003", "title": "湘潭市", "last":true, "parentId": "001" }, {"id":"001004","title": "衡阳市","last":true,"parentId": "001"}, {"id":"001005","title": "郴州市","last":true,"parentId": "001"},
{"id":"002001","title": "武汉市","last":true,"parentId": "002"}, {"id":"002002","title": "黄冈市","last":true,"parentId": "002"}, {"id":"002003","title": "荆州市","last":true,"parentId": "002"}, {"id":"002004","title": "天门市","last":true,"parentId": "002"}, {"id":"002005","title": "孝感市","last":true,"parentId": "002"} ] } |
页面
layui+list集合数据格式（dataStyle + dataFormat）
json
|
{ "code":0, "msg":"操作成功", "data":[ {"id":"001","title": "湖南省", "last": false, "parentId": "0"}, {"id":"002","title": "湖北省","last": false,"parentId": "0"},
{"id":"001001", "title": "长沙市", "last":true, "parentId": "001"}, {"id":"001002", "title": "株洲市", "last":true, "parentId": "001" }, {"id":"001003", "title": "湘潭市", "last":true, "parentId": "001" }, {"id":"001004","title": "衡阳市","last":true,"parentId": "001"}, {"id":"001005","title": "郴州市","last":true,"parentId": "001"},
{"id":"002001","title": "武汉市","last":true,"parentId": "002"}, {"id":"002002","title": "黄冈市","last":true,"parentId": "002"}, {"id":"002003","title": "荆州市","last":true,"parentId": "002"}, {"id":"002004","title": "天门市","last":true,"parentId": "002"}, {"id":"002005","title": "孝感市","last":true,"parentId": "002"} ] } |
页面
-
事件监听
图标点击
节点点击
节点双击
-
相关方法使用
初始化选中
得到选中值
-
多选树的处理
json要求
|
{ "code":0, "msg":"操作成功", "data":[ {"id":"001","title": "湖南省", "last": false, "parentId": "0","checkArr": [{"type": "0", "checked": "0"}]}, {"id":"002","title": "湖北省","last": false,"parentId": "0","checkArr": [{"type": "0", "checked": "0"}]},
{"id":"001001", "title": "长沙市", "last":true, "parentId": "001","checkArr": [{"type": "0", "checked": "0"}]}, {"id":"001002", "title": "株洲市", "last":true, "parentId": "001" ,"checkArr": [{"type": "0", "checked": "0"}]}, {"id":"001003", "title": "湘潭市", "last":true, "parentId": "001" ,"checkArr": [{"type": "0", "checked": "0"}]}, {"id":"001004","title": "衡阳市","last":true,"parentId": "001","checkArr": [{"type": "0", "checked": "0"}]}, {"id":"001005","title": "郴州市","last":true,"parentId": "001","checkArr": [{"type": "0", "checked": "0"}]},
{"id":"002001","title": "武汉市","last":true,"parentId": "002","checkArr": [{"type": "0", "checked": "1"}]}, {"id":"002002","title": "黄冈市","last":true,"parentId": "002","checkArr": [{"type": "0", "checked": "2"}]}, {"id":"002003","title": "荆州市","last":true,"parentId": "002","checkArr": [{"type": "0", "checked": "0"}]}, {"id":"002004","title": "天门市","last":true,"parentId": "002","checkArr": [{"type": "0", "checked": "0"}]}, {"id":"002005","title": "孝感市","last":true,"parentId": "002","checkArr": [{"type": "0", "checked": "0"}]} ] } |
|
{ "code":0, "msg":"操作成功", "data":[ {"id":"001","title": "湖南省", "last": false, "parentId": "0","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"}, {"id":"002","title": "湖北省","last": false,"parentId": "0","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
{"id":"001001", "title": "长沙市", "last":true, "parentId": "001","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"}, {"id":"001002", "title": "株洲市", "last":true, "parentId": "001" ,"checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"}, {"id":"001003", "title": "湘潭市", "last":true, "parentId": "001" ,"checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"}, {"id":"001004","title": "衡阳市","last":true,"parentId": "001","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"}, {"id":"001005","title": "郴州市","last":true,"parentId": "001","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
{"id":"002001","title": "武汉市","last":true,"parentId": "002","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"}, {"id":"002002","title": "黄冈市","last":true,"parentId": "002","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"}, {"id":"002003","title": "荆州市","last":true,"parentId": "002","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"}, {"id":"002004","title": "天门市","last":true,"parentId": "002","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"}, {"id":"002005","title": "孝感市","last":true,"parentId": "002","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"} ] } |
代码
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>dtree</title> <link rel="stylesheet" href="resources/layui/css/layui.css"> <link rel="stylesheet" href="resources/layui_ext/dtree/dtree.css"> <link rel="stylesheet" href="resources/layui_ext/dtree/font/dtreefont.css"> </head> <body> <button type="button" class="layui-btn" id="btn1">选中武汉市</button> <button type="button" class="layui-btn" id="btn2">得到选中值</button>
<ul id="demoTree" class="dtree" data-id="0"></ul>
<script src="resources/layui/layui.js"></script> <script type="text/javascript"> layui.extend({ dtree:'resources/layui_ext/dist/dtree' }).use([ 'jquery', 'layer', 'form','dtree' ], function() { var $ = layui.jquery; var layer = layui.layer; var form = layui.form; var dtree=layui.dtree; // 初始化树 var DemoTree = dtree.render({ elem: "#demoTree", dataStyle: "layuiStyle", //使用layui风格的数据格式 response:{message:"msg",statusCode:0}, //修改response中返回数据的定义 dataFormat: "list", //配置data的风格为list checkbar: true, checkbarType: "all", // 默认就是all，其他的值为： no-all p-casc self only\ checkbarData: "choose" , url: "resources/layui_ext/json/case/asyncTreeCheckBox2.json" // 使用url加载（可与data加载同时存在） });
//选中武汉 $("#btn1").click(function(){ var params = dtree.dataInit("demoTree", "002001"); });
$("#btn2").click(function(){ var param = dtree.getNowParam(DemoTree); layer.alert(JSON.stringify(param), { title: '最终的提交信息' }) });
}); </script> </body> </html> |
多选树的相关方法
使用js选中某些节点
得到选中的所有节点
<%--
Created by IntelliJ IDEA.
User: Lenovo
Date: 2019/10/4
Time: 19:38
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>树形组件</title>
<link rel="stylesheet" href="./libs/layui/css/layui.css">
<link rel="stylesheet" href="./libs/layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="libs/layui_ext/dtree/font/dtreefont.css">
<link rel="stylesheet" href="./libs/css/global.css">
<script type="text/javascript" src="./libs/layui/layui.js"></script>
<script type="text/javascript" src="libs/layui_ext/dist/dtree.js"></script>
<style type="text/css">
.layer-photos-demo{margin:10px 0;}
.layer-photos-demo img{width: 160px; height: 100px;}
</style>
</head>
<body>
<button type="button" class="layui-btn" id="btn1">选中武汉市</button>
<button type="button" class="layui-btn" id="btn2">得到选中值</button>
<ul id="demoTree" class="dtree" data-id="0"></ul>
<script type="text/javascript">
layui.extend({
dtree:'libs/layui_ext/dist/dtree'
}).use(['element','jquery','laydate','form','layedit','table'],function () {
var $=layui.jquery;
var element=layui.element;
var laydate=layui.laydate;
var form=layui.form;
var layedit=layui.layedit;
//创建一个编辑器
var editIndex = layedit.build('LAY_demo_editor');
var table=layui.table;
var dtree=layui.dtree;
// 初始化树
var DemoTree = dtree.render({
elem: "#demoTree",
// data: demoTree, // 使用data加载
dataStyle: "layuiStyle", //使用layui风格的数据格式
response:{message:"msg",statusCode:0} , //修改response中返回数据的定义
dataFormat: "list", //配置data的风格为list
checkbar:true, //开启复选框
url: "libs/layui_ext/json/case/asyncTree4.json" // 使用url加载（可与data加载同时存在）
});
dtree.on("changeTree('demoTree')" ,function(obj){
console.log(obj.param); // 点击当前节点传递的参数
console.log(obj.dom); // 当前节点的jquery对象
console.log(obj.show); // 节点展开为true，关闭为false
});
//节点点击
dtree.on("node('demoTree')" ,function(obj){
layer.alert(JSON.stringify(obj.param),{
title:'最终的提交消息'
});
console.log(obj.param)
console.log(obj.param); // 点击当前节点传递的参数
console.log(obj.dom); // 当前节点的jquery对象
console.log(obj.childParams); // 当前节点的所有子节点参数
console.log(obj.parentParam); // 当前节点的父节点参数
});
//节点双击事件
dtree.on("nodedblclick('demoTree')" ,function(obj){
console.log(obj.param); // 点击当前节点传递的参数
console.log(obj.dom); // 当前节点的jquery对象
console.log(obj.childParams); // 当前节点的所有子节点参数
console.log(obj.parentParam); // 当前节点的父节点参数
});
//选中武汉市
$("#btn1").click(function () {
var params = dtree.dataInit("demoTree", "002001");
});
//得到选中值
$("#btn2").click(function () {
var param = dtree.getNowParam(DemoTree);
layer.alert(JSON.stringify(param),{
title:'最终的提交信息'
})
});
});
</script>
</body>
</html>
<%--
Created by IntelliJ IDEA.
User: Lenovo
Date: 2019/10/4
Time: 19:38
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>树形组件</title>
<link rel="stylesheet" href="./libs/layui/css/layui.css">
<link rel="stylesheet" href="./libs/layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="libs/layui_ext/dtree/font/dtreefont.css">
<link rel="stylesheet" href="./libs/css/global.css">
<script type="text/javascript" src="./libs/layui/layui.js"></script>
<script type="text/javascript" src="libs/layui_ext/dist/dtree.js"></script>
<style type="text/css">
.layer-photos-demo{margin:10px 0;}
.layer-photos-demo img{width: 160px; height: 100px;}
</style>
</head>
<body>
<button type="button" class="layui-btn" id="btn1">选中武汉市和荆州市</button>
<button type="button" class="layui-btn" id="btn2">得到选中值</button>
<ul id="demoTree" class="dtree" data-id="0"></ul>
<script type="text/javascript">
layui.extend({
dtree:'libs/layui_ext/dist/dtree'
}).use(['element','jquery','laydate','form','layedit','table'],function () {
var $=layui.jquery;
var element=layui.element;
var laydate=layui.laydate;
var form=layui.form;
var layedit=layui.layedit;
//创建一个编辑器
var editIndex = layedit.build('LAY_demo_editor');
var table=layui.table;
var dtree=layui.dtree;
// 初始化树
var DemoTree = dtree.render({
elem: "#demoTree",
// data: demoTree, // 使用data加载
dataStyle: "layuiStyle", //使用layui风格的数据格式
response:{message:"msg",statusCode:0} , //修改response中返回数据的定义
dataFormat: "list", //配置data的风格为list
checkbar:true, //开启复选框
checkbarType: "all",
checkbarData: "choose" ,// 记录选中（默认）， "change"：记录变更， "all"：记录全部， "halfChoose"："记录选中和半选（V2.5.0新增）"
url: "libs/layui_ext/json/case/asyncTreeCheckBox.json" // 使用url加载（可与data加载同时存在）
});
dtree.on("changeTree('demoTree')" ,function(obj){
console.log(obj.param); // 点击当前节点传递的参数
console.log(obj.dom); // 当前节点的jquery对象
console.log(obj.show); // 节点展开为true，关闭为false
});
// //节点点击
// dtree.on("node('demoTree')" ,function(obj){
// layer.alert(JSON.stringify(obj.param),{
// title:'最终的提交消息'
// });
// console.log(obj.param)
// console.log(obj.param); // 点击当前节点传递的参数
// console.log(obj.dom); // 当前节点的jquery对象
// console.log(obj.childParams); // 当前节点的所有子节点参数
// console.log(obj.parentParam); // 当前节点的父节点参数
// });
//
// //节点双击事件
//
// dtree.on("nodedblclick('demoTree')" ,function(obj){
// console.log(obj.param); // 点击当前节点传递的参数
// console.log(obj.dom); // 当前节点的jquery对象
// console.log(obj.childParams); // 当前节点的所有子节点参数
// console.log(obj.parentParam); // 当前节点的父节点参数
// });
//
//选中武汉市和荆州市
$("#btn1").click(function () {
var params = dtree.chooseDataInit("demoTree", "002,002001,002003");
});
//得到选中值
$("#btn2").click(function () {
var params = dtree.getCheckbarNodesParam("demoTree");
console.log(params);
layer.alert(JSON.stringify(params),{
title:'最终的提交信息'
})
});
});
</script>
</body>
</html>