根據要求使layui的table數據表格複選框默認選中修改更新保存

最近項目前端用的layui框架

首先是需求：頁面點擊選擇的時候 ，根據聯通資費框中的內容，選中彈出表格中的相應數據，ZE_9999和ZE_9998是我們要選中的，選擇完畢之後點擊保存，我們要重新更新聯通資費的文本域內容

 

應該先了解下layui.data();

https://www.layui.com/doc/base/infrastructure.html#data

然後先看代碼

<table class="layui-table" id="vop_expenses_package_table"
		lay-filter="vop_expenses_package_table">
</table>
<script type="text/html" id="toolbarDemo">
  	<div class="layui-btn-container">
   		<button class="layui-btn layui-btn-sm" lay-event="getCheckData">保存</button>
  	</div>
</script>

//表格是否全選標示
var ziFeiAllChecked = false;
//用來保存表格 選中數據ID
layui.data("ziFeiIds",null);
//用來保存在聯通資費的文本域裏顯示的文本
layui.data("ziFeiInfo",null);

//監控表格的複選框事件
table.on('checkbox(vop_expenses_package_table)', function(obj){
    console.log(obj.checked); //當前是否選中狀態
    console.log(obj.data); //選中行的相關數據
    console.log(obj.type); //如果觸發的是全選，則爲：all，如果觸發的是單選，則爲：one		 
    var data = obj.data;
	if(obj.type === "one"){
		if(obj.checked){//選中，存放數據
			layui.data('ziFeiIds', {
				    	key: data.vopExpensesPackageId,
				        value: data.expensesPkName
				});
			layui.data("ziFeiInfo",{
				    	key: data.vopExpensesPackageId
				    	,value: data.expensesPkName+"-"+data.expensesPkCode+"-   
                            "+data.volume+"-"+data.typeName+ "\n"
			});
				    			   
		}else{
			layui.data('ziFeiIds', {
				    	 key: data.vopExpensesPackageId
				    	 ,remove: true
				    });
			layui.data("ziFeiInfo",{
				    	 key: data.vopExpensesPackageId
				    	 ,remove: true
				   });
				    			  
	    }
				    		      
    }else if(obj.type === "all"){//全選數據
		ziFeiAllChecked = true;//全選標示設爲true
		if(obj.checked === false && data.length === undefined){
			layui.data('ziFeiIds',null);
			layui.data("ziFeiInfo",null);
		}
	}
						   
});

var my_vop_expenses_package_table;
var vppDone = function(res, curr, count){
	console.log(res);//如果是直接賦值的方式，res即爲：{data: [], count: 99} data爲當前頁數據、count爲數據總長度
    //從後臺返回的數據
    var backData = res.data;
    //獲取存放選中的
    var selectData = layui.data('ziFeiIds');				            	
    var selectIds = Object.keys(selectData);//改成數組
    var arraySelect = selectIds;
	var tbl = $('#vop_expenses_package_table').next('.layui-table-view');
	//返回數據 res  
	var checkedTableIndex = [];//存放最終要選中的tableIndex 數據
	var tableIndex = 0;
	$.each(backData,function(index,element){//循環表格數據
	    $.each(arraySelect,function(myindex){//循環要選中的數據
			var checkedId = arraySelect[myindex];
			if(checkedId !== undefined){
			    var rowId = backData[index].vopExpensesPackageId;
			    if(rowId == checkedId){//如果表格數據ID和我要選中的ID一樣
				    checkedTableIndex[tableIndex] = index;//存放表格數據的當前列索引
				    tableIndex++;
			    }
		    }
				            			
	    });
    });
    $.each(checkedTableIndex,function(index){//根據所保存的要選中的列索引，選中
        tbl.find('table>tbody>tr').eq(checkedTableIndex[index]).find('td')
            .eq(0).find('input[type=checkbox]').prop('checked', true);
    });				           				            
    form.render('checkbox');
};


//初始化表格
my_vop_expenses_package_table = table.render({
    elem : '#vop_expenses_package_table',//<!-- 表id 需要改 -->
    url : '../../vopExpensesPackage/listNoPage',
    toolbar: '#toolbarDemo',
    cols : [ [
              {type: 'checkbox'}
              ,{
                 field : 'vopExpensesPackageId',
                 title : '資費編號'
                }
              ,
               {
                field : 'expensesPkCode',
                title : '資費ID'
               },
               {
                  field : 'expensesPkName',
                  title : '資費包名稱'
               },
               {
                field : 'volume',
                title : '套內資源量'
               },
               {
                field : 'productPackageName',
                title : '產品包名稱'
               },
               {
                field : 'productPackageCode',
                title : '產品包ID'
               },
               {
                field : 'productPackageTypeName',
                title : '產品包類型'
               },
               {
                field : 'productCode',
                title : '產品ID'
               },
               {
                field : 'statusName',
                title : '狀態'
               },
               {
                field : 'areaName',
                title : '適用地區'
               } 
             ] 
            ],
    page : false,
    id : "vpp_table",
    size:'sm',
    text: {
           none: '暫無相關數據' //默認：無數據。注：
    },
    done: vppDone//執行加載的回調
});

  


//表格工具欄事件
table.on('toolbar(vop_expenses_package_table)', function(obj){
	var checkStatus = table.checkStatus(obj.config.id);
	switch(obj.event){
		case 'getCheckData':
			if(ziFeiAllChecked){//如果是全選
				var data = checkStatus.data;//獲取全選數據
				$.each(data,function(index,value){
					   layui.data('ziFeiIds', {
					    			key: data[index].vopExpensesPackageId
					    			,value: data[index].expensesPkName
					    });
					    layui.data("ziFeiInfo",{
					    			key: data[index].vopExpensesPackageId
					    			,value: data[index].expensesPkName+"-"
                                                +data[index].expensesPkCode+"-"
                                                +data[index].volume+"-"
                                                 +data[index].typeName+ "\n"
					    });
				});
			}
		    var ziFeiInfos = layui.data("ziFeiInfo");
			var showZiFeiInfos = "";
			if(ziFeiInfos !== undefined){
				for(var key in ziFeiInfos){
					     showZiFeiInfos += ziFeiInfos[key];
				}
			}
			$("#vop_area").val(showZiFeiInfos); 
			var ziFeiIds = layui.data("ziFeiIds");
			var selectIdsValue = "";
			if(ziFeiIds !== undefined){
			for(var key in ziFeiIds){	        		
				if(selectIdsValue.length>0)
					selectIdsValue+="," + key;
				else
				    selectIdsValue = key;
			}
					        	
			$("#selectIds").val(selectIdsValue);
		    $("#selectType").val(1);
    }

});