以下为html代码：



效果如下所示：
  

            

                
区域
                
报告数
            
 
var tableData = data.rows;  //回调函数获取后台返回的表格数据
        $.each(tableData, function (i, n) {  //回显到表格
            var row = $("#template").clone();
            row.find("#name").text(n.name);
            row.find("#value").text(n.value);
            row.appendTo("#hot_table");//添加到模板的容器中
        });

注意：tableData参数的数据格式为[{“td的id”，value}，{“td的id”，value}]，即键值对的集合或数组，其中key要与td的id保持一致。
以下是效果图：

前台：

 function queryByProvince() {

            //判断是否选择开始日期和结束日期

            var begindate = $("#startdate_province").val();

            var enddate = $("#enddate_province").val();

            if (!checkIsNull(begindate) && !checkIsNull(enddate)) {

                

                var province = $("#province").val();

                $.ajax({

                    type: "post",

                    url: '',

                    dataType: 'json',

                    contentType: "application/json; charset=utf-8",

                    async: false,

                    //contentType: "application/json",

                    data: "{'province': '" + province + "','begindate':'" + begindate + "','enddate':'" + enddate + "'}",

                    success: function (res) {

                        var jsondata  = res.d;

                

                         var workTaskDataJson = JSON.parse(jsondata);           ----一定要在前台再转一次json，否则table会报异常  

                        //设置 按区域统计-表格

                         layui.use('table', function () {

                             var table = layui.table;

                             //展示已知数据

                             table.render({

                                 elem: '#province'           -------- 网页中 div 的id                  

                               , cols: [

                                   [ //标题栏

                                 { field: 'COMPANY', title: '公司', width: 100, sort: true }

                                 , { field: 'INCNT', title: '进入', width: 80 ,sort: true}                                 

                                 , { field: 'OUTCNT', title: '离职', width: 80, sort: true }

                                   ]

                               ]

                                   , data: workTaskDataJson           --------将json赋值给table

                                 //将获取的json赋值给table

                                 //,skin: 'line' //表格风格

                               , even: true

                                 , page: true //是否显示分页

                                 ,limits: [5, 7]

                                 , limit: 5 //每页默认显示的数量

                             });



                         });

                      

                            }, error: function () {

                            }

                        });

            }

            else {

                layer.msg("请选择开始日期和结束日期");

            }

        }

 

后台：

json格式：

[{"COMPANY":"华为公司","INCNT":"5","OUTCNT":"8"},

{"COMPANY":"中兴","INCNT":"14","OUTCNT":"11"},

{"COMPANY":"格力","INCNT":"0","OUTCNT":"0"}

]

layui table 保存状态赋值checkbox

在项目中遇到一个问题，layui的checkbox复选框选择之后切换分页返回时选择状态消失，需要重新给checkbox赋值、


设置一个缓存set,保存选中项
var checkedSet = new Set();

监听点击check事件
 table.on('checkbox(dataguid1Table)', function(obj){
					  console.log(obj.checked); //当前是否选中状态
					  console.log(obj.data); //选中行的相关数据
					  console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
     //选中时加入set 否则移除
					  	if(obj.checked){
					  		checkedSet.add(obj.data.uuid);
					  	}else{
					  		checkedSet.delete(obj.data.uuid)
					  	}
					  console.log(checkedSet);
					});

在表格渲染之前对check赋值，lay表格生命周期官网没有，parseData: function(res)在渲染表格之前，就在这个方法里面做文章
parseData: function(res){ //res 即为原始返回的数据
					    	for(var i in res.rows){
					    		if(checkedSet.has(res.rows[i].uuid)){
                                    //如果set集合中有的话，给rows添加check属性选中
					    			res.rows[i]["LAY_CHECKED"] = true;
					    		}
					    	}
						    return {
						        "code": res.status, //解析接口状态
						        "count": res.total, //解析数据长度
						        "data": res.rows //解析数据列表
						      };    
					        }  

如果我的表格数据是这样：



这时如果使用编辑功能：



这时就会更新失败，
原因：