LayUI + js實現全選、多選、翻頁勾選（LayUI數據表格方法渲染模式）

本文轉載自查看原文 2020-01-09 10:53 4303 LayUI

1 var pageDataIdMap;
2 var idMap = new Map();

先定義一個用來存放每一頁的所有數據行 ID 的map集合 --> pageDataIdMap

再創建一個用來存放我們勾選的數據行 ID 的map集合 --> idMap

 1 layui.use(['layer', 'jquery', 'table'], function() {
 2     table.render({
 3         page: { 
 4         },
 5         done: function (res, curr, count) {
 6             pageDataIdMap = new Map();
 7             for(var i = 0;i < len;i++){   //填充當前頁的數據
 8                 pageDataIdMap[res.data[i].id] = res.data[i].id;
 9             }
10         },
11         cols: colArr
12     });
13 });

渲染每一頁的數據行時，在 done 中將這一頁的所有數據行 ID 保存到 pageDataIdMap 中。

1 <div style="padding: 10px;">
2     <table class="layui-hide layui-table" id="jzqyListTable" lay-size="sm" lay-filter="demo">
3     </table>
4 </div>

 1 table.on('checkbox(demo)', function(obj){
 2     if(obj.type == 'one'){    //單選操作
 3         if(obj.checked){     //選中
 4             idMap[obj.data.id] = obj.data.id;
 5         }else{      //取消選中
 6             for(var key in idMap){
 7                 if(key == obj.data.id){   //移除取消選中的id
 8                     delete idMap[obj.data.id];
 9                 }
10             }
11          }
12     }else{      //全選操作
13          if(obj.checked){    //選中
14              for(var pageKey in pageDataIdMap){
15                  idMap[pageKey] = pageKey;
16              }
17          }else{     //取消選中
18              for(var pageKey in pageDataIdMap){
19                  for(var key in idMap){
20                      if(key == pageKey){
21                          delete idMap[pageKey];
22                      }
23                  }
24              }
25          }
26     }
27 });

這里使用LayUI的監聽事件，來監聽方法渲染的表格數據的勾選 --> table.on('checkbox(demo)', function(obj){}

單選 --> obj.type = 'one' 全選 --> obj.type = 'all'

選中 --> obj.checked = true 未選中 --> obj.checked = false

如果是單選時候的選中，就講這個勾選的數據行 ID 存放到 idMap 中；如果是全選的選中，就遍歷 pageDataIdMap，將其中的 ID 存放到 idMap 中。

如果是單選時候的取消選中，就遍歷 idMap 將取消勾選的數據行 ID 從 idMap 中移除；如果是全選的取消選中，就遍歷 idMap 和 pageDataIdMap，將 pageDataIdMap 中有的 ID 全部從 idMap 中移除。

 1 layui.use(['layer', 'jquery', 'table'], function() {
 2     table.render({
 3         page: { 
 4         },
 5         done: function (res, curr, count) {
 6             var len = res.data.length;
 7             var chooseNum = 0;   //記錄當前頁選中的數據行數
 8             for(var i = 0;i < len;i++){   //勾選行回顯
 9                 for(var key in idMap){
10                     if(res.data[i].id == key){
11                         res.data[i]["LAY_CHECKED"]='true';
12                         //找到對應數據改變勾選樣式，呈現出選中效果
13                         var index= res.data[i]['LAY_TABLE_INDEX'];
14                         $('tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
15                         $('tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
16                          chooseNum++;
17                     }
18                 }
19             }
20             if(len != 0 && chooseNum == len){   //表示該頁全選  --  全選按鈕樣式回顯
21                 $('input[lay-filter="layTableAllChoose"]').prop('checked',true);
22                 $('input[lay-filter="layTableAllChoose"]').next().addClass('layui-form-checked');
23             }
24         },
25         cols: colArr
26     });
27 });

這里實現在翻頁的時候，將已勾選的數據行樣式回顯，如果全選就將全選樣式回顯為選中狀態。

在 done 中獲取當前頁的數據條數 --> var len = res.data.length;

定義一個記錄當前頁回顯為選中狀態的數據行條數的記錄數 --> var chooseNum = 0;

for循環，循環 len 次，並遍歷 idMap，如果當前頁的 pageDataIdMap 中與 idMap 有相同 key 的數據，則回顯為勾選狀態

res.data[i]["LAY_CHECKED"]='true';
var index= res.data[i]['LAY_TABLE_INDEX']; $('tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true); $('tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');

並且 chooseNum 進行 +1 
當 chooseNum = len 並且 len ！= 0 時，表示當前頁的數據都是選中狀態，所以全選按鈕也要回顯為選中狀態

$('input[lay-filter="layTableAllChoose"]').prop('checked',true);
$('input[lay-filter="layTableAllChoose"]').next().addClass('layui-form-checked');



到這里，多選、全選與翻頁勾選就已經實現。
接下來就是點擊按鈕實現批量操作（我這邊是 批量提交）

1 <div class="parentAdd demoTable">
2     <a class="layui-btn layui-btn-normal layui-btn-xs" data-type="getCheckData" style="font-size: 14px; margin-top:6px;padding-top: 12px; height: 24px; width: 80px; line-height: 0px; vertical-align: top;">提交委托單
3     </a>
4 </div>

 1 layui.use(['layer', 'jquery', 'table'], function() {    
 2     var active = {
 3         getCheckData: function(){
 4             //你的JS方法
 5         }
 6     };
 7     $('.demoTable .layui-btn').on('click', function(){
 8         var type = $(this).data('type');
 9         active[type] ? active[type].call(this) : '';
10     });
11 });

完整代碼如下：

HTML代碼：

 1 <div class="table_mian" style="position: absolute;width: 100%;top: 124px;bottom: 0;left: 0;border: 1px solid #dedede;">
 2     <div class="bgtop">
 3         <a href="#" style="color: #4c4c4c;font-size: 15px;line-height: 36px;padding-left: 10px;"><i class="fa fa-table zt" style="padding-right: 6px;"></i>見證取樣信息</a>
 4          <div class="parentAdd demoTable">
 5              <a class="layui-btn layui-btn-normal layui-btn-xs" data-type="getCheckData" style="font-size: 14px; margin-top:6px;padding-top: 12px; height: 24px; width: 80px; line-height: 0px; vertical-align: top;">提交委托單</a>
 6         </div>
 7     </div>
 8     <div style="padding: 10px;">
 9          <table class="layui-hide layui-table" id="jzqyListTable" lay-size="sm" lay-filter="demo"></table>
10     </div>
11 </div>

JS代碼：

var pageDataIdMap;
var idMap = new Map();

$(function() {
    layui.use(['layer', 'jquery', 'table'], function() {
        table.render({
            page: {},
            done: function (res, curr, count) {
                var len = res.data.length;
                pageDataIdMap = new Map();
                for(var i = 0;i < len;i++){   //填充當前頁的數據
                    pageDataIdMap[res.data[i].id] = res.data[i].id;
                }
                var chooseNum = 0;   //記錄當前頁選中的數據行數
                for(var i = 0;i < len;i++){   //勾選行回顯
                    for(var key in idMap){
                        if(res.data[i].id == key){
                            res.data[i]["LAY_CHECKED"]='true';
                            //找到對應數據改變勾選樣式，呈現出選中效果
                            var index= res.data[i]['LAY_TABLE_INDEX'];
                            $('tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                            $('tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                            chooseNum++;
                        }
                    }
                }
                if(len != 0 && chooseNum == len){   //表示該頁全選  --  全選按鈕樣式回顯
                $('input[lay-filter="layTableAllChoose"]').prop('checked',true);
                $('input[lay-filter="layTableAllChoose"]').next().addClass('layui-form-checked');
                }
            },
            cols: colArr
        });

        table.on('checkbox(demo)', function(obj){
            if(obj.type == 'one'){    //單選操作
                if(obj.checked){     //選中
                    idMap[obj.data.id] = obj.data.id;
                }else{      //取消選中
                    for(var key in idMap){
                        if(key == obj.data.id){   //移除取消選中的id
                            delete idMap[obj.data.id];
                        }
                    }
                }
            }else{      //全選操作
                if(obj.checked){    //選中
                    for(var pageKey in pageDataIdMap){
                        idMap[pageKey] = pageKey;
                    }
                }else{     //取消選中
                    for(var pageKey in pageDataIdMap){
                        for(var key in idMap){
                            if(key == pageKey){
                                delete idMap[pageKey];
                            }
                        }
                    }
                }
            }
        });

        var active = {
            getCheckData: function(){
                batchSubmitWt();
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
         });

    });
});

function batchSubmitWt() {
    var ids = "";
    for(var key in idMap){
        ids += key + ",";
    }
    if(ids == ''){
        layer.open({title:'提示',content:'請勾選要提交的委托單'});
        return false;
    }
    ids = ids.slice(0,-1);
    $.ajax({
        type : "POST",
        url : '../jzqy/batchSubmitWt',
        data : {
            'id' : ids
        },
        dataType : "json",
        success: function (data) {
            if(data.status == 'success'){
                table.reload('jzqyListTable', {
                    where: {},
                    page: {
                        curr: 1 //重新從第 1 頁開始
                    }
                });
            }
        }
    });
}

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 php+layui數據表格實現數據分頁渲染 layui數據表格 layui 給數據表格加序號的方法 layui 數據表格按鈕事件綁定和渲染 Layui：數據表格渲染二級表頭 Layui數據表格之獲取表格中所有的數據方法 layui數據表格及分頁 Layui：數據表格的重載 Layui數據表格的使用 layui的數據表格+springmvc實現數據顯示，分頁功能

LayUI + js實現全選、多選、翻頁勾選（LayUI數據表格 方法渲染 模式）

免責聲明！

LayUI + js實現全選、多選、翻頁勾選（LayUI數據表格方法渲染模式）