解決layui選中項下一頁清空問題


項目中遇到給用戶在所有產品中匹配一部分產品。用layui 第一頁選好之后到第二頁再選,等回到第一頁時之前選擇的都沒了,解決這個問題的辦法如下:

//勾選的產品id集合
    var chooseAdids = new Array();
    //表格數據緩存
    var table_data = new Array();
    var adid = "";
    layui.use('table', function () {
        var table = layui.table;
        //監聽表格復選框選擇
        table.on('checkbox(user)', function (obj) {
            if (obj.checked == true) {
                //選中
                if(obj.type == 'one') {   //當選中一個時 obj.type默認是'one',否則默認是'all'
                   //去重復
if(chooseAdids.indexOf(obj.data.id,0)==-1)
{
  chooseAdids.push(obj.data.id);

}
                  
                } else {
               //全選
                    for (var i = 0; i < table_data.length; i++) {
if(chooseAdids.indexOf(obj.data.id,0)==-1)
{   chooseAdids.push(table_data[i].id);
}
                     
                    }
                }
            }
            else {
                //取消選中
                if(obj.type == 'one') {
                    for (var i = 0; i < chooseAdids.length; i++) {
                        if (chooseAdids[i] == obj.data.id) {
                            //從下標 i 開始刪除一個元素
                            chooseAdids.splice(i, 1);
                        }
                    }
                }
                else {
                    for (var i = 0; i < chooseAdids.length; i++) {
                        for (var j = 0; j < table_data.length; j++) {
                            if (chooseAdids[i] == table_data[j].id) {
                                //從下標 i 開始刪除一個元素
                                chooseAdids.splice(i,1);
                            }
                        }
                    }
                }
            }
        });

        var aid = parent.document.getElementById("txtmarry").value;    //當編輯時從父頁面拿到產品id存在chooseAdids里面供默認選中
        if(aid!="")
        {
            var arr = aid.split(',');
            for (var i = 0; i < arr.length; i++) {
                chooseAdids.push(arr[i]);
            }
        }
        var width = calColumWidth(8, 0, 0);
        // 瀏覽器寬度發生改變
        window.onresize = function () {
            width = calColumWidth(8, 0, 0);
            tb.reload();
        }
        InitAllAdType();
        //方法級渲染
        var tb = table.render({
            elem: '#LAY_table_user'
         , url: '@Url.Action("AdidList", "Web_WebUsers")'
           , cols: [[
               { checkbox: true, field: 'ck', LAY_CHECKED: false, width: width },
               { field: 'id', title: '產品ID', width: width },
              { field: 'title', title: '產品名稱', width: width },
              { field: 'aduserid', title: '產品商ID', width: width },
              { field: 'price_descript', title: '價格描述', width: width },
              { field: 'price_adv', title: '產品商單價/元', width: width },
              { field: 'data_return', title: '返回期限', width: width, templet: '#data_returnTpl' },
              { field: 'data_Confirmation', title: '確認時間', width: width, templet: '#data_ConfirmationTpl' }
           ]]
           , id: 'testReload'
             , page: true
             , limit: 5
             , limits: [5]
           , height: 'auto'
             , width: '80%'
                 , done: function (res, curr, count) {
                     // $("[data-field='id']").css('display', 'none');
                     // 設置換頁勾選之前的
                     table_data = res.data;
                     //循環所有數據,找出對應關系,設置checkbox選中狀態
                     for (var i = 0; i < res.data.length; i++) {
                         for (var j = 0; j < chooseAdids.length; j++) {
                             if (res.data[i].id == chooseAdids[j]) {
                                 //這里才是真正的有效勾選
                                 res.data[i]["LAY_CHECKED"] = 'true';
                                 //找到對應數據改變勾選樣式,呈現出選中效果
                                 var index = res.data[i]['LAY_TABLE_INDEX'];
                                 $('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                                 $('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                             }
                         }
                     }
                 },
            skin: 'row',
            even: true
        });


        var $ = layui.$, active = {
            reload: function () {
                var txtguz = $('#txtguz');
                var txtadtype = $('#txtadtype');
                //執行重載
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新從第 1 頁開始
                    }
                  , where: {
                      txtguz: txtguz.val(),
                      txtadtype: txtadtype.val()
                  }
                });
            }
            ,
            getCheckLength: function () { //一鍵申請
                var uIDs = "";
                if (chooseAdids.length <= 0) {
                    layer.msg('請先選擇要匹配的產品')
                    return;
                }
                else {
                    layer.confirm('確定匹配這些產品嗎?', function (index) {
                        for (var i = 0; i < chooseAdids.length; i++) {
                            uIDs += chooseAdids[i] + ",";
                        }
                        doOk(uIDs.substring(0, uIDs.length - 1));  //將選中的產品id傳到父頁面顯示出來
                    });
                }
            }

        };

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




function doOk(ids) {
   parent.ChooseAdidValues(ids);   //將選中的產品id傳給父頁面
   var index = parent.layer.getFrameIndex(window.name);
   parent.layer.close(index);   //關閉當前子頁面
}

 



父頁面:

 


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM