最近抽空總結(jié)了下layui中table表格的相關(guān)配置，解釋的比較全面，可供大家參考，頁面效果如下：

table表格.png

table表格html部分：

新增

備注

編輯

table表格渲染js (包含分頁器及返回數(shù)據(jù)處理等):

table.render({

elem: '#table-data-list' //table標(biāo)簽id

, url: layui.setter.server.xmh + '/productList'//table數(shù)據(jù)請求地址

, method: "post"//請求方式

, toolbar: '#table-data-list-toolbar-top' //table上方的工具條id

, defaultToolbar: ['filter'] //table工具條默認三個值['filter','print','exports'],過濾，打印，導(dǎo)出

, contentType: 'application/json'//請求頭設(shè)置數(shù)據(jù)類型，否則默認為application/x-www-form-urlencoded

, page: true //開啟分頁器

, request: {

pageName: 'page' //頁碼字段，默認：page

,limitName: 'size' //每頁數(shù)據(jù)量字段，默認：limit

}

, parseData: function (res) { //res 即為原始返回的數(shù)據(jù)

return {

"code": res.code, //解析接口狀態(tài)

"count": res.data.totalElements, //解析表格數(shù)據(jù)總條數(shù) eg:共100頁

"data": res.data.list//解析table表格數(shù)據(jù)源

};

}

, where: { "productName": "" }//where用來傳遞請求時額外的參數(shù) eg:productName

, cols: [[

{ type: 'numbers', title: '序號' }

, { field: 'recommendGoods', title: '推薦商品' }//field對應(yīng)后端返回的字段

, { field: 'imgUrl', title: '圖片', templet: '

' } //可在此處修改每列dom，其中d為后端返的每行對象

, { field: 'price', title: '價格', templet: function (d) {//對每列數(shù)據(jù)進行處理后展示

if (d.price.indexOf('￥') > -1) {

const num = d.price.split('￥')[1] * 1

return '￥' + num.toFixed(2)

} else {

return d.price

}

}

}

, { type: 'checkbox'}//復(fù)選框，type為radio時即單選框

, { title: '操作', toolbar: '#table-data-list-toolbar' }//操作列的id

]]

, response: {

statusCode: 200 //重新規(guī)定成功的狀態(tài)碼為 200，table 組件默認為 0

}

, limit: 10//默認每頁條數(shù)

, limits: [10, 15, 20, 25, 30]//每頁可展示條數(shù)選項

, text: '對不起，加載出現(xiàn)異常！'

, done: function (res) {//此res為上述parseData對應(yīng)的函數(shù)解析完初始返回值構(gòu)成的對象

$("[data-field='price']").css('display','none');//隱藏某列eg：價格

//若要修改工具欄初始化的值eg：添加button后的“備注”，可在此回調(diào)函數(shù)內(nèi)獲取dom修改

if (!res.data || res.data.length == 0) {

$(".layui-none").html("未查詢到數(shù)據(jù)");//后臺查詢數(shù)據(jù)為空時，table默認展示內(nèi)容

}

}

}

});

table表格操作列事件：

table.on('tool(test)', function (obj) {//test為table標(biāo)簽中l(wèi)ay-filter的值

var data = obj.data;

if (obj.event === 'edit') {

edit(data);//自定義edit函數(shù)，并在函數(shù)中打開彈框，見下篇

}

});

function edit(data){

layer.open({

type: 2 //值有：0(信息框，默認)1(頁面層)2(iframe層)3(加載層)4(tips層)。 若采用layer.open({type: 1})方式調(diào)用，則type為必填項(信息框除外)

, title: '編輯'

, content: 'baby-recommend-edit.html'

, area: ['538px', '435px']

, btn: ['確定', '取消']

, yes: function (index, layero) {

}

, success: function (layero, index) {

var body = layer.getChildFrame('body', index);

body.find(".layui-form input[name='id']").val(data.id);

body.find(".layui-form input[name='recommendGoods']").val(data.recommendGoods);

}

});

}

總結(jié)

以上是生活随笔為你收集整理的layui table 添加img_layui中table表格的基本操作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。