bootstrap 实现用 table 表格显示list数据

逃离我推掉我的手 2022-07-12 10:25 581阅读 0赞

1.  后台如何获取list数据的就不详细解释了，传递到前台的方式，我用的是

model.addAttribute("categories",categories);

2.接下来前台可以通过$\{categories\}来获取list数据  
使用 foreach 循环显示数据以及其属性

<table class="table table-hover table-bordered">
        <thead>
        <tr>
            <th hidden="hidden">序号</th>
            <th>类别名称</th>
            <th>助记码</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="J_template">
        <c:if test="${fn:length(categories) == 0}">
            <tr>
                <td style="text-align: center;"> 无查询结果</td>
            </tr>
        </c:if>
        <c:if test="${fn:length(categories) > 0}">
            <c:forEach var="category" items="${categories}">
                <tr id="item">
                    <td hidden="hidden">${category.id}</td>
                    <td>${category.name}</td>
                    <td>${category.mnemonicCode}</td>
                    <td>
                        <div class="visible-md visible-lg hidden-sm hidden-xs action-buttons">
                            <a id="editLink" class="blue" onclick="editCategory(${category.id},'${category.name}','${category.mnemonicCode}')" data-toggle="modal" data-target="#editModel" title="编辑" style="cursor:pointer;">[编辑]</a>
                            <a id="delLink" class="blue" onclick="delCategory(${category.id})" data-toggle="modal" data-target="#tipModel" title="删除" style="cursor:pointer;">[删除]</a>
                        </div>
                    </td>
                </tr>
            </c:forEach>
        </c:if>
        </tbody>
    </table>