編輯數據表格的某條數據，彈框數據回顯功能。具體實現挺簡單，先給出代碼，下面是整個HTML頁面代碼，覺得繁瑣的可以直接跳過到後面，我會按步驟講解數據回顯功能該如何實現。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>文章類別</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
<script type="text/javascript" charset="utf-8" src="static/js/jquery-3.4.1.min.js"></script>
</head>
<body>
<%--top--%>
<div class="top">
<div><strong>分類管理</strong></div>
<div>
<button class="add_category" style="margin-top: 5px">添加分類</button>
</div>
</div>
<%--類別展示--%>
<table class="layui-hide" id="test" lay-filter="test"></table>
<%--添加類別--%>
<form id="addForm" method="post" hidden = "hidden">
<div style="margin:15px 5px 10px 5px"> 類別：<input type="text" id="category"></div>
<div style="margin:15px 5px 10px 5px"> 備註：<input type="text" height="30px" id="annotation" maxlength="100"></div>
</form>
<%--選定條目，編輯已有數據--%>
<form id="editForm" method="post" hidden = "hidden">
<div style="margin:15px 5px 10px 5px"> 類別：<input type="text" id="edit_category"></div>
<div style="margin:15px 5px 10px 5px"> 備註：<input type="text" height="30px" id="edit_annotation" maxlength="100"></div>
</form>
<script>
layui.use('table', function () {
var table = layui.table;
table.render({
elem: '#test'
, url: '/blog/category'
, cols: [[{field: 'id', title: 'ID',templet: '#index',width:40}
,{field: 'leibie', title: '類別'}
, {field: 'time', title: '創建時間'}
, {field: 'annotation', title: '備註'}
, {field: 'delete', title: '操作', toolbar: '#barDemo', align: 'center'}
]]
, parseData: function (res) { //res 即爲原始返回的數據
console.log(res.total)
return {
"code": 0, //解析接口狀態
"msg": "", //解析提示文本
"count": res.total, //解析數據長度
"data": res //解析數據列表
};
}
, page: true
});
/*操作已有類別條目*/
table.on('tool(test)', function (obj) { //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應的值"
var data = obj.data; //獲得當前行數據
var layEvent = obj.event; //獲得 lay-event 對應的值（也可以是表頭的 event 參數對應的值）
var tr = obj.tr; //獲得當前行 tr 的DOM對象
var jsonData = JSON.stringify(data);
if (layEvent === 'del') { //刪除
console.log("刪除")
layer.confirm('是否刪除該分類?', {icon: 3, title:'提示'}, function(index){
//do something
$.ajax({
type: "post",
url: "/blog/delCategory",
data: jsonData,
dataType: "json",
contentType: "application/json",
success: function(result){
}
});
layer.close(index);
window.location.reload();
});
} else if (layEvent === 'edit') { //編輯
//do something
layer.open({
title : '編輯分類',
type : 1,
/*area : [ '62%', '80%' ],*/
maxmin : true,
shadeClose : true,
content : $('#editForm'),
btn: ['確定', '取消'],
shade: [0.8, '#393D49'],
success : function(layero, index) {
$("#edit_category").val(data.leibie);
$("#edit_annotation").val(data.annotation);
},
btn1:function(index,layero){
$
}
});
//同步更新緩存對應的值
obj.update({
username: '123'
, title: 'xxx'
});
}
});
});
</script>
<script type="text/html" id="barDemo">
<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="index">
{{d.LAY_TABLE_INDEX+1}}
</script>
<script>
/*添加分類*/
$(".add_category").click(function () {
layer.open({
type: 1,
title: '添加分類'
, content: $("#addForm"),
btn: ['確定', '取消'],
shade: [0.8, '#393D49'],
btn1: function (index, layero) {
//按鈕【按鈕一】的回調
var params = {"category": $("#category").val(), "annotation": $("#annotation").val()}
if($("#category").val() ===''){
layer.msg("類別不能爲空！！");
}else{
$.ajax({
type: "POST",
url: "/blog/addCategory",
data: JSON.stringify(params),
dataType: "json",
contentType: "application/json",
success: function (respMsg) {
console.log(respMsg)
if (respMsg == "1") {
layer.closeAll();
layer.msg('添加成功', {
icon: 1,
time: 2000 //2秒關閉（如果不配置，默認是3秒）
});
window.location.reload();
} else {
layer.msg('添加失敗', {
icon: 3,
time: 2000 //2秒關閉（如果不配置，默認是3秒）
});
}
}
});
}
}
});
})
</script>
</body>
</html>
具體實現思路：
1.首先肯定要實現圖一的頁面，這裏就不講述了。使用監聽行工具事件即可。（可百度）
2.點擊“編輯”按鈕，要彈出編輯框。在編輯框上回顯數據
<%--選定條目，編輯已有數據--%>
<form id="editForm" method="post" hidden = "hidden">
<div style="margin:15px 5px 10px 5px"> 類別：<input type="text" id="edit_category"></div>
<div style="margin:15px 5px 10px 5px"> 備註：<input type="text" height="30px" id="edit_annotation" maxlength="100"></div>
</form>
從下圖備註爲“編輯”那行開始看，我先用layer彈層，彈出一個編輯框即“editForm”，編輯框格式如上圖代碼。
其次，對編輯框“editForm”裏面的input元素進行賦值。採用$("..").val(..)方法賦值。
$("#edit_category").val(data.leibie); data代表當前編輯行的數據，data.leibie是渲染數據表格中的對應列（看最後一張圖）。
完成數據回顯功能。
/*操作已有類別條目*/
table.on('tool(test)', function (obj) { //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應的值"
var data = obj.data; //獲得當前行數據
var layEvent = obj.event; //獲得 lay-event 對應的值（也可以是表頭的 event 參數對應的值）
var tr = obj.tr; //獲得當前行 tr 的DOM對象
var jsonData = JSON.stringify(data);
if (layEvent === 'del') { //刪除
console.log("刪除")
layer.confirm('是否刪除該分類?', {icon: 3, title:'提示'}, function(index){
//do something
$.ajax({
type: "post",
url: "/blog/delCategory",
data: jsonData,
dataType: "json",
contentType: "application/json",
success: function(result){
}
});
layer.close(index);
window.location.reload();
});
} else if (layEvent === 'edit') { //編輯
//do something
layer.open({
title : '編輯分類',
type : 1,
/*area : [ '62%', '80%' ],*/
maxmin : true,
shadeClose : true,
content : $('#editForm'),
btn: ['確定', '取消'],
shade: [0.8, '#393D49'],
success : function(layero, index) {
$("#edit_category").val(data.leibie);
$("#edit_annotation").val(data.annotation);
},
btn1:function(index,layero){
}
});
table.render({
elem: '#test'
, url: '/blog/category'
, cols: [[{field: 'id', title: 'ID',templet: '#index',width:40}
,{field: 'leibie', title: '類別'}
, {field: 'time', title: '創建時間'}
, {field: 'annotation', title: '備註'}
, {field: 'delete', title: '操作', toolbar: '#barDemo', align: 'center'}
]]
, parseData: function (res) { //res 即爲原始返回的數據
console.log(res.total)
return {
"code": 0, //解析接口狀態
"msg": "", //解析提示文本
"count": res.total, //解析數據長度
"data": res //解析數據列表
};
}
, page: true
});