table形式的列表页面显示

Posted bad--guy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了table形式的列表页面显示相关的知识,希望对你有一定的参考价值。

(该案例在项目中的reserve_bchmc.html,其对应的后台在CountBean中

先看一下效果图:

该列表页面并不是用easyUI中的datagrid实现的,而是用table实现页面显示的

原理:页面上的数据每一行数据存放在一个对象里面,与户主相关的数据都是从数据库取的,然后将查询出来的数据放在一个list集合中,查询出几条数据出来list集合中就有几个实体对象,对于后面进行计算的四条数据则是通过查出来的数据计算得到并new一个新的实体对象保存在其中,然后将该对象追加到list集合中,后台统一将该list传到前台,前台通过遍历,按顺序添加到table表中,前面户主数据都是相同的字段,因此只需要调用同一个该行添加操作,而后四条数据则根据对象在list集合中的位置就行一一添加,list集合位置用下标确定。

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">&nbsp;&nbsp;&nbsp;&nbsp;</td>
                                <td rowspan="2" align="center" height="30px">&nbsp;&nbsp;&nbsp;&nbsp;</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形式的列表页面显示的主要内容,如果未能解决你的问题,请参考以下文章

架构丰富的代码片段也应该用于产品列表吗?

代码翻译

jquery datatable:页面长度选择列表未显示

13 个非常有用的 Python 代码片段

Android:RecyclerView 不显示片段中的列表项

jquery之从ajax获取json数据以表格的形式显示在页面上