css左树右表,layui左树dtree右列表table layui左树dtree右列表table
dtree样式引⼊
字体引⼊位置：static/layuiadmin/dtree/font/dtreefont.css
样式引⼊位置：static/layuiadmin/dtree/dtree.css
js引⼊位置：static/layuiadmin/modules/dtree.js
前端页⾯
xmlns:shiro="www.pollix.at/thymeleaf/shiro">
layui左树dtree右列表table
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
名称：
查询
添加
删除
导出
id="impExcel" multiple="multiple" accept=".xls,.xlsx,.csv">
导⼊
base: '../layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主⼊⼝模块
}).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;
// 树形渲染
var renderTree = der({
elem: '#ltTree',
url: '../getDtreeList',
dataStyle: "layuiStyle", //使⽤layui风格的数据格式
dataFormat: "list", //配置data的风格为list
response: {message: "msg", statusCode: 0} //修改response中返回数据的定义});
// 渲染表格
var renderTable = function (pid, cloumn, Keyword) {
console.log("--pid--" + pid + ",cloumn=" + cloumn + "，Keyword=" + Keyword); der({
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: '名称'},
{title: '操作', align: 'center', width: 140, fixed: 'right', toolbar: '#barZX'}
]
],
where: {pid: pid, params: Keyword}
});
};
renderTable();
// 树形点击事件
<('node("ltTree")', function (obj) {
var data = obj.param;
// layer.msg('你选择了：' + deId + '-' + t);
deId, "", "");
});
// 搜索按钮点击事件
$('#btnSearchByCode').click(function () {
var value = $('#edtSearch').val();
renderTable("", "params", value);
});
//添加操作
$(".btnAdd").click(function () {
layer.open({
type: 2,
title: '添加',
content: '../goAdd',
area: ['800px', '500px'],
btnAlign: 'c',
btn: ['确定', '取消'],
yes: function (index, layero) {
var iframeWindow = window['layui-layer-iframe' + index],
submitID = 'ZX_iframe_submit',
submit = layero.find('iframe').contents().find('#' + submitID);
/
/监听提交
iframeWindow.('submit(' + submitID + ')', function (data) { $.ajax({
type: "POST",
url: '../insert',
data: data.field,
dataType: "json",
success: function (data) {
if (de == 0) {
layer.msg(data.msg);
renderTable();
layer.close(index);
} else {
layer.msg(data.msg);
}
}
});
});
}
});
});
/
/导出Excel
var excel = l;
$(".expExcel").click(function () {
firm('确认导出?', function (index) { layui.layer.close(index);
$.ajax({
url: '../getList',
dataType: 'json',
success: function (res) {
// 1. 数组头部新增表头
res.data.unshift({id: 'ID', params: '名称'});
// 2. 如果需要调整顺序，请执⾏梳理函数
var data = excel.filterExportData(res.data, [
'id',
'params'
]);
// 3. 执⾏导出函数，系统会弹出弹框
});
});
});
//导⼊Excel
$('#impExcel').change(function (e) {
var files = e.target.files;
try {
//在读取过程中梳理数据
excel.importExcel(files, {
range: 1,
fields: {
'id': 'A',
'pid': 'B',
'params': 'C',
'administrativeNumber': 'D'
}
}, function (data) {
$.ajax({
//默认传输的内容类型为 key-value 型，后台使⽤数组、List 接收参数时, // headers 中必须指定内容类型为 json 类型，否则会报415错误headers: {
'Content-Type': 'application/json'
},
type: "post",
layui下载url: "../impExcel",
//指定 json 类型后，传输的数据理所当然应该是 json 格式。
data: JSON.stringify(data[0].sheet1),
success: function (data) {
console.log(data.data);
renderTable();
layer.alert(data.msg);
},
error: function (data) {
console.log("ERROR:" + JSON.stringify(data));
layer.alert(data.msg);
}
});
});
} catch (e) {
layer.ssage);
}
});
//批量删除
$(".allDel").click(function () {
var checkStatus = table.checkStatus('ZX_table_list'),
checkData = checkStatus.data, //得到选中的数据
ids = [];

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。