テーブルと jQuery を使用してデータをロードし、データをテーブルレイアウトから分離する方法-jsチュートリアル-php.cn

テーブルと jQuery を使用してデータをロードし、データをテーブルレイアウトから分離する方法

一个新手

リリース： 2017-09-18 10:50:44

オリジナル

2152 人が閲覧しました

日々の開発作業では、データが非同期的にリクエストされ、テーブルに表示されるシナリオに常に遭遇します。このような問題に対する多くの解決策は、通常、次のような文字列の形式であることがわかります。

//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 部分:

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

ログイン後にコピー

したがって、テーブルを調整する必要がある場合は、テーブルの Thead の位置を変更するだけで済みます。データの具体的な効果は次のとおりです: