背景： 需要做一个列表页，管理内部所有链接
思路：先用前端画出列表页，然后实现列表的功能
列表页：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', 150, title: 'ID', templet: function (data) {
return data.LAY_INDEX
}
}
, {
field: 'env', 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', 150, title: '服务端', templet: function (data) {
return '<span>' + data.server + '</span>'
}
}
, {
field: 'area', 150, title: '国家/地区', templet: function (data) {
return '<span>' + data.area + '</span>'
}
}
, { // , edit: 'text' 开启单元格编辑
field: 'link_details', 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>