根据要求使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);
    }

});