layui實作動態表格
- 需求說明
- 介面說明
- 前端代碼
需求說明
點擊不同的模型，進入同一個html中，表格頭和表格體的資料都是從后臺查詢，實作動態表格，
介面說明
- 查詢表格頭的介面 findTableHead
介面回傳資料格式示例：
{
"success":"true",
"result":[{"id":"id"，"name","ID"},{"id":"aaa"，"name","姓名"},{"id":"bbb"，"name","性別"},{"id":"time"，"name","時間"}]
}
- 查詢表格資料的介面 findTableData
介面回傳資料格式示例：
{
"success":"true",
"result":{
"currentPage": 1,
"pageSize": 10,
"totalPage": 1,
"totalSize": 22,
"list": [{
"id": "1",
"aaa": "張三",
"bbb": "男",
"time": "2021-02-20 11:00:02"
},{
"id": "2",
"aaa": "李莉",
"bbb": "女",
"time": "2021-02-20 11:05:02"
}]
}
}
前端代碼
- HTML代碼
<table class="layui-hide" id="layTable" lay-filter="test"></table>
- JS代碼
var cols_arr = [] ; //存盤表格頭的陣列
var table=null;
layui.use('table', function(){
table = layui.table;
//查詢表格頭資料
var modelId = $("#modelId").val();
$.ajax({
async: false, //關閉異步請求，加載完成表格頭之后，再加載表格資料
type : "POST",//方法型別
dataType : "json",//預期服務器回傳的資料型別
url : '/findTableHead.do?modelId =' + modelId ,
data : {"modelId":modelId},
success : function(result) {
//console.log(result);//列印服務端回傳的資料(除錯用)
//填充表格頭陣列
if (result.success) {
var data = JSON.parse(result.result);
cols_arr[0] = [];
cols_arr[0][0] = {checkbox: true, fixed: true};
for(var i=0; i<data.length; i++){
if(data[i].name == 'id') {
cols_arr[0][i+1] = {field: data[i].id , title: data[i].name, align: 'center',hide:true}; //隱藏id列
} else if(i == 1){
//增加超鏈接
var id = data[i].id;
cols_arr[0][i+1] = {field: data[i].id , title: data[i].name, align: 'center',templet: function(d){
return "<div><a href='/detail.do?id=" + eval("d.id") + "' class='layui-table-link'>" + eval("d."+id) +"</a></div>";
}};
}else {
cols_arr[0][i+1] = {field: data[i].id , title: data[i].name, align: 'center'};
}
}
}
}
});
//填充表格資料
table.render({
elem: '#layTable',
url:"/findTableData.do?modelId =" + modelId ,
toolbar: '#toolbarDemo', //開啟頭部工具列，并為其系結左側模板
defaultToolbar: ['filter', ],
title: '用戶資料表' ,
cols: cols_arr //填充表格頭資料,
page: true , //開啟分頁
id: 'testTable', //表格id
parseData:function(result) {
var data = JSON.parse(result.result);
//console.log(data.list );
return {
"code" : 0, // 回傳正確的狀態碼是0
"msg" : "",
"count" : data.totalSize,
"data": data.list
}
}
});
});
//重新加載表格
function reloadByKeyword(){
table.reload('testTable', {
page: {
curr: 1 //重新從第 1 頁開始
},
request: {
pageName: 'page', //頁碼的引數名稱，默認:page
limitName: 'limit'//每頁資料量的引數名，默認:limit
},
where: {
keyword: $('#demoInput').val() //可傳參查詢的引數
}
});
}
//獲取表格中的值
function batchDel() {
var data = table.checkStatus('testTable').data;
var ids = "";
for(var i = 0; i < data.length;i++) {
ids += data[i].id + ",";
}
alert(ids);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/262941.html
標籤：其他
上一篇：[css] 如何實作換膚功能？