当前位置:网站首页>Lay UI left tree Dtree right list table
Lay UI left tree Dtree right list table
2020-11-07 21:03:00 【Maiyuweng】
layui Left tree dtree Right list table
dtree Style Introduction
Font introduction position :static/layuiadmin/dtree/font/dtreefont.css
Style introduction location :static/layuiadmin/dtree/dtree.css
js Lead in position :static/layuiadmin/modules/dtree.js
Front page
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="utf-8">
<title>layui Left tree dtree Right list table</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" th:href="@{/layuiadmin/layui/css/layui.css}" media="all">
<link rel="stylesheet" th:href="@{/layuiadmin/dtree/dtree.css}" media="all">
<link rel="stylesheet" th:href="@{/layuiadmin/dtree/font/dtreefont.css}" media="all">
<script th:src="@{/layuiadmin/layui/layui.js}"></script>
</head>
<body>
<div class="layui-fluid">
<div class="layui-card">
<div class="layui-card-body">
<div class="layui-row layui-col-space15">
<!-- Left tree -->
<div class="layui-col-sm12 layui-col-md4 layui-col-lg2">
<div class="layui-card">
<div id="ltTree" class="dtree" data-id="0">
</div>
</div>
</div>
<!-- Right table -->
<div class="layui-col-sm12 layui-col-md8 layui-col-lg10">
<div class="layui-card">
<div class="layui-card-body">
<div class="layui-form toolbar">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label w-auto"> name :</label>
<div class="layui-input-inline mr0">
<input id="edtSearch" class="layui-input" type="text" placeholder=" Enter key "/>
</div>
</div>
<div class="layui-inline">
<button class="layui-btn icon-btn" id="btnSearchByCode">
<i class="layui-icon layui-icon-search layuiadmin-button-btn"> Inquire about </i>
</button>
</div>
<div class="layui-inline">
<shiro:hasPermission name="ROLEzxAdd">
<button class="layui-btn btnAdd"> add to </button>
</shiro:hasPermission>
<shiro:hasPermission name="ROLEzxDel">
<button class="layui-btn layui-btn-danger allDel"> Delete </button>
</shiro:hasPermission>
<button class="layui-btn expExcel"> export </button>
<a href="../excel/area_template.xls" download=" Templates - The administrative region introduced "
class="layui-btn"> Download the template </a>
<input type="file" style="display: none;" class="layui-btn layui-btn-primary"
id="impExcel" multiple="multiple" accept=".xls,.xlsx,.csv">
<button class="layui-btn" onclick="$('#impExcel').click()"> Import </button>
</div>
</div>
</div>
<table class="layui-table" id="ZX_table_list" lay-filter="ZX_table_list"></table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bind button -->
<script type="text/html" id="barZX">
<shiro:hasPermission name="ROLEzxEdit">
<a class="layui-btn layui-btn-xs" lay-event="edit"> edit </a>
</shiro:hasPermission>
<shiro:hasPermission name="ROLEzxDel">
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"> Delete </a>
</shiro:hasPermission>
</script>
<script>
layui.config({
base: '../layuiadmin/' // The path of the static resource
}).extend({
index: 'lib/index' // Main entrance module
}).use(['index', 'form', 'table', 'util', 'dtree', 'admin', 'excel'], function () {
var $ = layui.$,
form = layui.form;
var table = layui.table;
var util = layui.util;
var admin = layui.admin;
var dtree = layui.dtree;
// Tree rendering
var renderTree = dtree.render({
elem: '#ltTree',
url: '../getDtreeList',
dataStyle: "layuiStyle", // Use layui Style data format
dataFormat: "list", // To configure data The style of is list
response: {message: "msg", statusCode: 0} // modify response Definition of return data in
});
// Apply colours to a drawing form
var renderTable = function (pid, cloumn, Keyword) {
console.log("--pid--" + pid + ",cloumn=" + cloumn + ",Keyword=" + Keyword);
table.render({
elem: '#ZX_table_list',
url: '../getList',
page: true,
cellMinWidth: 100,
cols: [
[
{checkbox: true, width: "5%"},
{field: 'id', title: 'ID', align: 'center', width: 80},
{field: 'params', title: ' name '},
{title: ' operation ', align: 'center', width: 140, fixed: 'right', toolbar: '#barZX'}
]
],
where: {pid: pid, params: Keyword}
});
};
renderTable();
// Tree click events
dtree.on('node("ltTree")', function (obj) {
var data = obj.param;
// layer.msg(' You chose :' + data.nodeId + '-' + data.context);
renderTable(data.nodeId, "", "");
});
// Search button click event
$('#btnSearchByCode').click(function () {
var value = $('#edtSearch').val();
renderTable("", "params", value);
});
// Add operation
$(".btnAdd").click(function () {
layer.open({
type: 2,
title: ' add to ',
content: '../goAdd',
area: ['800px', '500px'],
btnAlign: 'c',
btn: [' determine ', ' Cancel '],
yes: function (index, layero) {
var iframeWindow = window['layui-layer-iframe' + index],
submitID = 'ZX_iframe_submit',
submit = layero.find('iframe').contents().find('#' + submitID);
// Monitor submission
iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
$.ajax({
type: "POST",
url: '../insert',
data: data.field,
dataType: "json",
success: function (data) {
if (data.code == 0) {
layer.msg(data.msg);
renderTable();
renderTree.menubarMethod().refreshTree();
layer.close(index);
} else {
layer.msg(data.msg);
}
}
});
});
submit.trigger('click');
}
});
});
// export Excel
var excel = layui.excel;
$(".expExcel").click(function () {
layui.layer.confirm(' Confirm export ?', function (index) {
layui.layer.close(index);
$.ajax({
url: '../getList',
dataType: 'json',
success: function (res) {
// 1. Array header added to the header
res.data.unshift({id: 'ID', params: ' name '});
// 2. If you need to adjust the order , Please perform the grooming function
var data = excel.filterExportData(res.data, [
'id',
'params'
]);
// 3. Execute the export function , The system will pop up
excel.exportExcel({sheet1: data}, ' Export table .xlsx', 'xlsx');
}
});
});
});
// Import Excel
$('#impExcel').change(function (e) {
var files = e.target.files;
try {
// Combing the data during the reading process
excel.importExcel(files, {
range: 1,
fields: {
'id': 'A',
'pid': 'B',
'params': 'C',
'administrativeNumber': 'D'
}
}, function (data) {
$.ajax({
// The default transfer content type is key-value type , The background uses arrays 、List When receiving parameters ,
// headers The content type must be specified in json type , Otherwise it will be reported 415 error
headers: {
'Content-Type': 'application/json'
},
type: "post",
url: "../impExcel",
// Appoint json After the type , The data transmitted should be json Format .
data: JSON.stringify(data[0].sheet1),
success: function (data) {
console.log(data.data);
renderTable();
renderTree.menubarMethod().refreshTree();
layer.alert(data.msg);
},
error: function (data) {
console.log("ERROR:" + JSON.stringify(data));
layer.alert(data.msg);
}
});
});
} catch (e) {
layer.alert(e.message);
}
});
// Batch deletion
$(".allDel").click(function () {
var checkStatus = table.checkStatus('ZX_table_list'),
checkData = checkStatus.data, // Get the selected data
ids = [];
if (checkData.length === 0) {
return layer.msg(' Please select the data to delete ');
}
for (var i in checkData) {
ids.push(checkData[i]['id']);
}
layui.layer.confirm(' Do you really delete ', function (index) {
layui.layer.close(index);
$.ajax({
type: "GET",
url: '../delete?id=' + ids.toString(),
dataType: "json",
success: function (data) {
layer.msg(data.msg);
if (data.code == 0) {
renderTable();
renderTree.menubarMethod().refreshTree();
layer.close(index);
}
}
});
});
});
// Monitor toolbar
table.on('tool(ZX_table_list)', function (obj) {
layEvent = obj.event;
if (layEvent === 'del') {
// Delete operation
layer.confirm(' Do you really want to delete it ', function (index) {
$.ajax({
type: "GET",
url: '../delete?id=' + obj.data.id,
dataType: "json",
success: function (data) {
if (data.code == 0) {
layer.msg(data.msg);
renderTable();
renderTree.menubarMethod().refreshTree();
layer.close(index);
} else {
layer.msg(data.msg);
}
}
});
});
} else if (layEvent === 'edit') {
// Pop up and modify
layer.open({
type: 2,
title: ' modify ',
content: '../goEdit?id=' + obj.data.id,
area: ['800px', '500px'],
btnAlign: 'c',
btn: [' determine ', ' Cancel '],
yes: function (index, layero) {
var iframeWindow = window['layui-layer-iframe' + index],
submitID = 'ZX_iframe_submit',
submit = layero.find('iframe').contents().find('#' + submitID);
// Monitor submission
iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
$.ajax({
type: "POST",
url: '../update',
data: data.field,
dataType: "json",
success: function (data) {
if (data.code == 0) {
layer.msg(data.msg);
renderTable();
renderTree.menubarMethod().refreshTree();
layer.close(index);
} else {
layer.msg(data.msg);
}
}
});
});
submit.trigger('click');
}
});
}
});
});
</script>
</body>
</html>
backstage dtree Encapsulate entity
package com.cn.zx.po.vo;
import java.io.Serializable;
/**
* dtree
* describe: dree The corresponding entity class
* current user Maochao.zhu
* current system 2020/9/29
*/
public class DtreeVo implements Serializable {
private static final long serialVersionUID = 7329293427666074986L;
private Integer id;
private Integer parentId;// Parent Id
private String title;// title
private Integer checkArr;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public Integer getParentId() {
return parentId;
}
public void setParentId(Integer parentId) {
this.parentId = parentId;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public Integer getCheckArr() {
return checkArr;
}
public void setCheckArr(Integer checkArr) {
checkArr = 0;
this.checkArr = checkArr;
}
}
dtree Get interface
/**
* obtain dtree Tree menu list
* @param area
* @param request
* @param response
* @return
*/
@RequestMapping("getDtreeList")
@ResponseBody
public BasePageData getDtreeList(params area, HttpServletRequest request, HttpServletResponse response){
BasePageData data = new BasePageData();
List<DtreeVo> list = service.getDtreeList(area);
data.setCode(WebResponseCode.SUCCESS);
data.setMsg(" Successful operation !");
data.setCount(list.size());
data.setData(list);
return data;
}
Query statement
<!-- obtain dtree Tree menu list -->
<select id="getDtreeList" resultType="com.cn.zx.po.vo.DtreeVo">
select id,parentId, title from table where 1=1
</select>
dtree Component platform :https://fly.layui.com/extend/dtree
dtree Help book :http://www.wisdomelon.com/DTreeHelper/
Reference blog :https://blog.csdn.net/qq_37337633/article/details/89466475
版权声明
本文为[Maiyuweng]所创,转载请带上原文链接,感谢
边栏推荐
- 手撕算法-手写单例模式
- [random talk] the goal and way of software design
- The instanceof operator in ecmascript7 specification
- Sentry 安装
- WPF 关于绘图个人总结
- Kubernetes服务类型浅析:从概念到实践
- What do you think of the most controversial programming ideas?
- supervisor和Python多进程multiprocessing使用 子进程残留问题
- When tidb and Flink are combined: efficient and easy to use real-time data warehouse
- 云计算之路-出海记:整一台 aws 免费云服务器
猜你喜欢
爆一个VS2015 Update1更新带来的编译BUG【已有解决方案】
构造请求日志分析系统
Three steps, one pit, five steps and one thunder, how to lead the technical team under the rapid growth?
看一遍就理解,图解单链表反转
Principles of websocket + probuf
Insight -- the application of sanet in arbitrary style transfer
【原创】ARM平台内存和cache对xenomai实时性的影响
Improvement of maintenance mode of laravel8 update
微服务的出现和意义的探索
Let's talk about the locks in the database
随机推荐
DOM节点操作
一次公交卡被“盗刷”事件带来的思考
Web Security (3) -- CSRF attack
Delphi10's rest.json And system.json Step on the pit
android基础-RadioButton(单选按钮)
Data transmission of asynchronous serial communication controlled by group bus communication
Three steps, one pit, five steps and one thunder, how to lead the technical team under the rapid growth?
Got timeout reading communication packets解决方法
On the concurrency of update operation
C++在C的基础上改进了哪些细节
Summary of the resumption of a 618 promotion project
Insight -- the application of sanet in arbitrary style transfer
delphi10的rest.json与system.json的踩坑
【解决方案】分布式定时任务解决方案
AFO记
留给快手的时间不多了
ECMAScript7规范中的instanceof操作符
IDEA-项目未自动生成 .iml 文件
What kind of technical ability should a programmer who has worked for 1-3 years? How to improve?
ROS学习---远程启动ROS节点