表格js

function getTable() {

var table = layui.table //表格

var username=$("#username").val();

//執行一個 table 實例

table.render({

elem: '#demo'

,where: {'username':username}//傳值

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

,height: 420

,url: '${path}/sys/admin/getAllUser' //數據接口

,title: '用戶表'

,page: true //開啟分頁

,toolbar: 'default' //開啟工具欄，此處顯示默認圖標，可以自定義模板，詳見文檔

,totalRow: true //開啟合計行

,cols: [[ //表頭

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

,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}

,{field: 'username', title: '用戶名', width:80}

,{field: 'updateTime', title: '最后登陸時間', width: 200, sort: true, totalRow: true}

,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}

]]

});

}

行監聽

//監聽行工具事件

table.on('tool(test)', function(obj){ //注：tool 是工具條事件名，test 是 table 原始容器的屬性 lay-filter="對應的值"

var data = obj.data //獲得當前行數據

,layEvent = obj.event; //獲得 lay-event 對應的值

if(layEvent === 'detail'){

layer.msg('查看操作');

} else if(layEvent === 'del'){

layer.confirm('真的刪除行么', function(index){

var falg=del(data.id);

if(falg==true){

obj.del(); //刪除對應行(tr)的DOM結構

layer.close(index);

}

//向服務端發送刪除指令

});

} else if(layEvent === 'edit'){

layer.msg('編輯操作');

update(data.id);

}

});

監聽頭工具欄事件

//監聽頭工具欄事件

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

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

,data = checkStatus.data; //獲取選中的數據

switch(obj.event){

case 'add':

add() ;

break;

case 'update':

if(data.length === 0){

layer.msg('請選擇一行');

} else if(data.length > 1){

layer.msg('只能同時編輯一個');

} else {

//layer.alert('編輯 [id]：'+ checkStatus.data[0].id);

update(checkStatus.data[0].id);

}

break;

case 'delete':

if(data.length > 1||data.length===0){

layer.msg('請選擇一行');

} else {

layer.confirm('真的刪除行么', function(index){

var falg=del(data[0].id);

if(falg==true){

var index= $("input[type='checkbox']:checked").parent().parent().parent().attr('data-index');

$("tr[data-index="+index+"]").remove();//刪除對應行(tr)的DOM結構

layer.close(index);

console.log(index);

}

//向服務端發送刪除指令

});

}

break;

};

});

總結

以上是生活随笔為你收集整理的layui中table监听单元格_layui table表格 监听头删除不请求后台的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。