背景： 需要做一個列表頁，管理內部所有鏈接
思路：先用前端畫出列表頁，然后實現列表的功能
列表頁：layui自帶的方法渲染，不需要過多的HTML直接JS渲染
功能：新增、刪除、查看、編輯、搜索、分頁
功能實現：前端數據提供給后端處理，渲染返回結果
首先，上一段前端代碼，具體解析在頁面中有注釋
----- 更新數據庫提供下拉選項功能
{% extends 'lblb/basePage.html' %}
<head>
<meta charset="UTF-8">
</head>
<body>
{% block content %}
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend><p>動態添加列表頁面</p></legend>
</fieldset>
{#功能區： 搜索、新增#}
{#列表內容：刪除、修改 先完成列表內容部分，#}
{# 點擊新增按鈕，彈出一個彈窗#}
{# 填寫信息后，提交給后端，后端寫入數據庫，並且返回給前端#}
{# 前端每次刷新頁面都會請求到數據庫中的數據#}
<blockquote class="layui-elem-quote">
<div class="layui-row">
<form class="layui-form layui-col-md12 x-so" id="complain_search">
<div class="layui-col-md3">
ID:
<div class="layui-input-inline">
<input type="text" name="serviceCode" id="serviceCode"
placeholder="請輸入ID" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-col-md3">
環境:
<div class="layui-input-inline">
<select name="env" id="env">
<option value="">---請選擇---</option>
</select>
</div>
</div>
<div class="layui-col-md3">
服務端:
<div class="layui-input-inline">
<select name="serverType" id="serverType">
<option value="">---請選擇---</option>
</select>
</div>
</div>
<div class="layui-col-md3">
國家/地區:
<div class="layui-input-inline">
<select name="countryArea" id="area">
<option value="">---請選擇---</option>
</select>
</div>
<button id="search" class="layui-btn layui-btn-normal" lay-submit
lay-filter="linkSearch">
<i class="layui-icon"></i>
</button>
<input type="reset" class="layui-btn layui-btn-normal" value="重置">
</div>
</form>
</div>
<table class="layui-hide" id="linkTable" lay-filter="linkList"></table>
{# 列表頁實現，使用layui推薦的方法渲染#}
</blockquote>
<script type="text/html" id="add_event">
{# 功能按鈕，通過lay-event綁定 eg：lay-event="add_link"#}
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add_link"><i class="layui-icon">添加</i>
</button>
<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete_link">批量刪除</button>
</div>
</script>
<script type="text/html" id="optsBar">
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">查看</a>
<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/javascript">
layui.use(['table', 'layer', 'form', 'laypage'], function () {
var table = layui.table,
layer = layui.layer,
form = layui.form,
laypage = layui.laypage;
var tableIns = table.render({ // 列表頁渲染
id: "linkReload", //無所謂，需要需search聯動
elem: '#linkTable' //需要渲染的元素，表格元素
, url: '{% url "getLinkList" %}' //渲染的數據源，由接口提供
, page: true // 開啟分頁功能
, method: 'get'
, height: 550 //固定表格高度，超過，則顯示scroll
, toolbar: '#add_event' //新增設置為toolbar
, limit: 10 //默認每頁10條
, limits: [5, 10, 20, 30] // 分頁選項
, even: true //設置隔行背景
, response: {
// 后端數據格式， 接口返回數據
statusName: 'code',
msgName: 'msg',
statusCode: 200,
dataName: 'data',
countName: 'count',
}
, request: {
//前端請求參數；數據傳給后端接口處理
pageName: 'page',
limitName: 'size'
}
, cols: [
// 表格數據
[
{checkbox: true}//開啟多選框
, {
field: 'id', width: 150, title: 'ID', templet: function (data) {
return data.LAY_INDEX
}
}
, {
field: 'env', width: 150, title: '環境', templet: function (data) {
if (data.env == "正式環境") {
return '<span style="color: #D03948;">正式環境</span>';
} else if (data.env == "P環境") {
return '<span style="color: #18A4D0;">P環境</span>';
} else if (data.env == "測試環境") {
return '<span style="color: #5CD03F;">測試環境</span>';
}
}
}
, {
field: 'server', width: 150, title: '服務端', templet: function (data) {
return '<span>' + data.server + '</span>'
}
}
, {
field: 'area', width: 150, title: '國家/地區', templet: function (data) {
return '<span>' + data.area + '</span>'
}
}
, { // , edit: 'text' 開啟單元格編輯
field: 'link_details', width: 300, title: 'linkUrl', templet: function (data) {
return '<a href="' + data.link_details + '" target="_blank"><u style="color: #0000FF;">' + data.link_details + '</u></a>';
}
}
, {fixed: 'right', title: '操作', toolbar: '#optsBar'}
]
]
});
$.ajax({
{# ajax請求searchEnvApi接口，返回對應的下來選項，在前端下拉框中顯示 #}
type: "get",
url: "{% url 'searchEnvApi' %}",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
for (let index = 0; index < data.data.length; index++) {
let dataTemp = data.data[index];
if (dataTemp.value == "env") {
$("#env").append(new Option(dataTemp.descriptions));
} else if (dataTemp.value == "server") {
$("#serverType").append(new Option(dataTemp.descriptions))
} else if (dataTemp.value == "area") {
$("#area").append(new Option(dataTemp.descriptions))
}
}
form.render();
}
});
table.on('toolbar(linkList)', function (obj) {
var checkStatus = table.checkStatus(obj.config.id),
data = checkStatus.data;
data = eval("(" + JSON.stringify(data) + ")");
switch (obj.event) {
case 'add_link': // lay-event自定義的新增按鈕toolbar事件
layer.open({
type: 2,
title: "新增地址鏈接操作",
area: ['450px', '800px'],
fix: false,
maxmin: true,
shadeClose: true,
shade: 0.4,
{#skin: 'layui-layer-normal',#}
skin: 'layui-layer-rim',
content: ["{% url 'addLink' %}", "no"], // 新增鏈接，窗口頁面
btn: ['提交', '取消'],
yes: function (index, layero) {
// 從iframe中拿到data，獲取post數據
var json_data = $(layero).find("iframe")[0].contentWindow.callbackdata();
$.ajax({
url: "{% url 'addLinkApi' %}", // 新增鏈接窗口中的數據處理
type: "post",
datatype: "json",
data: json_data,
async: false,
cache: true,
success: function () {
// 刷新太快了，新增接口，network中沒有返回數據
window.location.reload();
}
});
layer.close(index);
}
});
break;
case 'delete_link':
// 獲取勾選了的CheckBox對應的id->vals里面
var vals = new Array();
$("td .layui-form-checked").parents("tr").children('[data-field=id]').each(function () {
vals.push($(this).text());
console.log(vals);
});
if (vals.length == 0) { // 未勾選時，提示
layer.open({
title: "提示"
, content: "請選擇需要刪除的數據"
});
return false
}
layer.confirm("確定要全部刪除嗎？", {
btn: ["確定", "取消"],
yes: function (index) {
var vals = new Array();
$("td .layui-form-checked").parents("tr").children('[data-field=id]').each(function () {
vals.push($(this).attr("data-content"));
console.log(vals);
});
$.ajax({
url: "{% url 'deleteLinkMore' %}" // 批量刪除接口
, type: "post"
, data: JSON.stringify({
"vals": vals
})
, datatype: "json"
, success: function () {
parent.location.reload() // 刪除成功后刷新頁面
}
})
},
});
}
;
});
table.on('tool(linkList)', function (obj) {
// 獲取tool行數據，這里用來提供數據
var data = obj.data;
var json = JSON.stringify(data);
switch (obj.event) {
case 'detail':
console.log("鏈接詳情");
var oldValues = []; // 存儲當前行數據
$.each(data, function (key, value) {
if (key != 'id') {
oldValues.push(value);
}
});
var index = layer.open({
type: 2,
title: "鏈接詳情頁面",
area: ['450px', '800px'],
fix: false,
maxmin: true,
shadeClose: true,
{#value: {"env": json.env},#}
shade: 0.4,
skin: 'layui-layer-rim',
content: ["{% url 'linkRead' %}", "no"], // 鏈接詳情頁
success: function (layero, index) {
// 將列表頁中選中行的數據oldValues，注入到iframe頁面中對應的input框里
var body = layer.getChildFrame('body', index);
var iframeWindow = $(layero).find("iframe")[0].contentWindow; // 獲取當前iframe頁面
var inputList = body.find("input");
console.log(inputList, "inputlist")
for (var i = 0; i < inputList.length; i++) {
$(inputList[i]).val(oldValues[i])
}
console.log(inputList)
}
});
break;
case 'edit':
console.log("編輯鏈接")
var field = obj.field
, data = obj.data;
console.log(1, data)
var oldValues = [];
$.each(data, function (name, value) { // 獲取編輯行的原始數據
oldValues.push(value);
});
console.log(2, oldValues);
var index = layer.open({
type: 2,
title: "編輯鏈接頁面",
area: ['450px', '800px'],
fix: false,
maxmin: true,
shadeClose: true,
shade: 0.4,
skin: 'layui-layer-rim',
btn: ["編輯", "取消"],
content: ["{% url 'linkEdit' %}", "no"],
yes: function (index, layero) {
// 將data傳到編輯頁面，然后，編輯頁面將對應的id和修改后的數據一同傳給后端
{#$('[lay-value="CA"]').click()#}
let json_data = $(layero).find("iframe")[0].contentWindow.callbackEditData(data);
console.log(5, json_data);
{#pause#}
$.ajax({
url: "{% url 'editLinkApi' %}" // 處理編輯數據，這里與查看不一樣
, type: "post"
, async: false
, cache: false
, data: json_data
, dataType: "json"
, success: function (data) {
location.reload()
}
});
layer.close(index);
},
success: function (layero, index) {
var body = layer.getChildFrame('body', index); // 獲取當前iframe頁面的body
var iframeWindow = $(layero).find("iframe")[0].contentWindow; // 獲取當前iframe頁面
var inputList = body.find('input');
for (var i = 0; i < inputList.length; i++) {
$(inputList[i]).attr("value", oldValues[i + 1]); //遍歷子窗口的input標簽，將之前數組中的值一次放入顯示
{#$(inputList[i]).val(oldValues[i + 1]); //遍歷子窗口的input標簽，將之前數組中的值一次放入顯示#}
}
}
});
break;
case 'del':
var delIndex = layer.confirm('真的刪除id為' + data.id + "的信息嗎?", function (delIndex) {
$.ajax({
url: '{% url "deleteLink" %}' + data.id, // 單個刪除，By_id
type: "post",
success: function (suc) {
if (suc.code == 200) {
{#obj.del(); //刪除對應行（tr）的DOM結構，並更新緩存#}
layer.msg("刪除成功", {
icon: 1
});
window.location.reload()
} else {
layer.msg("刪除失敗", {
icon: 5
});
}
}
});
layer.close(delIndex);
});
break;
}
});
form.render();
form.on('submit(linkSearch)', function (data) {
// 查詢， 獲取表單數據
var formData = data.field;
var id = formData.serviceCode,
env = formData.env,
server = formData.serverType,
area = formData.countryArea;
table.reload('linkReload', {
page: {
curr: 1
},
where: { // 查詢條件
id: id,
env: env,
server: server,
area: area
},
method: 'post',
contentType: "application/json;charset=utf-8",
url: '{% url "searchLink" %}', // 后端處理
});
return false;
});
});
</script>
{% endblock %}
</body>