快速使用

添加

刪除

編輯

查看

編輯

刪除

layui.use(['table'], function () {

table.render({

elem: '#demo'

,url: 'url'//表格數(shù)據(jù)接口

,toolbar: '#toolbarDemo' //開啟頭部工具欄，并為其綁定左側(cè)模板

,page:true//開啟分頁

,loading:true//顯示加載條

,cols: [

[

{type: 'checkbox', fixed: 'left'}

,{field:'id', title:'ID', fixed: 'left',hide:'true'}

,{field:'desc', title:'描述',align:'center'}

,{field:'type', title:'類型',align:'center'}

,{field:'hard', title:'難度',align:'center'}

,{fixed: 'right', title:'操作', toolbar: '#barDemo',align:"center"}

]

]

,limit:10

,limits:[10,15,20,30]

});

}

table組件規(guī)定的數(shù)據(jù)格式：

{

"code": 0,

"msg": "",

"count": 1000,//數(shù)據(jù)數(shù)量

"data": [{}, {}]//數(shù)據(jù)實(shí)體

}

表格重載

table.reload("demo",{

url:'url',

page:{

curr:1

}

})

自定義模板

table.render({

cols: [[

{field:'title', title: '文章標(biāo)題', width: 200

,templet: function(d){

//d.id,d.title:是動態(tài)內(nèi)容，它對應(yīng)數(shù)據(jù)接口返回的字段名

//可以在此處編寫具體的邏輯實(shí)現(xiàn)一些控件的動態(tài)變化

return 'ID：'+ d.id +'，標(biāo)題：'+ d.title +''

}

}

,{field:'id', title:'ID', width:100}

]]

});

分頁實(shí)現(xiàn)

Layui在初始化表格數(shù)據(jù)時，會在url的后面附帶分頁的page和limit參數(shù)：

所以在后臺編寫接口時要接收這兩個參數(shù)并編寫相應(yīng)的分頁查詢

搜索實(shí)現(xiàn)

搜索的實(shí)質(zhì)是表格的重載：

// 監(jiān)聽搜索操作按鈕

form.on('submit(data-search-btn)', function (data) {

//執(zhí)行搜索重載

table.reload('paperTable', {

page: {//重新從第 1 頁開始

curr: 1

}

, where: {//設(shè)定異步數(shù)據(jù)接口的額外參數(shù)

searchId:data.field.searchId,//表單內(nèi)的輸入框，name：searchId

searchName:data.field.searchName//表單內(nèi)的輸入框,name:searchName

}

}, 'data');

return false;

});

點(diǎn)擊搜索按鈕后，異步數(shù)據(jù)接口url為：

事件監(jiān)聽

監(jiān)聽頭工具欄

table.on('toolbar(demo)', function(obj){//demo為表格lay-filter的值

var checkStatus = table.checkStatus(obj.config.id);

switch(obj.event){

case 'add':

layer.msg('添加');

break;

case 'delete':

layer.msg('刪除');

break;

case 'update':

layer.msg('編輯');

break;

};

});

監(jiān)聽checkbox

table.on('checkbox(demo)', function(obj){

console.log(obj.checked); //當(dāng)前是否選中狀態(tài)

console.log(obj.data); //選中行的相關(guān)數(shù)據(jù)

console.log(obj.type); //如果觸發(fā)的是全選，則為：all，如果觸發(fā)的是單選，則為：one

});

監(jiān)聽單元格編輯

//注：edit是固定事件名，demo是table原始容器的屬性 lay-filter="對應(yīng)的值"

table.on('edit(demo)', function(obj){

console.log(obj.value); //得到修改后的值

console.log(obj.field); //當(dāng)前編輯的字段名

console.log(obj.data); //所在行的所有相關(guān)數(shù)據(jù)

});

監(jiān)聽行單雙擊事件

//監(jiān)聽行單擊事件

table.on('row(test)', function(obj){

console.log(obj.tr) //得到當(dāng)前行元素對象

console.log(obj.data) //得到當(dāng)前行數(shù)據(jù)

//obj.del(); //刪除當(dāng)前行

//obj.update(fields) //修改當(dāng)前行數(shù)據(jù)

});

//監(jiān)聽行雙擊事件

table.on('rowDouble(test)', function(obj){

//obj 同上

});

監(jiān)聽工具條

//注：tool 是工具條事件名，test 是 table 原始容器的屬性 lay-filter="對應(yīng)的值"

table.on('tool(test)', function(obj){

var data = obj.data; //獲得當(dāng)前行數(shù)據(jù)

var layEvent = obj.event; //獲得 lay-event 對應(yīng)的值(也可以是表頭的 event 參數(shù)對應(yīng)的值)

var tr = obj.tr; //獲得當(dāng)前行 tr 的 DOM 對象(如果有的話)

if(layEvent === 'detail'){ //查看

//do somehing

} else if(layEvent === 'del'){ //刪除

//do somehing

} else if(layEvent === 'edit'){ //編輯

//do something

}

});

總結(jié)

以上是生活随笔為你收集整理的layui常用的表单标签_Layui常用组件：表格（table）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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