1.分类.html
<%--<!DOCTYPE html>--%>
<%--<html lang="zh-cmn-Hans">--%>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>树形结构</title>
<link rel="stylesheet" href="${root}/layuinew/css/layui.css">
</head>
<body style="padding: 20px;background-color: #F2F2F2;">
<div class="layui-row">
<div class=" layui-col-md6">
<div class="layui-card ">
<div class="layui-card-header" style="padding: 10px;">
<div class="search-item">
<a class="layui-btn search_btn">刷新</a>
<a class="layui-btn layui-btn-normal add_btn">添加</a>
</div>
</div>
<div class="layui-card-body">
<div id="test1"></div>
</div>
</div>
</div>
</div>
<script src="${root}/layuinew/layui.js"></script>
<script>
layui.use(['layer', 'tree'], function () {
var tree = layui.tree;
var layer = layui.layer;
layui.$.ajax({
url: "getCateList",
type: "post",
dataType: "json",
// data: {page: 1, size: 9999999},
success: function (data) {
if (data.code === 200) {
var d = getData(data.result.item);
//渲染模板
var inst = tree.render({
id: 'inst',
elem: '#test1', //绑定元素
showCheckbox: false, //是否显示复选框
edit: ['add', 'update', 'del'], // 是否开启节点的操作图标。默认 false。
text: { // 新增默认文本，目前支持以下设定：
defaultNodeName: '未命名', //节点默认名称
none: '无数据' //数据为空时的提示文本
},
// 数据源
data: d,
// 复选框被点击的回调
// 点击复选框时触发，返回的参数如下：
oncheck: function (obj) {
console.log(obj.data); //得到当前点击的节点数据
console.log(obj.checked); //得到当前节点的展开状态：open、close、normal
console.log(obj.elem); //得到当前节点元素
},
// 操作节点的回调
// 通过 operate 实现函数，对节点进行增删改等操作时，返回操作类型及操作节点
operate: function (obj) {
var type = obj.type; //得到操作类型：add、edit、del
var data = obj.data; //得到当前节点的数据
var elem = obj.elem; //得到当前节点元素
// console.log(type, data, elem);
console.log(data);
//Ajax 操作
var id = data.id; //得到节点索引id
var pid = data.parentId; //得到节点的parent_id
if (type === 'add') {
var params = {};
//新增子节点操作
if (pid === 0) {
params.categoryText = '未命名';
params.parentId = id;
params.subnode = 1;
//增加节点
layui.$.ajax({
url: "add",
type: "post",
dataType: "json",
data: params,
success: function (data) {
if (data.code === 200) {
// var pid = getData(data.result.result);
console.log(data);
} else {
console.log("error");
}
}
});
return "ok";
}
} else if (type === 'update') {
//修改节点
// console.log(elem.find('.layui-tree-txt').html()); //得到修改后的内容
var categoryText = elem.find('.layui-tree-txt').html();
// console.log("categoryText--->>> " + categoryText);
var params = {};
params.id = id;
params.categoryText = categoryText;
console.log(JSON.stringify(params))
layui.$.ajax({
url: "update",
type: "post",
dataType: "json",
data: params,
success: function (data) {
if (data.code === 200) {
console.log("更新成功");
} else {
console.log("更新失败");
}
}
})
} else if (type === 'del') {
//删除节点
layui.$.ajax({
url: "del",
type: "post",
dataType: "json",
data: {'id': id},
success: function (data) {
if (data.code === 200) {
console.log("删除成功");
} else {
console.log("删除失败");
}
}
})
}
}
});
}
}
});
// 刷新
function reload(){
layui.$.ajax({
url: "getCateList",
type: "post",
dataType: "json",
success: function (data) {
if (data.code === 200) {
var d = getData(data.result.item);
// 刷新
tree.reload('inst', {data: d});
}
}
});
}
// 刷新
layui.$(".search_btn").on("click", function () {
reload();
});
// 添加
layui.$(".add_btn").on("click", function () {
layer.prompt({
title: '请输入节点名称',
}, function (value, index) {
// alert(value); //得到value
//增加节点
layui.$.ajax({
url: "add",
type: "post",
dataType: "json",
data: {
categoryText: value,
parentId: 0,
subnode: 1,
},
success: function (data) {
if (data.code === 200) {
reload();
console.log(data);
} else {
console.log("error");
}
}
});
layer.close(index);
});
});
// 转换为2级数组，简洁版，只能转换为二级
function getData(item) {
var d = [], obj = {
length: 0
};
item.forEach(function (item) {
if (item.parentId in obj) {
obj[item.parentId].push(item);
} else {
obj.length++;
obj[item.parentId] = [item];
}
});
for (var prop in obj) {
for (var j = 0; j < obj[prop].length; j++) {
obj[prop][j].title = obj[prop][j].categoryText;
if (prop == 0) {
obj[prop][j].spread = true;
obj[prop][j].children = [];
d.push(obj[prop][j]);
} else {
var parent;
for (var k = 0; k < d.length; k++) {
if (d[k].id == prop) {
parent = d[k];
}
}
parent.children.push(obj[prop][j]);
}
}
}
return d;
}
});
</script>
</body>
</html>
category.js
layui.config({
base: ""
}).use(['form', 'layer', 'jquery', 'laypage', 'element'], function () {
var element = layui.element();
//一些事件监听
element.on('tab(demo)', function (data) {
console.log(data);
});
var form = layui.form(),
layer = layui.layer,
laypage = layui.laypage,
$ = layui.jquery;
// 后台获取的列表数据
var usersData = '';
// 后台获取的总数
var total = 0;
var sn = 0;
/**
* 获取查询的页面参数
*/
function getQueryObj(pageNum, pageSize) {
var data = {};
data.page = pageNum;
data.size = pageSize;
var categoryText = $("#categoryText").val();
if ($.trim(categoryText) != '') {
data.categoryText = categoryText;
}
return data;
}
/**
* 获取数据
*/
function queryData(queryObj) {
$.ajax({
url: "getCateList",
type: "post",
dataType: "json",
data: queryObj,
success: function (data) {
usersData = data.result.item;
total = data.result.count.count;
//渲染
sn = (queryObj.page - 1) * queryObj.size;
showDatas(queryObj);
}
})
}
initTable();
/**
* 初始化表格
*/
function initTable() {
// 获取页面查询数据的条件
var queryObj = getQueryObj(globalPageNum, globalPageSize);
// 查询数据
// queryData(queryObj);
load_category(0);
}
// 查询
$(".search_btn").click(function () {
var queryObj = getQueryObj(globalPageNum, globalPageSize);
var index = layer.msg('查询中，请稍候', {icon: 16, time: false, shade: 0.8});
// queryData(queryObj);
load_category(0);
layer.close(index);
})
// 添加产品
$(".pro_lib_btn").click(function () {
var index = layui.layer.open({
title: "添加",
type: 2,
content: "toadd",
btn: '返回' //只是为了演示
, yes: function () {
layui.layer.closeAll();
},
success: function (layero, index) {
}
})
//改变窗口大小时，重置弹窗的高度，防止超出可视区域（如F12调出debug的操作）
$(window).resize(function () {
layui.layer.full(index);
})
layui.layer.full(index);
})
// 操作
$("body").on("click", ".product_category_edit", function () { //编辑
var _this = $(this);
var id = _this.attr("data-id");
var index = layui.layer.open({
title: "修改",
type: 2,
content: "toedit?id=" + id,
btn: '返回',
yes: function () {
layui.layer.closeAll();
},
success: function (layero, index) {
// layui.layer.tips('点击此处返回用户列表', '.layui-layer-setwin .layui-layer-close', {
// tips: 3
// });
}
})
// 改变窗口大小时，重置弹窗的高度，防止超出可视区域（如F12调出debug的操作）
$(window).resize(function () {
layui.layer.full(index);
})
layui.layer.full(index);
})
$("body").on("click", ".product_detail", function () { //编辑
var _this = $(this);
var id = _this.attr("data-id");
var index = layui.layer.open({
title: "详情",
type: 2,
content: "detail?id=" + id,
btn: '返回',
yes: function () {
layui.layer.closeAll();
},
success: function (layero, index) {
// layui.layer.tips('点击此处返回用户列表', '.layui-layer-setwin .layui-layer-close', {
// tips: 3
// });
}
})
//改变窗口大小时，重置弹窗的高度，防止超出可视区域（如F12调出debug的操作）
$(window).resize(function () {
layui.layer.full(index);
})
layui.layer.full(index);
})
$("body").on("click", ".product_diable", function () { //删除
var _this = $(this);
var msg = "产品停用后设备中关联该产品的货道将不能再进行销售，是否确认停用！";
if (_this.attr("data-status") == "1") {
msg = "产品启用后设备中关联该产品的货道将进行销售，是否确认启用！";
}
var index = layer.confirm(msg, {icon: 3, title: '提示信息'}, function (index) {
layer.close(index);
index = layer.msg('操作中，请稍候', {icon: 16, time: false, shade: 0.8});
$.ajax({
url: "edit?id=" + _this.attr("data-id") + "&status=" + _this.attr("data-status"),
type: "post",
dataType: "json",
success: function (data) {
layer.close(index);
if (data.respCode == 200) {
layer.msg("操作成功！", {icon: 1});
//刷新父页面
location.reload();
} else {
layer.msg(data.respMsg, {icon: 2});
}
}, error: function (xmlLHttpRequest) {
layer.close(index);
layer.msg("操作失败！", {icon: 2});
}
});
});
});
/**
* 渲染数据
*/
function showDatas(queryObj) {
//渲染数据
function renderData(data) {
var dataHtml = '';
var currData = data;
if (currData.length != 0) {
for (var i = 0; i < currData.length; i++) {
dataHtml += '<tr>'
+ '<td>' + currData[i].id + '</td>'
+ '<td>' + currData[i].categoryText + '</td>'
+ '<td>' + currData[i].sort + '</td>'
+ '<td>';
dataHtml += '<a class="layui-btn layui-btn-mini product_category_edit" lay-event="edit" data-id="' + data[i].id + '">修改</a>';
dataHtml += '<a class="layui-btn layui-btn-primary layui-btn-mini product_detail" lay-event="detail" data-id="' + data[i].id + '">查看</a>';
dataHtml += '</td>';
dataHtml += '</tr>';
}
} else {
dataHtml = '<tr><td colspan="8">暂无数据</td></tr>';
}
return dataHtml;
}
//分页
var nums = globalPageSize; //每页出现的数据量
//重绘数据
$(".content_body").html(renderData(usersData));
$('.preview-img').each(function (i, e) {
var previewUrl = $(this).find('img').attr('src');
$(this).on('click', function () {
layer.open({
type: 1 //Page层类型
, offset: ['100px']
, area: ['460px', '540px']
, shade: 0.3 //遮罩透明度
, title: '图片预览'
, anim: 3 //0-6的动画形式，-1不开启
, maxmin: false //禁止全屏最小化
// , move: false //禁止拖拽
, resize: false //禁止改变大小
, content: '<div class="preview-size"><img class="keepShape" src="' + previewUrl + '"></div>'
});
});
})
// form.render();
laypage({
cont: "page",
pages: Math.ceil(total / nums),
skip: true,
curr: queryObj.page,
jump: function (obj, first) {
if (!first) {
var queryObj = getQueryObj(obj.curr, nums);
queryData(queryObj);
}
}
})
initTableBodyHeight();
}
initTableBodyHeight();
$(window).resize(function () {
initTableBodyHeight();
})
});
// 加载
function load_category(parentId) {
let params = {};
params.parentId = isNull(parentId) ? 0 : parseInt(parentId);
console.log(params);
$.ajax({
type: "post",
url: "getCateList",
data: params,
dataType: "json",
success: function (data) {
if (data.code == 200) {
// alert("data===>>> " + data.toString())
// layer.msg("操作成功！", {icon: 1});
console.log('A:' + JSON.stringify(data.result));
let item = data.result.item;
let html = template('category_content', {items: item});
$('.category_content').html(html);
//刷新父页面
// location.reload();
// showDatas(queryObj);
} else {
console.log('ERR:' + JSON.stringify(data.respMsg));
//ayer.msg(data.respMsg, {icon: 2});
}
}, error: function (xmlLHttpRequest) {
layer.close(index);
layer.msg("操作失败！", {icon: 2});
}
});
}