采用table+jQuery加载数据，实现数据与表格布局的分离

在日常开发工作中，总是遇到通过异步请求数据并用表格展示的的场景，看到很多解决此类问题通常采用拼字符串的形式，如：

//js示例代码var td1="<td>B000123</td>";var td2="<td>张三</td>";var td3="<td>2017-09-17</td>";var td4="<td><a href="#" class="btn btn-default">编辑</a></td>";var tdn=......//此处省略好多列var trString="<tr>"+td1+td2+td3+td4+tdn+"</tr>";$("#tablelist").append(trString); //向ID为tablelist的表格追加行

以上的方式采用数据和表格混合的方式可以满足需求并实现效果，但是遇到业务需求变动，导致表格列增加、减少、前后调整时，修改以上代码回很苦恼，甚至导致形如【$(this).find('td').eq(6).find('input').val() 】的代码直接报错，原因就在于数据与布局没有分离。


本着数据与布局分离的思想，把生成行的代码分离出来，列的展现形式由表格决定，数据只负责向表格对应的列绑定数据即可，于是采用了以下方式：

HTML布局部分：

<table class="table table-hover" id="tablelist"><thead>    <tr class="active"><th fname="fnum">No.</th><th fname="checkbox"><input type="checkbox" selectall="fid"/></th><th fname="fempnum">编号</th><th fname="fempname">姓名</th><th fname="fstatus">状态</th><th fname="fredate">时间</th><th fname="fope">操作</th>    </tr></thead><tbody></tbody><tfoot>    <tr class="active"><td>【分页代码】</td></tr></tfoot></table>

JS部分：

//定义表格IDvar tableListId= "tablelist";//定义tfoot跨列数var tablecolnum;//定义表格列名var colNames;$(function () {    //设置tfoot跨列数    tablecolnum = setTablefootcolspan(tableListId);    //获得表格列名    colNames = getTableListColNames(tableListId);    //加载添加数据    getDataTable(tablelistid)});//数据加载调用函数示例，现实应用场景是从服务器端请求Json方式function getDataTable(objTableID) {       removeTbodyHtml(tableListId); //移除tbody内容        //定义数据格式        row = {            index:"",            fnum: "",            checkbox: "",            fempnum: "",            fempname: "",            fredate: "",            fstatus: "",            fope: ""        }        //从接口获取数据后改造以下过程        for (i = 0; i < 6; i++) {        //赋值        row.index = i;        row.fnum = i+1;        row.checkbox = "<input type='checkbox' name='fid' value='" + i + "'/>";        row.fempnum = "C000"+row.fnum;        row.fempname = "张三" + row.fnum;        row.fstatus = "已启用";        row.fredate = "2017-09-17 12:12:11";        row.fope = "<a href='#' class='btn btn-default'>进入</a>";            var trAttrs = " class='warning'"; //自定义行样式，当然可以定义更多            //绑定数据到表格， row.index 必须唯一否则会引起行之间相互覆盖            BindDataTable(objTableID, colNames, row.index, row, trAttrs)        }    }//************绑定数据的通用JS函数 S**********//获得表格列名function getTableListColNames(tableListId) {   var colNames = [];   var tablecolnum = $("#" + tableListId + " thead tr th").length;   for (col = 0; col < tablecolnum; col++) {       colNames[col] = $("#" + tableListId + " thead th:eq(" + col + ")").attr("fname");   }   return colNames;}//设置tfoot跨列数function setTablefootcolspan(tableid) {   tablecolnum = $("#" + tableid + " thead tr th").length;   if ($("#" + tableid + " tfoot") != undefined) {       $("#" + tableid + " tfoot tr td").attr("colspan", tablecolnum);   }   return tablecolnum;}//移除tbodyfunction removeTbodyHtml(objTableID) {    $("#" + objTableID + " tbody").children().remove();}///加载表格数据///objTableID: 表格ID///colNames:表格列名数组///rowsIdx: 主键索引值///rows:数据模型///trAttrs:行熟悉，可自定义function BindDataTable(objTableID, colNames, rowsIdx,rows,trAttrs) {    var trbefor="",trafter="",tdstr="";    if(trAttrs==undefined){trAttrs="";}        trbefor = "<tr rowid='tr" + rowsIdx + "' id='tr" + rowsIdx + "' "+trAttrs+">";    for (col = 0; col < colNames.length; col++) {        if (rows[colNames[col]] == undefined) {            tdstr += "<td></td>";        } else {            tdstr += "<td>" + rows[colNames[col]] + "</td>";        }    }    trafter= "</tr>";    //判断更新还是新增    if ($("#" + objTableID + " tbody tr[rowid='tr" + rowsIdx + "']").length == 0)    {     $("#" + objTableID + " tbody").append(trbefor+tdstr+trafter);     }    else    { $("#" + objTableID + " tbody tr[rowid='tr" + rowsIdx + "']").html(tdstr); }    tdstr = "";}    //************绑定数据JS函数 E**********

如此当表格需要调整时，只需要改变表格的Thead的位置即可，其他一切由数据决定，具体效果如下：

注意:

1. 表格必须有唯一id

2. 表格必须包括thead,tbody,tfoot属性 

3. 表格thead的单元格必须是 th 且必须有列明,如 fname="fname", 一一对应定义数据格式，如果不对应则不显示该列

4. row.属性，必须和fname的值保持一致否则无法显示内容。

 

 

铸剑团队签名：

【总监】十二春秋之，[e-mail]；

【Master】戈稻不苍，[e-mail]；

【Java开发】雨鸶，[e-mail]；思齐骏惠，[e-mail]；小王子，[e-mail]；巡山小钻风，[e-mail]；

【VS开发】豆点，[e-mail]；

【系统测试】土镜问道，[e-mail]；尘子与自由，[e-mail]；

【大数据】沙漠绿洲，[e-mail]；张三省，[e-mail]；

【网络】夜孤星，[e-mail]；

【系统运营】三石头，[e-mail]；平凡怪咖，[e-mail]；

【容灾备份】秋天的雨，[e-mail]；

【安全】保密，你懂的。

原创作者：戈稻不苍

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。