Comment utiliser table et jQuery pour charger des données et séparer les données de la disposition du tableau

Dans le travail de développement quotidien, nous rencontrons toujours des scénarios dans lesquels les données sont demandées de manière asynchrone et affichées dans des tableaux. Nous constatons que de nombreuses solutions à de tels problèmes se présentent généralement sous la forme de chaînes de caractères, telles que :

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

La méthode ci-dessus peut répondre aux besoins et obtenir des résultats en mélangeant des données et des tableaux. Cependant, lorsque les besoins de l'entreprise changent, entraînant une augmentation, une diminution et un ajustement des colonnes du tableau, il sera très difficile de modifier le code ci-dessus. , et mène même à la forme [ Le code de $(this).find('td').
eq(6).find('input').val() ] signale directement une erreur car les données et la mise en page ne sont pas séparées.
Basé sur l'idée de séparer les données et la mise en page, le code de génération des lignes est séparé. La forme d'affichage des colonnes est déterminée par le tableau. Les données sont uniquement responsables de la liaison des données aux colonnes correspondantes. la table, donc la méthode suivante est adoptée :

Partie layout 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>

Partie JS :

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

Donc quand la table doit être ajusté, il vous suffit de changer la position du tête de table. Voilà, tout le reste est déterminé par les données. L'effet spécifique est le suivant :

<.>Remarque :

1. La table doit avoir un identifiant unique
2. Le tableau doit inclure les attributs thehead, tbody, tfoot

3 . Les cellules du tableau

thead doivent être th et doivent être listées, comme fname=". fname", correspondance biunivoque pour définir le format des données, sinon correspondante, la colonne ne sera pas affichée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!