테이블과 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 부분:

//定义表格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 위치만 변경하면 됩니다. 다른 모든 것은 다음에 의해 결정됩니다. 데이터의 구체적인 효과는 다음과 같습니다.

참고:

1 테이블에는 thead, tbody, tfoot 속성 3 테이블
thead의 셀은 fname="fname", 일대일 대응

과 같이 나열되어야 하며, 해당되지 않는 경우 열은 표시되지 않습니다

위 내용은 테이블과 jQuery를 사용하여 데이터를 로드하고 테이블 레이아웃에서 데이터를 분리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!