So verwenden Sie Tabelle und jQuery zum Laden von Daten und zum Trennen von Daten vom Tabellenlayout

In der täglichen Entwicklungsarbeit stoßen wir immer wieder auf Szenarien, in denen Daten asynchron angefordert und in Tabellen angezeigt werden. Ich sehe, dass viele Lösungen für solche Probleme normalerweise in Form von Zeichenfolgen vorliegen, wie zum Beispiel:

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

Die obige Methode kann die Anforderungen erfüllen und Ergebnisse erzielen, indem Daten und Tabellen gemischt werden. Wenn sich jedoch die Geschäftsanforderungen ändern, was zu einer Vergrößerung, Verringerung und Anpassung von Tabellenspalten führt, ist es sehr mühsam, den obigen Code zu ändern und führen sogar zu der Form [ Der Code von $(this).find('td').eq(6).find('input').val() ] meldet direkt einen Fehler, weil Daten und Layout sind nicht getrennt.

Basierend auf der Idee der Trennung von Daten und Layout wird der Code zum Generieren von Zeilen durch die Tabelle bestimmt. Die Daten sind nur für die Bindung von Daten an die entsprechenden Spalten verantwortlich der Tabelle, daher wird die folgende Methode übernommen:

HTML-Layoutteil:

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

//定义表格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**********

Also, wenn die Tabelle benötigt wird Zum Anpassen müssen Sie nur die Position des Tabellenkopfes ändern. Alles andere wird durch die Daten bestimmt. Der spezifische Effekt ist wie folgt:

Hinweis:

1. Die Tabelle muss eine eindeutige ID haben

2. Die Tabelle muss die Attribute thead, tbody und tfoot enthalten

3 Die Zellen der Tabelle thead müssen aufgelistet sein, z „fname“, Eins-zu-Eins-Korrespondenz zum Definieren des Datenformats. Wenn es nicht übereinstimmt, wird die Spalte nicht angezeigt

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Tabelle und jQuery zum Laden von Daten und zum Trennen von Daten vom Tabellenlayout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!