快捷導(dǎo)航

layui table checked獲取選中數(shù)據(jù)方式

更新時(shí)間：2022年10月25日 17:19:20 作者：阿杜_(tái)ardo

這篇文章主要介紹了layui table checked獲取選中數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

layui table checked獲取選中數(shù)據(jù)

關(guān)于layui table checked獲取選中數(shù)據(jù)方法，有一個(gè)很簡潔的方式

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

其中“queryList”為table的id,需要設(shè)置一個(gè)id，例如

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

控制臺(tái)結(jié)果

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

獲取layui中table表選中行數(shù)據(jù)

在使用layui來編寫前端時(shí)，將數(shù)據(jù)加載到表格后，當(dāng)需要對(duì)表格中某一行或幾行數(shù)據(jù)進(jìn)行操作時(shí)有以下兩種簡單方法。

法一 table表中每一列后面存在操作按鈕，點(diǎn)擊按鈕進(jìn)行列操作

法一的表如圖所示：

當(dāng)要對(duì)表中某一列進(jìn)行操作時(shí)，只需要點(diǎn)擊該列后面的按鈕即可。此時(shí)使用以下語句獲取選中列數(shù)據(jù)：

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

法二在table表中加入單選框和復(fù)選框

在使用單選框或復(fù)選框時(shí)可以支持選中表中一行或多行數(shù)據(jù)。在表中加載單選框或復(fù)選框的代碼詳見layui官網(wǎng)。

此時(shí)表中樣式如圖（此處使用復(fù)選框）：

我這里實(shí)際上有兩個(gè)表格，所以我代碼寫的是同時(shí)獲取兩個(gè)表格中數(shù)據(jù)，代碼如下:

其中demo表示第一個(gè)表的id,deme1表示第二個(gè)表的id。

還有需要注意獲取選中數(shù)據(jù)的條數(shù)時(shí)使用data.length后面沒有括號(hào)，此處一定要注意后面沒有括號(hào)。然后在獲取選中行的某一列數(shù)據(jù)時(shí)需要指明第幾個(gè)選中行的某一列，此處的data1[0].address表示輸出選中的第一行的地址列數(shù)據(jù)。

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('請(qǐng)至少選擇一個(gè)文檔');
                return false
            }
            if (length2<1) {
                layer.alert('必須選擇一個(gè)模板');
                return false
            }
            layer.alert('很不');
            layer.alert(JSON.stringify(data1[0].address));

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

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: