以下为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"}
 
]

jquery动态赋值layui table数据
 
<table class="layui-table" id="productTest" style="width: 100%;">
    <thead>
	    <tr id="template">
			<th id="productname">商品名称</th>
			<th id="nowprice">现价</th>
			<th id="username">用户名</th>
			<th id="applyprice">申请价</th>
			<th id="check">输入框</th>
		</tr>
	</thead>
</table>
var tableData = data;
$.each(tableData, function (i, n) {  //回显到表格
	var row = $("#template").clone();
	row.find("#productname").text(n.productname);
	row.find("#nowprice").text(n.nowprice);
	row.find("#username").text(n.username);
	row.find("#applyprice").text(n.applyprice);
	row.find("#check").html('<input type="text" name="" id="" value="" />');//动态增加输入框
	row.appendTo("#productTest");//添加到模板的容器中
});

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 //解析数据列表
						      };    
					        }