使用JSTL动态生成表格Table

  为了给用户更好的体验,在很多情况下,我们需要动态生成表格来实现表单的灵活性展示。有些人喜欢在后端代码动态创建HTML,来展现表格;也有的人喜欢在前端动态创建Table。因为表格Table本身是一种前端展示性HTML语言,所以我更喜欢使用前端语言动态创建表格。接下来,本文将展示如何使用JSTL动态创建表格。


  现在先看一下,我们要实现的动态表格展示方式及有哪些数据可以使用。我们有一个两层的目录,目录结构如下:


{
      "_id" : "N1379828096012",
      "itemPid" : "N0",
      "inspectContent" : "精品国画",
      "itemDisplayOrder" : 0,
      "itemLevel" : 1
    }, {
      "_id" : "N1379828110463",
      "itemPid" : "N1379828096012",
      "inspectContent" : "花鸟画-牡丹",
      "itemDisplayOrder" : 4,
      "itemLevel" : 2
    }, {
      "_id" : "N1379828116660",
      "itemPid" : "N1379828096012",
      "inspectContent" : "人物画-道渡",
      "itemDisplayOrder" : 5,
      "itemLevel" : 2
    }, {
      "_id" : "N1379828134619",
      "itemPid" : "N0",
      "inspectContent" : "美式油画",
      "itemDisplayOrder" : 1,
      "itemLevel" : 1
    }, {
      "_id" : "N1379828142238",
      "itemPid" : "N1379828134619",
      "inspectContent" : "山水画-高山流水",
      "itemDisplayOrder" : 0,
      "itemLevel" : 2
    }, {
        ...
        ...
    }


  要展示的效果图如下:

112826639.jpg

  问题分析:在整个表格中,表头的展示是最简单的,直接写静态的HTML代码<th>就可以完成,比较复杂的是评论这一项,因为这个地方已经出现了迭代。最复杂的地方是画风和画作,因为这是一个两级联动目录,必须根据画作的内容数量来判断画风所占的单元格跨几行(rowspan)。


  解决画风跨几行的问题的方式有两种:一种是先绘画出画作的单元格<td>,根据画作的数量计算画风所占的行数,再绘制画风的单元格<td>。另外一种方式是先绘制画风的单元格<td>,根据画风下面画作列表,绘制画作单元格<td>


按照从左到右,从前往后的顺序来说,大多数人比较习惯使用第二种方式绘制单元格,而事实也证明第二种绘制方式要比第一种方式更容易理解。而实际上,两种绘制方法的效率是差不多的。具体的实现代码如下:


<table border="1" cellpadding="1" cellspacing="1" style="width:100%;">
    <caption>京华艺社书画</caption>
    <c:if test="${firstArtsList!=null && secondArtsList!=null}">
        <tr>
            <th rowspan="2">画风</th>
            <th rowspan="2">画作</th>
            <th colspan="3">评论</th>
        </tr>
        <tr>
            <th>怒赞<input type="checkBox" id="chkSelectAll" name="allSelected" value="1" checked              <th>超赞</th>
            <th>说明</th>
        </tr>
        <c:forEach items="${firstArtsList}" var="item1" varStatus="status1">
            <c:set var="row_count" value="0"></c:set>
            <c:set var="child_count_1" value="0"></c:set>
            <c:set var="child_count_2" value="0"></c:set>
            <c:if test="${secondArtsList!=null}">
                <c:forEach items="${secondArtsList}" var="item2" varStatus="status3">
                    <c:if test="${item1.itemId == item2.itemPid}">
                        <c:set var="row_count" value="${row_count+1}"></c:set>
                    </c:if>
                </c:forEach>
                <tr>
                    <td rowspan="${row_count}">${item1.artsContent}</td>
                    <c:forEach items="${secondArtsList}" var="item2" varStatus="status2">
                        <c:if test="${item1.itemId==item2.itemPid}">
                            <c:set var="child_count_1" value="${child_count_1+1}"></c:set>
                            <c:if test="${child_count_1==1}">
                                <td>${item2.artsContent}</td>
                                      
                                <c:if test="${actionName=='updateArtsResult'}">       <!-- 编辑条件下 -->
                                    <c:forEach items="${ArtsList}" var="ArtsItem" varStatus="ArtsStatus">
                                        <c:if test="${ArtsItem.itemId == item2.itemId}">
                                            <td>
                                                <input type="radio" name="ArtsList[${status2.index+1}].result" value="1" <c:if test="${ArtsItem.result == '1'}">checked</c:if> />
                                            </td>
                                            <td>
                                                <input type="radio" name="ArtsList[${status2.index+1}].result" value="0" <c:if test="${ArtsItem.result == '0'}">checked</c:if>                                             </td>
                                            <td>
                                                <input type="text" name="ArtsList[${status2.index+1}].remark" value="${ArtsItem.remark}" />
                                                <input type="hidden" name="ArtsList[${status2.index+1}].itemId" value="${item2.itemId}">
                                                <input type="hidden" name="ArtsList[${status2.index+1}].itemName" value="${item2.artsContent}">
                                                <input type="hidden" name="ArtsList[${status2.index+1}].resultId" value="${ArtsItem.resultId}">
                                            </td>
                                        </c:if>
                                    </c:forEach>
                                </c:if>
                                <c:if test="${actionName == 'addArtsResult'}">        <!-- 添加条件下 -->
                                    <td><input type="radio" name="ArtsList[${status2.index+1}].result" value="1" checked></td>
                                    <td><input type="radio" name="ArtsList[${status2.index+1}].result" value="0"></td>
                                    <td>
                                        <input type="text" name="ArtsList[${status2.index+1}].remark" value="" />
                                        <input type="hidden" name="ArtsList[${status2.index+1}].itemName" value="${item2.artsContent}">
                                        <input type="hidden" name="ArtsList[${status2.index+1}].itemId" value="${item2.itemId}">
                                    </td>
                                </c:if>
                            </c:if>                              
                        </c:if>
                    </c:forEach>
                </tr>
                <c:forEach items="${secondArtsList}" var="item2" varStatus="status2">
                    <c:if test="${item1.itemId==item2.itemPid}">
                        <c:set var="child_count_2" value="${child_count_2+1}"></c:set>
                        <c:if test="${child_count_2!=1}">
                            <tr>
                                <td>${item2.artsContent}</td>
                                <c:if test="${actionName == 'updateArtsResult'}">     <!-- 编辑条件下 -->
                                    <c:forEach items="${ArtsList}" var="ArtsItem" varStatus="ArtsStatus">
                                        <c:if test="${ArtsItem.itemId == item2.itemId}">
                                            <td>
                                                <input type="radio" name="ArtsList[${status2.index+1}].result" value="1" <c:if test="${ArtsItem.result == '1'}">checked</c:if> />
                                            </td>
                                            <td>
                                                <input type="radio" name="ArtsList[${status2.index+1}].result" value="0" <c:if test="${ArtsItem.result == '0'}">checked</c:if>                                             </td>
                                            <td>
                                                <input type="text" name="ArtsList[${status2.index+1}].remark" value="${ArtsItem.remark}" />
                                                <input type="hidden" name="ArtsList[${status2.index+1}].itemName" value="${item2.artsContent}">
                                                <input type="hidden" name="ArtsList[${status2.index+1}].itemId" value="${item2.itemId}">
                                                <input type="hidden" name="ArtsList[${status2.index+1}].resultId" value="${ArtsItem.resultId}">
                                            </td>
                                        </c:if>
                                    </c:forEach>
                                </c:if>
                                <c:if test="${actionName == 'addArtsResult'}">        <!-- 添加条件下 -->
                                    <td><input type="radio" name="ArtsList[${status2.index+1}].result" value="1" checked></td>
                                    <td><input type="radio" name="ArtsList[${status2.index+1}].result" value="0"                                     <td>
                                        <input type="text" name="ArtsList[${status2.index+1}].remark" value="" />
                                        <input type="hidden" name="ArtsList[${status2.index+1}].itemName" value="${item2.artsContent}">
                                        <input type="hidden" name="ArtsList[${status2.index+1}].itemId" value="${item2.itemId}">
                                    </td>
                                </c:if>
                            </tr>
                        </c:if>
                    </c:if>
                </c:forEach>
            </c:if>
        </c:forEach>
    </c:if>
</table>

  JSTL生成的HTML如下:

<table border="1" cellpadding="1" cellspacing="1" style="width: 100%;">
    <caption style="font-size: 22px; font-weight: bold;">京华艺社书画</caption>
    <tr>
        <th rowspan="2">画风</th>
        <th rowspan="2">画作</th>
        <th colspan="3">评论</th>
    </tr>
    <tr>
        <th>怒赞<input type="checkBox" id="chkSelectAll" name="allSelected"
            value="1" checked         </th>
        <th>超赞</th>
        <th>说明</th>
    </tr>
    <tr>
        <td rowspan="5">精品国画</td>
        <td>花鸟画-牡丹</td>
        <!-- 添加条件下 -->
        <td><input type="radio" name="artsList[1].result" value="1"
            checked>
        </td>
        <td><input type="radio" name="artsList[1].result" value="0">
        </td>
        <td><input type="text" name="artsList[1].remark" value="" />
            <input type="hidden" name="artsList[1].itemName" value="花鸟画-牡丹">
            <input type="hidden" name="artsList[1].itemId"
            value="N1382669078836"></td>
    </tr>
    <tr>
        <td>花鸟画-月季</td>
        <!-- 添加条件下 -->
        <td><input type="radio" name="artsList[2].result" value="1"
            checked>
        </td>
        <td><input type="radio" name="artsList[2].result" value="0"
                    </td>
        <td><input type="text" name="artsList[2].remark" value="" />
            <input type="hidden" name="artsList[2].itemName" value="花鸟画-月季">
            <input type="hidden" name="artsList[2].itemId"
            value="N1382669097696"></td>
    </tr>
    <tr>
        <td>人物画-道渡</td>
        <!-- 添加条件下 -->
        <td><input type="radio" name="artsList[3].result" value="1"
            checked>
        </td>
        <td><input type="radio" name="artsList[3].result" value="0"
                    </td>
        <td><input type="text" name="artsList[3].remark" value="" />
            <input type="hidden" name="artsList[3].itemName" value="人物画-道渡">
            <input type="hidden" name="artsList[3].itemId"
            value="N1382669122278"></td>
    </tr>
    <tr>
        <td>动物画-奔腾骏马</td>
        <!-- 添加条件下 -->
        <td><input type="radio" name="artsList[4].result" value="1"
            checked>
        </td>
        <td><input type="radio" name="artsList[4].result" value="0"
                    </td>
        <td><input type="text" name="artsList[4].remark" value="" />
            <input type="hidden" name="artsList[4].itemName" value="动物画-奔腾骏马">
            <input type="hidden" name="artsList[4].itemId"
            value="N1382669146883"></td>
    </tr>
    <tr>
        <td>山水画-依山傍水</td>
        <!-- 添加条件下 -->
        <td><input type="radio" name="artsList[5].result" value="1"
            checked>
        </td>
        <td><input type="radio" name="artsList[5].result" value="0"
                    </td>
        <td><input type="text" name="artsList[5].remark" value="" />
            <input type="hidden" name="artsList[5].itemName" value="山水画-依山傍水">
            <input type="hidden" name="artsList[5].itemId"
            value="N1382669166099"></td>
    </tr>
    <tr>
        <td rowspan="5">美式油画</td>
        <td>山水画-大浪滔天</td>
        <!-- 添加条件下 -->
        <td><input type="radio" name="artsList[6].result" value="1"
            checked>
        </td>
        <td><input type="radio" name="artsList[6].result" value="0">
        </td>
        <td><input type="text" name="artsList[6].remark" value="" />
            <input type="hidden" name="artsList[6].itemName" value="山水画-大浪滔天">
            <input type="hidden" name="artsList[6].itemId"
            value="N1382669196092"></td>
    </tr>
    <tr>
        <td>山水画-高山流水</td>
        <!-- 添加条件下 -->
        <td><input type="radio" name="artsList[7].result" value="1"
            checked>
        </td>
        <td><input type="radio" name="artsList[7].result" value="0"
                    </td>
        <td><input type="text" name="artsList[7].remark" value="" />
            <input type="hidden" name="artsList[7].itemName" value="山水画-高山流水">
            <input type="hidden" name="artsList[7].itemId"
            value="N1382669207937"></td>
    </tr>
    <tr>
        <td>人物画-杂技</td>
        <!-- 添加条件下 -->
        <td><input type="radio" name="artsList[8].result" value="1"
            checked>
        </td>
        <td><input type="radio" name="artsList[8].result" value="0"
                    </td>
        <td><input type="text" name="artsList[8].remark" value="" />
            <input type="hidden" name="artsList[8].itemName" value="人物画-杂技">
            <input type="hidden" name="artsList[8].itemId"
            value="N1382669216660"></td>
    </tr>
    <tr>
        <td>人物画-人体艺术</td>
        <!-- 添加条件下 -->
        <td><input type="radio" name="artsList[9].result" value="1"
            checked>
        </td>
        <td><input type="radio" name="artsList[9].result" value="0"
                    </td>
        <td><input type="text" name="artsList[9].remark" value="" />
            <input type="hidden" name="artsList[9].itemName" value="人物画-人体艺术">
            <input type="hidden" name="artsList[9].itemId"
            value="N1382669224424"></td>
    </tr>
    <tr>
        <td>生活画-过年</td>
        <!-- 添加条件下 -->
        <td><input type="radio" name="artsList[10].result" value="1"
            checked>
        </td>
        <td><input type="radio" name="artsList[10].result" value="0"
                    </td>
        <td><input type="text" name="artsList[10].remark" value="" />
            <input type="hidden" name="artsList[10].itemName" value="生活画-过年">
            <input type="hidden" name="artsList[10].itemId"
            value="N1382669238949"></td>
    </tr>
    <tr>
        <td rowspan="4">名家书法</td>
        <td>龙马精神</td>
        <!-- 添加条件下 -->
        <td><input type="radio" name="artsList[11].result" value="1"
            checked>
        </td>
        <td><input type="radio" name="artsList[11].result" value="0">
        </td>
        <td><input type="text" name="artsList[11].remark" value="" />
            <input type="hidden" name="artsList[11].itemName" value="龙马精神">
            <input type="hidden" name="artsList[11].itemId"
            value="N1382669259587"></td>
    </tr>
    <tr>
        <td>珠联璧合</td>
        <!-- 添加条件下 -->
        <td><input type="radio" name="artsList[12].result" value="1"
            checked>
        </td>
        <td><input type="radio" name="artsList[12].result" value="0"
                    </td>
        <td><input type="text" name="artsList[12].remark" value="" />
            <input type="hidden" name="artsList[12].itemName" value="珠联璧合">
            <input type="hidden" name="artsList[12].itemId"
            value="N1382669267222"></td>
    </tr>
    <tr>
        <td>天道酬勤</td>
        <!-- 添加条件下 -->
        <td><input type="radio" name="artsList[13].result" value="1"
            checked>
        </td>
        <td><input type="radio" name="artsList[13].result" value="0"
                    </td>
        <td><input type="text" name="artsList[13].remark" value="" />
            <input type="hidden" name="artsList[13].itemName" value="天道酬勤">
            <input type="hidden" name="artsList[13].itemId"
            value="N1382669290698"></td>
    </tr>
    <tr>
        <td>精气神</td>
        <!-- 添加条件下 -->
        <td><input type="radio" name="artsList[14].result" value="1"
            checked>
        </td>
        <td><input type="radio" name="artsList[14].result" value="0"
                    </td>
        <td><input type="text" name="artsList[14].remark" value="" />
            <input type="hidden" name="artsList[14].itemName" value="精气神">
            <input type="hidden" name="artsList[14].itemId"
            value="N1382669316236"></td>
    </tr>
    <tr>
        <td rowspan="6">仿古名画</td>
        <td>清余挚花鸟册之兰花蝴蝶</td>
        <!-- 添加条件下 -->
        <td><input type="radio" name="artsList[15].result" value="1"
            checked>
        </td>
        <td><input type="radio" name="artsList[15].result" value="0">
        </td>
        <td><input type="text" name="artsList[15].remark" value="" />
            <input type="hidden" name="artsList[15].itemName"
            value="清余挚花鸟册之兰花蝴蝶"> <input type="hidden"
            name="artsList[15].itemId" value="N1382669363806"></td>
    </tr>
    <tr>
        <td>清余挚花鸟册之富贵牡丹</td>
        <!-- 添加条件下 -->
        <td><input type="radio" name="artsList[16].result" value="1"
            checked>
        </td>
        <td><input type="radio" name="artsList[16].result" value="0"
                    </td>
        <td><input type="text" name="artsList[16].remark" value="" />
            <input type="hidden" name="artsList[16].itemName"
            value="清余挚花鸟册之富贵牡丹"> <input type="hidden"
            name="artsList[16].itemId" value="N1382669384370"></td>
    </tr>
    <tr>
        <td>清余挚花鸟册之金秋赏菊</td>
        <!-- 添加条件下 -->
        <td><input type="radio" name="artsList[17].result" value="1"
            checked>
        </td>
        <td><input type="radio" name="artsList[17].result" value="0"
                    </td>
        <td><input type="text" name="artsList[17].remark" value="" />
            <input type="hidden" name="artsList[17].itemName"
            value="清余挚花鸟册之金秋赏菊"> <input type="hidden"
            name="artsList[17].itemId" value="N1382669404003"></td>
    </tr>
    <tr>
        <td>清余挚花鸟册之花开吉祥</td>
        <!-- 添加条件下 -->
        <td><input type="radio" name="artsList[18].result" value="1"
            checked>
        </td>
        <td><input type="radio" name="artsList[18].result" value="0"
                    </td>
        <td><input type="text" name="artsList[18].remark" value="" />
            <input type="hidden" name="artsList[18].itemName"
            value="清余挚花鸟册之花开吉祥"> <input type="hidden"
            name="artsList[18].itemId" value="N1382669422672"></td>
    </tr>
    <tr>
        <td>故宫-山雨欲来图</td>
        <!-- 添加条件下 -->
        <td><input type="radio" name="artsList[19].result" value="1"
            checked>
        </td>
        <td><input type="radio" name="artsList[19].result" value="0"
                    </td>
        <td><input type="text" name="artsList[19].remark" value="" />
            <input type="hidden" name="artsList[19].itemName" value="故宫-山雨欲来图">
            <input type="hidden" name="artsList[19].itemId"
            value="N1382669437943"></td>
    </tr>
    <tr>
        <td>故宫-阿旁宫图</td>
        <!-- 添加条件下 -->
        <td><input type="radio" name="artsList[20].result" value="1"
            checked>
        </td>
        <td><input type="radio" name="artsList[20].result" value="0"
                    </td>
        <td><input type="text" name="artsList[20].remark" value="" />
            <input type="hidden" name="artsList[20].itemName" value="故宫-阿旁宫图">
            <input type="hidden" name="artsList[20].itemId"
            value="N1382669455768"></td>
    </tr>
</table>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值