<!DOCTYPE html>
<html lang="en">
<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="../../statics/layui/css/layui.css" media="all">
<link rel="stylesheet" href="../../statics/style/admin.css" media="all">
</head>
<body>
<!-- 主體部分 -->
<div class="layui-card">
<div class="layui-card-header">字典管理</div>
<div class="layui-card-body">
<div class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">字典名稱</label>
<div class="layui-input-inline">
<input type="text" id="dictName" name="dictName" placeholder="字典名稱" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">字典類型</label>
<div class="layui-input-inline">
<input type="text" id="dictType" name="dictType" placeholder="字典類型" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<button id="btn_search" class="layui-btn layui-icon layui-icon-search" data-type="search">查詢
</button>
</div>
</div>
</div>
<table id="manage_table" lay-filter="manage_table"></table>
</div>
</div>
<script type="text/html" id="tableToolBar">
<div class="layui-btn-container">
<button class="layui-btn layui-icon layui-icon-add-1" lay-event="add">新增</button>
</div>
</script>
<!-- 表格基本操作按鈕 -->
<script type="text/html" id="table_operation">
<a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
</script>
<!--其他操作-->
<script type="text/html" id="other_operation">
</script>
<!-- 添加-編輯 彈出框模板 -->
<!-- 新增,編輯表單 -->
<script type="text/html" id="add_edit_layer">
<form class="layui-form" lay-filter="layer_form" id="layer_form" action="" style="width: 95%; margin: 10px auto;">
<div class="layui-form-item">
<label class="layui-form-label"><span style="color: red;">*</span> 字典名稱:</label>
<div class="layui-input-block">
<input type="text" name="name" lay-verify="required" lay-verType="tips"
placeholder="請輸入字典名稱" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><span style="color: red;">*</span> 字典類型:</label>
<div class="layui-input-block">
<input type="text" name="type" lay-verify="required" lay-verType="tips"
placeholder="請輸入字典類型" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><span style="color: red;">*</span> 字典碼:</label>
<div class="layui-input-block">
<input type="text" name="code" lay-verify="required" lay-verType="tips"
placeholder="請輸入字典碼" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><span style="color: red;">*</span> 字典值:</label>
<div class="layui-input-block">
<input type="text" name="value" lay-verify="required" lay-verType="tips"
placeholder="請輸入字典值" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">排序號:</label>
<div class="layui-input-block">
<input type="number" name="orderNum" lay-verify="number"
placeholder="請輸入排序號" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">備注:</label>
<div class="layui-input-block">
<input type="text" name="remark"
placeholder="請輸入備注" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item" id="form_btn">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="post_form">保存</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</script>
<!-- javascript 腳本 -->
<script src="../../statics/layui/layui.js"></script>
<script>
layui.config({
base: '../../statics/' //靜態資源所在路徑
}).extend({
index: 'lib/index' //主入口模塊
}).use(['index', 'table'], function () {
var table = layui.table;
var admin = layui.admin,
$ = layui.jquery,
table = layui.table,
form = layui.form,
layer = layui.layer;
var currentRow = {},
currentOpt = "",
saveUrl = "/sys/dict/save",
updateUrl = "/sys/dict/update",
deleteUrl = "/sys/dict/delete",
listUrl = "/sys/dict/list",
deleteId = "id",
layerIndex = 0;
$(function () {
// 查詢按鈕
$("#btn_search").on("click", function () {
table.reload('manage_table', {
where: {
dictName: $("#dictName").val(),
dictType: $("#dictType").val()
}
, page: {
curr: 1 //重新從第 1 頁開始
}
});
});
initTable();
admin.resize(function () {
table.resize("manage_table");
});
});
function initTable() {
// 初始化列表(表格)
table.render({
elem: '#manage_table'
, url: listUrl //數據接口
, method: "POST"
, page: true
, toolbar: '#tableToolBar'
, defaultToolbar: []
, cellMinWidth: 100
, cols: [
[ //表頭
{field: 'name', title: '字典名稱', align: 'center'}
, {field: 'type', title: '字典類型', align: 'center'}
, {field: 'code', title: '字典碼', align: 'center'}
, {field: 'value', title: '字典值', align: 'center'}
, {field: 'orderNum', title: '排序號', align: 'center'}
, {field: 'remark', title: '備注', align: 'center'}
, {
width: 165,
align: 'center',
title: '操作',
toolbar: '#table_operation',
fixed: 'right'
}
]
],
parseData: function (res) { //res 即為原始返回的數據
return {
"code": res.code == 200 ? 0 : res.code, //解析接口狀態
"msg": res.code == 200 ? "" : res.msg, //解析提示文本
"count": res.page ? res.page.totalCount : 0, //解析數據長度
"data": res.page ? res.page.list: {} //解析數據列表
};
}
});
// 綁定表格bar 按鈕事件
table.on('tool(manage_table)', function (obj) {
if (obj.event === 'edit') {
currentRow = obj.data;
currentOpt = updateUrl;
layerIndex = layer.open({
title: "修改",
type: 1,
area: admin.screen() < 2 ? ['80%', '300px'] : ['500px', '450px'],
shadeClose: true,
content: document.querySelector("#add_edit_layer").innerHTML
});
form.val('layer_form', currentRow);
form.render();
} else if (obj.event === 'del') {
layer.confirm('確認刪除該行嗎？', function (index) {
admin.req({
url: deleteUrl + "?ids=" + obj.data[deleteId],
type: 'GET',
done: function() {
layer.msg('刪除成功');
table.reload('manage_table');
}
});
layer.close(index)
})
}
});
//監聽新增事件
table.on('toolbar(manage_table)', function(obj){
if(obj.event == 'add') {
currentRow = {};
currentOpt = saveUrl;
layerIndex = layer.open({
title: '新增',
type: 1,
area: admin.screen() < 2 ? ['80%', '300px'] : ['500px', '450px'],
shadeClose: true,
content: document.querySelector("#add_edit_layer").innerHTML
});
document.getElementById("layer_form").reset();
form.render();
}
});
}
// 保存按鈕事件
form.on('submit(post_form)', function (data) {
var postData = Object.assign(currentRow, data.field);
for (var i in postData) { // 清除值為null的屬性
if (postData[i] === null) {
delete postData[i];
}
}
admin.req({
url: currentOpt,
type: 'POST',
data: JSON.stringify(postData),
contentType: 'application/json;charset=utf-8',
dataType: 'json',
done: function() {
table.reload('manage_table');
layer.msg('操作成功');
layer.close(layerIndex);
}
});
return false;
});
});
</script>
</body>
</html>
主要注意一下引進去的js跟css
還有自己寫得接口調用以及數據渲染的時候的值。