在数据表格中行工具栏一般都会有编辑的功能的，那这个点击编辑信息的按钮，需要的效果就是将数据进行回显，然后在回显的基础上在进行修改，最后修改好了，因为都是在form表单中，所以最后from表单提交给后台处理。
那这个数据的回显功能如何实现呢？
一般情况下都是设置一个功能用于根据id查询数据库中的所有的相关数据，但是现在在layui前端框架中，数据的回显功能就变得十分容易，只需要遵循人家封装好的方法即可。那就看看吧！
最终效果图：
会看到数据表格中的数据有的，所以功能实现了。下来上代码：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table模块快速使用</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all">
</head>
<body>
<%-- 搜索区域的设计 --%>
<form class="layui-form" action="">
<div class="layui-form-item" style="margin-top: 30px">
<label class="layui-form-label">输入关键字</label>
<div class="layui-input-inline">
<input type="text" name="title" style="width: 450px" required lay-verify="required" placeholder="请输入关键字搜索..." autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择年级</label>
<div class="layui-input-inline">
<select name="studentType" lay-verify="required">
<option value="">请选择...</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="doSearch">立即搜索</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<!-- 表头工具栏 -->
<script type="text/html" id="headbar">
<a class="layui-btn layui-btn-xs" lay-event="add"><i class="layui-icon layui-icon-file">新增学生</i></a>
<a class="layui-btn layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-edit">批量删除</i></a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete">批量导入</i></a>
</script>
<%--数据表格主体--%>
<table id="demo" lay-filter="test"></table>
<!-- 表行工具栏 -->
<script type="text/html" id="hangbar">
<a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit">编辑</i></a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete"><i class="layui-icon layui-icon-delete">删除</i></a>
</script>
<%--添加学生和修改学生信息的弹出层--%>
<div id="addorupdatestudentpage" style="display: none">
<form class="layui-form" action="" lay-filter="dataPage">
<div class="layui-form-item" style="margin-top: 30px">
<label class="layui-form-label">学号：</label>
<div class="layui-input-block">
<input type="text" name="studentID" style="width: 450px" required lay-verify="required" placeholder="请输入学号..." autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item" style="margin-top: 30px">
<label class="layui-form-label">姓名：</label>
<div class="layui-input-block">
<input type="text" name="studentName" style="width: 450px" required lay-verify="required" placeholder="请输入姓名..." autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item" style="margin-top: 30px">
<label class="layui-form-label">性别：</label>
<div class="layui-input-block">
<input type="text" name="studentSex" style="width: 450px" required lay-verify="required" placeholder="请输入性别..." autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item" style="margin-top: 30px">
<label class="layui-form-label">手机号：</label>
<div class="layui-input-block">
<input type="text" name="studentPhone" style="width: 450px" required lay-verify="required" placeholder="请输入手机号..." autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item" style="margin-top: 30px">
<label class="layui-form-label">地址：</label>
<div class="layui-input-block">
<input type="text" name="studentAddress" style="width: 450px" required lay-verify="required" placeholder="请输入地址..." autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item" style="margin-top: 30px">
<label class="layui-form-label">专业：</label>
<div class="layui-input-block">
<input type="text" name="studentProfession" style="width: 450px" required lay-verify="required" placeholder="请输入专业..." autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item" style="margin-top: 30px">
<label class="layui-form-label">年级：</label>
<div class="layui-input-block">
<input type="text" name="studentGrade" style="width: 450px" required lay-verify="required" placeholder="请输入年级..." autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="doSearch">立即搜索</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script>
layui.use(['table','form','layer'], function(){
var table = layui.table;
var form = layui.form;
var $ = layui.$;
var layer = layui.layer;
//第一个实例
table.render({
elem: '#demo'
,height: 380
,url: '/admin/splitByMap' //数据接口
,page: true //开启分页
,toolbar:"#headbar"
,limit:6
,limits:[10,15,20,30,40,50,100]
,cols: [[ //表头
{type:"checkbox",width: 80} //设置复选框
,{field: 'studentID', title: '学号', width:140,align:"center"}
,{field: 'studentName', title: '姓名', width:140,align:"center"}
,{field: 'studentSex', title: '性别', width:140,align:"center"}
,{field: 'studentPhone', title: '手机号', width:140,align:"center"}
,{field: 'studentAddress', title: '地址', width:140,align:"center"}
,{field: 'studentProfession', title: '专业', width:140,align:"center"}
,{field: 'studentGrade', title: '年级', width:140,align:"center"}
,{title: '年级',toolbar:'#hangbar', width:160,align:"center"}
]]
});
//监听根据条件查询数据----表单提交事件
form.on("submit(doSearch)",function (data) {
tableIns.reload({
where: { //设定异步数据接口的额外参数，任意设
url: "/admin/splitByMap"
,where: data.field //查询条件
}
,page: {
curr: 1 //重新从第 1 页开始
}
});
//实现禁止刷新页面
return false;
});
//发送异步Ajax请求查询账单类型
$.get("/admin/listType",function (result) {
console.log(result);
var html = "";
for (let i = 0; i < result.length; i++) {
html += "<option value=' "+ result[i].id +"'>" + result[i].studentType + "</option>";
}
//将网页代码追加到下拉列表中
$("[name='studentType']").append(html);
//更新渲染select下拉框
form.render("select");
},"json");
//监听数据头部工具栏的按钮
table.on("toolbar(test)",function (obj) {
switch (obj.event) {
//添加学生页面
case 'add':
openAddStudentPage();
break;
}
})
/**
* 点击添加学生按钮显示弹出层的函数实现
*/
function openAddStudentPage() {
layer.open({
type:1,//页面类型 1位页面层
area:['600px','500px'],
title:"添加学生页面",
content:$("#addorupdatestudentpage")
});
}
//监听数据表行工具栏
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对象
if(layEvent === 'detail'){ //查看
//do somehing，现在还有没有此接口，预留以备使用
} else if(layEvent === 'delete'){ //删除
layer.confirm('真的删除行么', function(index){ obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index); //向服务端发送删除指令
}); } else if(layEvent === 'edit'){ //编辑
//do something
// console.log(obj.data);//得到当前行的所有的相关数据
openUpdateStudentPage(data); //同步更新缓存对应的值
obj.update({ username: '123' ,title: 'xxx' }); } }); function openUpdateStudentPage(data) { layer.open({ type:1, area:['600px','500px'], title:'修改学生页面', content:$('#addorupdatestudentpage'), success:function () { //表单数据回显 form.val("dataPage",data); } }); }
});
</script>
</body>
</html>
对数据行工具栏的监听，在layui框架中都是有的：
//监听数据表行工具栏 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对象 if(layEvent === 'detail'){ //查看 //do somehing，现在还有没有此接口，预留以备使用 } else if(layEvent === 'delete'){ //删除 layer.confirm('真的删除行么', function(index){ obj.del(); //删除对应行（tr）的DOM结构，并更新缓存 layer.close(index); //向服务端发送删除指令 }); } else if(layEvent === 'edit'){ //编辑 //do something // console.log(obj.data);//得到当前行的所有的相关数据 openUpdateStudentPage(data); //同步更新缓存对应的值 obj.update({ username: '123' ,title: 'xxx' }); } });
在点击编辑后，会执行这个函数，将data数据作为参数传递进行传递，而data数据是当前行的所有的相关信息，所以，赋参数的作用其实也是将当前行的数据信息，赋值弹出层的每一个文本框中，同时要特别注意一点，就是在给文本赋值时是会根据name值进行对应赋值的，所以一定要注意，当然我上面也标注了红色。
执行openUpdateStudentPage(data)函数
function openUpdateStudentPage(data) { // 传递进来的当前行的所欲相关信息 layer.open({ type:1, area:['600px','500px'], title:'修改学生页面', content:$('#addorupdatestudentpage'), success:function () { //表单数据回显 form.val("dataPage",data); // 这个函数就是数据回显的核心 会发现是有两个参数的，一个是绑定的上面的数据表格弹出层的lay-filter的；一个数数据data
作用就是将data中的所有信息根据name绑定给每一个文本域 } }); }
<form class="layui-form" action="" lay-filter="dataPage">
数据清除功能：指的是弹出层中的数据清除，在点击弹出层后，你在里面输入值后关闭它，在此打开的时候，里面还是会有你填入的数据信息的，所以我们可以实现当再次点击打开弹出层时就没有数据。
success:function() {
//清除表单数据
$("#dataPage")[0].reset();//javascript中的方法
}