table形式的列表頁面顯示
阿新 • • 發佈：2017-10-20
-type lin rip for list集合 input標簽 arr r.js rec
（該案例在
項目中的reserve_bchmc.html,其對應的後臺在CountBean中）
先看一下效果圖：
該列表頁面並不是用easyUI中的datagrid實現的，而是用table實現頁面顯示的
原理：頁面上的數據每一行數據存放在一個對象裏面，與戶主相關的數據都是從數據庫取的，然後將查詢出來的數據放在一個list集合中，查詢出幾條數據出來list集合中就有幾個實體對象，對於後面進行計算的四條數據則是通過查出來的數據計算得到並new一個新的實體對象保存在其中，然後將該對象追加到list集合中，後臺統一將該list傳到前臺，前臺通過遍歷，按順序添加到table表中，前面戶主數據都是相同的字段，因此只需要調用同一個該行添加操作，而後四條數據則根據對象在
HTML：
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="../skin/easyui/icon.css"> <link rel="stylesheet" type="text/css" href="../skin/easyui/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../skin/css/form.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="../js/common.js"></script> <script type="text/javascript" src="../js/DateUtil.js"></script> <script type="text/javascript" src="../js/JsonUtil.js"></script> <script type="text/javascript" src="../js/kindeditor/kindeditor-min.js"></script> <script type="text/javascript" src="../js/validator.js"></script> <style type="text/css"> .datagrid-toolbar {border-bottom: 1px #95B8E7 solid;} </style> </head> <body class="easyui-layout"> <div data-options="region:‘center‘,title:‘補償花名冊‘"> <!---表格列表--> <div title=""> <div class="datagrid-toolbar" style="padding: 5px;"> <div style="float: left"> <a href="#" class="easyui-linkbutton" onClick="back()" data-options="iconCls:‘icon-back‘">返回</a> <a onclick="toAdd(‘‘)" class="easyui-linkbutton" data-options="iconCls:‘icon-add‘">新建</a> <a class="easyui-linkbutton" class="btnSave" onClick="save()" data-options="iconCls:‘icon-save‘">保存</a> </div> <div style="float: right"> <a onclick="toExport()" class="easyui-linkbutton" data-options="iconCls:‘icon-export‘">導出</a> </div> <!---消除浮動---> <div style="clear: both"></div> </div> </div> <div data-options="region:‘center‘"> <form id="form"> <table class="TBLForm" cellpadding="5" width="100%"> <thead> <tr> <td rowspan="2" colspan="2" align="center" height="30px">戶名</td> <td rowspan="2" align="center" height="30px">面積</td> <td rowspan="2" align="center" height="30px">安置補助費</td> <td colspan="2" align="center" height="30px">土地補償費</td> <td rowspan="2" align="center" height="30px">青苗費</td> <td rowspan="2" align="center" height="30px">附作物費用</td> <td rowspan="2" align="center" height="30px">總額</td> <td rowspan="2" align="center" height="30px">身份證號碼</td> <td rowspan="2" align="center" height="30px">備 註</td> <td rowspan="2" align="center" height="30px">操 作</td> </tr> <tr> <td align="center" height="30px">個人（70%）</td> <td align="center" height="30px" style="border:1px solid #95B8E7">集體（30%）</td> </tr> </thead> <tbody></tbody> </table> </form> </div> </div> </body>
JavaScript：
<script type="text/javascript">
var pid=getQueryStr("id");
var pageNum=getQueryStr("pageNum");
var flag;
$(function(){
loadTable();
})
function getJsonParam(){
var json={pid:pid};
return json2str(json);
}
//初始化表格
function loadTable(){
var data = getJsonData("../getTableList.hebe",getJsonParam());
var arr = [];
//len代表相同字段的數據數組下標
var len = data.length - 4;
$.each(data, function(i, row) {
//遍歷數組下標
//if中是遍歷最後四條不同的記錄數據
if(i >= len) {
if(i==len) {
arr.push(‘<tr><td rowspan="3" align="center" height="30px">村集體</td>‘);
arr.push(‘<td align="center" height="30px">集體土地</td>‘);
arr.push(‘<td align="center" height="30px" ondblclick="updatemj(this)"><input class="easyui-numberbox" id="jttdmj" precision="3" value="‘+row.mj+‘" style="width: 80px"/></td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.azbcf + ‘</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.grtdbcf + ‘</td>‘);
arr.push(‘<td align="center" height="30px">/</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.qmf_bz + ‘</td>‘);
arr.push(‘<td align="center" height="30px" ondblclick="updatefz(this)"><input class="easyui-numberbox" id="jttdfzwf" value="‘ + row.jttdfzwf + ‘" style="width: 80px"/></td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.ze + ‘</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.sfzhm + ‘</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.remark + ‘</td>‘);
arr.push(‘<td align="center" height="30px"></td></tr>‘);
}
if(i==len+1) {
arr.push(‘<td align="center" height="30px">30%部分</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.mj + ‘</td>‘);
arr.push(‘<td align="center" height="30px">/</td>‘);
arr.push(‘<td align="center" height="30px">/</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.jttdbcf + ‘</td>‘);
arr.push(‘<td align="center" height="30px">/</td>‘);
arr.push(‘<td align="center" height="30px">/</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.ze + ‘</td>‘);
arr.push(‘<td align="center" height="30px"></td>‘);
arr.push(‘<td align="center" height="30px"></td>‘);
arr.push(‘<td align="center" height="30px"></td></tr>‘);
}
if(i==len+2) {
arr.push(‘<td align="center" height="30px">小計</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.mj + ‘</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.azbcf + ‘</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.grtdbcf + ‘</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.jttdbcf + ‘</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.qmf_bz + ‘</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.dsfzwf + ‘</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.ze + ‘</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.sfzhm + ‘</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.remark + ‘</td>‘);
arr.push(‘<td align="center" height="30px"></td></tr>‘);
}
if(i==len+3){
arr.push(‘<td colspan="2" align="center" height="30px">合計</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.mj + ‘</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.azbcf + ‘</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.grtdbcf + ‘</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.jttdbcf + ‘</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.qmf_bz + ‘</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.dsfzwf + ‘</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.ze + ‘</td>‘);
arr.push(‘<td align="center" height="30px">/</td>‘);
arr.push(‘<td align="center" height="30px">/</td>‘);
arr.push(‘<td align="center" height="30px"></td></tr>‘);
}
//else中是相同字段的數據
} else {
arr.push(‘<tr><td colspan="2" align="center" height="30px">‘ + row.hm + ‘</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.mj + ‘</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.azbcf + ‘</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.grtdbcf + ‘</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.jttdbcf + ‘</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.qmf_bz + ‘</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.dsfzwf + ‘</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.ze + ‘</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.sfzhm + ‘</td>‘);
arr.push(‘<td align="center" height="30px">‘ + row.remark + ‘</td>‘);
arr.push(‘<td align="center" height="30px">‘);
arr.push(‘<a onclick="toAdd(‘+ row.id + ‘)" class="easyui-linkbutton" title="修改" data-options="plain: true,iconCls:\‘icon-edit\‘"></a> ‘);
arr.push(‘<a onclick="toDelet(‘+ row.id + ‘)" class="easyui-linkbutton" title="刪除" data-options="plain: true,iconCls:\‘icon-remove\‘"></a></td></tr>‘);
}
});
//將動態添加的行放在form表單中
$(".TBLForm tbody").html(arr.join(""));
//渲染一下
$.parser.parse($(".TBLForm tbody"));
}
</script>
該模塊中有幾個小點需要註意：
1. 用數組arr動態的為table添加行，動態數據顯示
2. push方法中添加td標簽，在該標簽中還可加input標簽
3. 用list集合進行前後臺數據傳輸
table形式的列表頁面顯示