在數據表格中行工具欄一般都會有編輯的功能的，那這個點擊編輯信息的按鈕，需要的效果就是將數據進行回顯，然后在回顯的基礎上在進行修改，最后修改好了，因為都是在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中的方法
}