如何采用table和jQuery加载数据并实现数据与表格布局的分离
程序员文章站
2022-05-04 12:38:02
...
在日常开发工作中,总是遇到通过异步请求数据并用表格展示的的场景,看到很多解决此类问题通常采用拼字符串的形式,如:
//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='checkbox' name='fid' value='" + i + "'/>"; row.fempnum = "C000"+row.fnum; row.fempname = "张三" + row.fnum; row.fstatus = "已启用"; row.fredate = "2017-09-17 12:12:11"; row.fope = "<a href='#' class='btn btn-default'>进入</a>"; var trAttrs = " class='warning'"; //自定义行样式,当然可以定义更多 //绑定数据到表格, 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='tr" + rowsIdx + "' id='tr" + rowsIdx + "' "+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='tr" + rowsIdx + "']").length == 0) { $("#" + objTableID + " tbody").append(trbefor+tdstr+trafter); } else { $("#" + objTableID + " tbody tr[rowid='tr" + rowsIdx + "']").html(tdstr); } tdstr = ""; } //************绑定数据JS函数 E**********
如此当表格需要调整时,只需要改变表格的Thead的位置即可,其他一切由数据决定,具体效果如下:
注意:
1. 表格必须有唯一id
2. 表格必须包括thead,tbody,tfoot属性
3. 表格thead的单元格必须是 th 且必须有列明,如 fname="fname", 一一对应定义数据格式,如果不对应则不显示该列
以上就是如何采用table和jQuery加载数据并实现数据与表格布局的分离的详细内容,更多请关注其它相关文章!
上一篇: python开发