layui table checked獲取選中數據方式

Posted on 2022-10-26 by WalkonNet

layui table checked獲取選中數據

關於layui table checked獲取選中數據方法，有一個很簡潔的方式

var selectData = layui.table.checkStatus('queryList').data;
console.log(selectData);

其中“queryList”為table的id,需要設置一個id，例如

layui.use('table', function() {
    var table = layui.table;
    //監聽刪除及編輯按鈕
    table.render({
        elem: '#myForm'
        , url: SURL + '/sys/queryUserList' + sSuffix
        , id: 'queryList'
        , data: {"uid": uid, "name": name}
        , height: 350
        , cellMinWidth: 80 //全局定義常規單元格的最小寬度，layui 2.2.1 新增
        , cols: [[
            {type: 'checkbox', fixed: 'left'}
            ,{field: 'id', title: '編號'}
            ,{field: 'username', title: '姓名'}
            , {field: 'mobile', title: '手機號'}
            , {field: 'state', title: '狀態'}
        ]]
        , page:  {theme:'#1090d9'}
    });

控制臺結果

Array(2)
0: {id: "112", username: "張三", mobile: "18366616666" state: "有效"}
1: {id: "56", username: "李四", mobile: "18366618888"state: "有效"}
length: 2
__proto__: Array(0)

獲取layui中table表選中行數據

在使用layui來編寫前端時，將數據加載到表格後，當需要對表格中某一行或幾行數據進行操作時有以下兩種簡單方法。

法一 table表中每一列後面存在操作按鈕，點擊按鈕進行列操作

法一的表如圖所示：

當要對表中某一列進行操作時，隻需要點擊該列後面的按鈕即可。此時使用以下語句獲取選中列數據：

table.on('tool(test)',function (obj) {
          console.log(obj);
          var layEvent=obj.event,
          {#layEvent獲取點擊的按鈕事件#}
            data=obj.data; 
            {#data表示選中列的數據#}
            {#直接判斷點擊的按鈕事件，這裡的delete是按鈕中設置的lay-event的名稱#}
            if(layEvent==='delete'){執行事件}
            {#這裡使用data.address就可以獲取選中行的某一列（此處為address列）數據#}
            layer.alert(data.address)

法二在table表中加入單選框和復選框

在使用單選框或復選框時可以支持選中表中一行或多行數據。在表中加載單選框或復選框的代碼詳見layui官網。

此時表中樣式如圖（此處使用復選框）：

我這裡實際上有兩個表格，所以我代碼寫的是同時獲取兩個表格中數據，代碼如下:

其中demo表示第一個表的id,deme1表示第二個表的id。

還有需要註意獲取選中數據的條數時使用data.length後面沒有括號，此處一定要註意後面沒有括號。然後在獲取選中行的某一列數據時需要指明第幾個選中行的某一列，此處的data1[0].address表示輸出選中的第一行的地址列數據。

var file1 = table.checkStatus('demo')  
            ,file2=table.checkStatus('demo1')
            , data = file1.data
            ,data1=file2.data
            ,length1=data.length
            ,length2=data1.length;
            if (length1<1){
                layer.alert('請至少選擇一個文檔');
                return false
            }
            if (length2<1) {
                layer.alert('必須選擇一個模板');
                return false
            }
            layer.alert('很不');
            layer.alert(JSON.stringify(data1[0].address));

此處和方法一的區別就是一個在data後面要帶[i]指明是選中的第幾行，而方法一直接使用data.address就可以訪問改行。

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

layui table checked獲取選中數據方式

目錄