编辑数据表格的某条数据，弹框数据回显功能。具体实现挺简单，先给出代码，下面是整个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
});
1433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
