How to use table and jQuery to load data and separate data from table layout

In daily development work, we always encounter scenarios where data is requested asynchronously and displayed in tables. We see that many solutions to such problems are usually in the form of string strings, such as:

//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的表格追加行

The above method can meet the needs and achieve results by mixing data and tables. However, when business needs change, resulting in the increase, decrease, and adjustment of table columns, it will be very troublesome to modify the above code, and even lead to the form [$( this).find('td').eq(6).find('input').val() ] The code directly reports an error because the data and layout are not separated.

Based on the idea of ​​separating data and layout, the code for generating rows is separated. The display form of columns is determined by the table. The data is only responsible for binding data to the corresponding columns of the table, so the following method is adopted :

HTML layout part:

<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 part:

//定义表格ID
var 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=&#39;checkbox&#39; name=&#39;fid&#39; value=&#39;" + i + "&#39;/>";
        row.fempnum = "C000"+row.fnum;
        row.fempname = "张三" + row.fnum;
        row.fstatus = "已启用";
        row.fredate = "2017-09-17 12:12:11";
        row.fope = "<a href=&#39;#&#39; class=&#39;btn btn-default&#39;>进入</a>";
            var trAttrs = " class=&#39;warning&#39;"; //自定义行样式，当然可以定义更多
            //绑定数据到表格， 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;
}

//移除tbody
function 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=&#39;tr" + rowsIdx + "&#39; id=&#39;tr" + rowsIdx + "&#39; "+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=&#39;tr" + rowsIdx + "&#39;]").length == 0)
    { 
    	$("#" + objTableID + " tbody").append(trbefor+tdstr+trafter); 
    }
    else
    { $("#" + objTableID + " tbody tr[rowid=&#39;tr" + rowsIdx + "&#39;]").html(tdstr); }

    tdstr = "";
}

    //************绑定数据JS函数 E**********

So when the table needs to be adjusted, you only need to change the position of the Thead of the table, and the other Everything is determined by data, the specific effect is as follows:

Note:

1. The table must have a unique id

2. The table must include thead, tbody, tfoot attributes

3. Table## The cell of #thead must be th and must be listed, such as fname="fname", one-to-one correspondencedefine the data format, if not corresponding, the column will not be displayed

The above is the detailed content of How to use table and jQuery to load data and separate data from table layout. For more information, please follow other related articles on the PHP Chinese website!