<display:table>和<c:forEach>的自增排序号

最新推荐文章于 2025-01-23 15:24:58 发布
原创 最新推荐文章于 2025-01-23 15:24:58 发布 · 4.4k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jsp #序号 #索引

本文介绍如何在JSTL的&lt;c:forEach&gt;和DisplayTag的&lt;display:table&gt;中实现自动序号功能。通过具体代码示例展示了如何获取当前项的索引、计数及判断是否为首尾项，并介绍了&lt;display:table&gt;中序号的设置方法。

1.<c:forEach>的自动序号：

<!--
  c:forEach中的varStatus属性。指向一个字符串，该字符串引用一个对象。  map.put("vs",一个对象);这个对象记录着当前遍历的元素的一些信息：
     getIndex():返回索引。从0开始
     getCount():返回计数。从1开始
     isLast():是否是最后一个元素
     isFirst():是否是第一个元素

-->
    <c:forEach items="${list}" var="num" varStatus="vs">
        <tr>
            <td>${num}</td>
            <td>${vs.index}</td>
            <!-- 自动序号 -->
            <td>${vs.count}</td>
            <td>${vs.first}</td>
            <td>${vs.last}</td>
        </tr>
    </c:forEach>

2.<display:table>的自动序号：

<display:table name="itemList" id="itemNews" requestURI="list.ht" sort="external" cellpadding="1" cellspacing="1" export="true"  class="table-grid">

<!-- 注意:${itemNews_rowNum}中的itemNews为<display:table>的id值. -->
<display:column title="序号" style="width:50;text-align:center">${itemNews_rowNum}</display:column>
<display:column title="新闻标题" sortable="true" sortName="title" style="text-align:center">
  <a href="get.ht?id=${itemNews.id}" style="text-decoration:none;">${itemNews.title}</a>
</display:column>
<display:column title="发布时间" sortable="true" sortName="publishTime" style="text-align:center">
  <fmt:formatDate value="${itemNews.publishTime}" pattern="yyyy-MM-dd"/>
</display:column>

</display:table>

注意:学习一下<display:table>中居中的设置.

3.参考文章:

(1) <display:table>和<c:forEach>的自动序号;
(2) JSTL学习总结;

Electron开发-第10篇：项目实战：桌面应用开发
无
05-21 131
本文介绍了如何使用Electron开发一个简单的任务管理桌面应用。首先，项目需求分析与设计部分详细划分了功能模块，包括任务列表、任务添加、任务编辑、任务删除和用户设置模块，并设计了SQLite数据库结构和接口规划。接着，页面开发与交互实现部分展示了主界面和子界面的开发，使用HTML、CSS和JavaScript构建任务列表和任务添加表单，并通过ipcRenderer与主进程进行通信，实现数据的展示和操作功能。主进程使用ipcMain监听渲染进程的请求，并与数据库进行交互。整体流程清晰，涵盖了从需求分析到页面
黑马Java第二阶段：JavaWeb+AI（笔记）
chen的博客
05-25 3595
Web，即全球广域网（World Wide Web，简称 www）是通过浏览器访问的网站系统前端程序：负责界面展示（HTML/CSS/JS）服务端程序：处理业务逻辑（Java、SpringBoot）数据库：存储和管理数据（MySQL等）前端：负责网页在浏览器端的“结构 + 外观 + 行为”三大核心技术技术功能作用HTML页面结构（内容和标签）CSS页面表现（样式与布局）JavaScript页面行为（交互与响应）运行原理：浏览器解析程序员编写的代码 → 渲染为用户看到的网页。
[JSP] c:forEach 如何输出序号
sinat_21274091的博客
05-04 680
关键在于的varStatus属性，具体代码如下： 序号 姓名 ${ status.index + 1} ${ student.name} 备注：status.index是从0开始的。
c:forEach 如何输出序号
weixin_34265814的博客
09-04 243
关键在于&lt;c:forEach&gt;的varStatus属性，具体代码如下： &lt;table width="500" border="0" cellspacing="0" cellpadding="0"&gt; &lt;tr&gt; &lt;th&gt;序号&lt;/th&gt; &am
c:forEach遍历标签自动生成序号
weiqiang915的博客
11-25 1349
1、引入jstl核心标签库：<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 2、 <table> <tr> <td>序号</td> <td>姓名</td> <td>年龄</td> &lt...
《JSP极简教程》c:forEach 如何输出序号
AI天才研究院
04-01 8691
使用&lt;c:forEach&gt;的varStatus属性，具体代码如下： &lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %&gt; &lt;%@ taglib prefix="c" uri="http:/
以下mrassorciator.vue再增加一個功能，當點按（執行匹配流程）時，同時fetch (‘MRInfo/’)中mrreadnumber欄位的數字，比較所有各個醫案資料中此數字的大小，若是排在前1/5者，在該醫案mrpriority欄位選擇（高）並patch; 若是排在中間3/5者，在該醫案mrpriority欄位選擇（中）並patch；若是排在後1/5者，在該醫案mrpriority欄位選擇（低）並patch；執行完後顯示重要性高、中、低的醫案數目；其餘原來功能不要改變： <div> <div class="controls"> <button @click="processAllMatches" :disabled="loading">執行匹配流程</button> <button v-if="hasData" @click="showData = !showData" class="toggle-button" :class="{ active: showData }"> {{ showData ? '隱藏匹配結果' : '顯示匹配結果' }} </button> </div> <div v-if="loading">處理中... 已完成 {{ completedTasks }}/{{ totalTasks }} 項 (批量創建中)</div> <div v-if="error" class="error">{{ error }}</div> <div v-if="success" class="success"> 所有匹配操作完成！{{ createdAssociations > 0 ? `共创建 ${createdAssociations} 个新关联` : '' }} </div> <div v-show="showData && hasData"> <div class="toggle-header"> <h3>字段匹配結果</h3> <span class="collapse-icon" @click="showData = false">▲</span> </div> <div class="summary"> <h4>匹配統計</h4> <table> <thead> <tr> <th>標籤類型</th> <th>總記錄數</th> <th>匹配成功</th> <th>匹配率</th> <th>創建關聯</th> </tr> </thead> <tbody> <tr v-for="(stats, tagType) in matchStatistics" :key="tagType"> <td>{{ tagType }}</td> <td>{{ stats.total }}</td> <td>{{ stats.matched }}</td> <td>{{ stats.rate }}%</td> <td>{{ stats.created }}</td> </tr> </tbody> </table> </div> <div v-for="(matches, tagType) in matchedResults" :key="tagType" class="match-section"> <div class="section-header" @click="toggleSection(tagType)"> <h4>{{ tagType }} 匹配詳情 ({{ matches.length }}條)</h4> <span>{{ isSectionOpen(tagType) ? '▼' : '▶' }}</span> </div> <div v-show="isSectionOpen(tagType)"> <table class="match-details"> <thead> <tr> <th>病例ID</th> <th>匹配標籤ID</th> <th>關聯狀態</th> </tr> </thead> <tbody> <tr v-for="(match, idx) in matches" :key="idx"> <td>{{ match.mrId }}</td> <td> <template v-if="match.tagIds.length"> <span v-for="(tagId, i) in match.tagIds" :key="tagId"> {{ tagId }}<span v-if="i < match.tagIds.length - 1">, </span> </span> </template> <span v-else>無匹配</span> </td> <td :class="{'match-success': match.associationCreated}"> {{ match.associationCreated ? '✓ 已創建' : match.matched ? '✓ 已存在' : '✗' }} </td> </tr> </tbody> </table> </div> </div> </div> </div> </template> <script setup> import { ref, computed } from 'vue'; // 状态管理 const loading = ref(false); const error = ref(null); const success = ref(false); const showData = ref(false); const completedTasks = ref(0); const totalTasks = ref(8); const expandedSections = ref([]); const createdAssociations = ref(0); // 数据存储 const matchedResults = ref({}); const matchStatistics = ref({}); // 计算是否有匹配数据 const hasData = computed(() => Object.keys(matchedResults.value).length > 0); // 分区展开状态方法 const isSectionOpen = (tagType) => expandedSections.value.includes(tagType); const toggleSection = (tagType) => { const index = expandedSections.value.indexOf(tagType); if (index > -1) { expandedSections.value.splice(index, 1); } else { expandedSections.value.push(tagType); } }; // 获取CSRF令牌函数 const getCSRFToken = () => { const cookieValue = document.cookie .split('; ') .find(row => row.startsWith('csrftoken=')) ?.split('=')[1]; return cookieValue || ''; }; // 安全API请求函数 const secureFetch = async (url, method, data = null) => { try { const config = { method, headers: { 'Content-Type': 'application/json', 'X-CSRFToken': getCSRFToken() }, ...(data && { body: JSON.stringify(data) }) }; const response = await fetch(url, config); if (!response.ok) throw new Error(`HTTP ${response.status}`); return await response.json(); } catch (err) { throw new Error(`请求失败: ${url} - ${err.message}`); } }; // 关联API端点映射 const getAssociationEndpoint = (tagType) => { const map = { 'DNTag': 'MRDN/', 'MNTag': 'MRMN/', 'SNTag': 'MRSN/', 'PNTag': 'MRPN/', 'FNTag': 'MRFN/', 'DiaNTag': 'MRDiaN/', 'TNTag': 'MRTN/', 'ENTag': 'MREN/', 'PRNTag': 'MRPRN/' // 新增PRNTag端点 }; return map[tagType] || ''; }; // 字段名映射（根据标签类型获取关联字段名） const getAssociationField = (tagType) => { const map = { 'DNTag': 'dntag', 'MNTag': 'mntag', 'SNTag': 'sntag', 'PNTag': 'pntag', 'FNTag': 'fntag', 'DiaNTag': 'diantag', 'TNTag': 'tntag', 'ENTag': 'entag', 'PRNTag': 'prntag' // 新增PRNTag字段 }; return map[tagType] || ''; }; // 批量创建关联（参考a.vue的批量创建逻辑） const batchCreateAssociations = async (tagType, assocEndpoint, assocField, matches) => { try { // 1. 获取现有关联记录 const existingAssociations = await secureFetch(assocEndpoint, 'GET'); // 2. 创建唯一标识的Set const existingSet = new Set(); existingAssociations.forEach(item => { existingSet.add(`${item.mrinfo}-${item[assocField]}`); }); // 3. 收集需要创建的关联 const createRequests = []; const matchUpdates = []; // 4. 遍历匹配结果 matches.forEach(match => { if (match.matched) { match.tagIds.forEach(tagId => { const associationKey = `${match.mrId}-${tagId}`; // 检查是否已存在 if (!existingSet.has(associationKey)) { createRequests.push( secureFetch(assocEndpoint, 'POST', { mrinfo: match.mrId, [assocField]: tagId }) ); matchUpdates.push({ matchId: match.mrId, tagId }); } }); } }); // 5. 批量创建新关联 if (createRequests.length > 0) { const responses = await Promise.all(createRequests); const allSuccess = responses.every(res => res && !res.error); if (!allSuccess) { throw new Error(`${tagType}批量创建失败`); } // 6. 更新匹配状态 matchedResults.value[tagType].forEach(match => { matchUpdates.forEach(update => { if (match.mrId === update.matchId && match.tagIds.includes(update.tagId)) { match.associationCreated = true; } }); }); return createRequests.length; } return 0; } catch (err) { throw new Error(`${tagType}关联创建错误: ${err.message}`); } }; // 匹配处理函数 const processMatch = async (config) => { const { tagType, nameField } = config; try { const assocEndpoint = getAssociationEndpoint(tagType); const assocField = getAssociationField(tagType); // 1. 获取数据 const [mrInfos, tags] = await Promise.all([ secureFetch('MRInfo/', 'GET'), secureFetch(`${tagType}/`, 'GET') ]); matchedResults.value[tagType] = []; // 2. 执行匹配 mrInfos.forEach(mr => { const caseContent = (mr.mrcase || '').toLowerCase(); const matchedTagIds = []; tags.forEach(tag => { const tagName = tag[`${nameField}name`] || ''; if (tagName && caseContent.includes(tagName.trim().toLowerCase())) { matchedTagIds.push(tag.id); } }); matchedResults.value[tagType].push({ mrId: mr.id, tagIds: matchedTagIds, matched: matchedTagIds.length > 0, associationCreated: false }); }); // 3. 批量创建关联 const createdCount = await batchCreateAssociations( tagType, assocEndpoint, assocField, matchedResults.value[tagType] ); // 4. 更新统计信息 matchStatistics.value[tagType] = { total: mrInfos.length, matched: matchedResults.value[tagType].filter(m => m.matched).length, rate: mrInfos.length ? Math.round((matchedResults.value[tagType].filter(m => m.matched).length / mrInfos.length) * 100) : 0, created: createdCount }; createdAssociations.value += createdCount; completedTasks.value++; } catch (err) { throw new Error(`${tagType}处理错误: ${err.message}`); } }; // 主处理函数 const processAllMatches = async () => { loading.value = true; error.value = null; success.value = false; showData.value = true; completedTasks.value = 0; createdAssociations.value = 0; expandedSections.value = []; matchedResults.value = {}; matchStatistics.value = {}; try { const tasks = [ { tagType: 'DNTag', nameField: 'dn' }, { tagType: 'MNTag', nameField: 'mn' }, { tagType: 'SNTag', nameField: 'sn' }, { tagType: 'PNTag', nameField: 'pn' }, { tagType: 'FNTag', nameField: 'fn' }, { tagType: 'DiaNTag', nameField: 'dian' }, { tagType: 'TNTag', nameField: 'tn' }, { tagType: 'ENTag', nameField: 'en' }, { tagType: 'PRNTag', nameField: 'prn' } // 新增PRNTag处理任务 ]; totalTasks.value = tasks.length; // 顺序执行所有任务 for (const task of tasks) { await processMatch(task); } success.value = true; expandedSections.value = tasks.map(t => t.tagType); } catch (err) { error.value = err.message; showData.value = false; } finally { loading.value = false; } }; </script> <style scoped> /* 样式保持不变 */ .controls { display: flex; gap: 15px; margin-bottom: 20px; align-items: center; } button { padding: 10px 20px; background: #42b983; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; transition: background 0.3s; } button:hover { background: #359f74; } button:disabled { background: #cccccc; cursor: not-allowed; } .toggle-button { background: #3498db; } .toggle-button:hover { background: #2980b9; } .toggle-button.active { background: #e74c3c; } .toggle-button.active:hover { background: #c0392b; } .error { color: #e74c3c; padding: 10px; background: #ffebee; border-radius: 4px; margin-top: 10px; } .success { color: #2ecc71; padding: 10px; background: #e8f5e9; border-radius: 4px; margin-top: 10px; } .toggle-header { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; padding: 10px 0; border-bottom: 2px solid #42b983; cursor: pointer; } .toggle-header h3 { margin: 0; color: #2c3e50; } .collapse-icon { font-size: 18px; cursor: pointer; padding: 5px; transition: transform 0.3s; } .toggle-header:hover .collapse-icon { transform: scale(1.2); } .summary { margin: 20px 0; padding: 15px; background: #f9f9f9; border-radius: 6px; } .match-section { margin-bottom: 25px; border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden; } .section-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; background-color: #f5f7fa; cursor: pointer; transition: background 0.2s; } .section-header:hover { background-color: #ebf0f5; } .section-header h4 { margin: 0; color: #34495e; } .match-details { margin: 0; border-top: 1px solid #e0e0e0; width: 100%; } .match-details th, .match-details td { padding: 10px 12px; text-align: center; } .match-details th:nth-child(1), .match-details td:nth-child(1) { width: 30%; } .match-details th:nth-child(2), .match-details td:nth-child(2) { width: 40%; text-align: left; } .match-details th:nth-child(3), .match-details td:nth-child(3) { width: 30%; } th { background-color: #42b983; color: white; font-weight: 600; } th, td { border: 1px solid #e0e0e0; } .match-success { color: #27ae60; font-weight: bold; } tr:nth-child(even) { background-color: #f8f9fa; } </style>
最新发布
10-24
<think>我们需要在现有的 processAllMatches 函数中增加一个新功能： 1. 当点击“执行匹配流程”时，在完成原有的匹配流程后，新增一个步骤：获取所有医案数据（MRInfo/）的mrreadnumber字段值。 2. 根据这些值...
代码生成器（4）
crystallf的博客
05-20 259
上节课我们完成了90%的代码，这节课我们将此部分完全完成。 主要任务：添加Category表，完成jsp.vm 创建jsp.vm ①修改，添加foreach <!-- 列表 --> <div id="right"> <button type="button" class="btn btn-primary" onclick="showAddDiv()"...
C# 入门经典11-12 章节 EF Core ORM 框架和 Linq技术-
converserrr的博客
01-23 813
EF Core和Linq
el表达式 c:foreach自动生成序号
见证自己学习,成长的记录
07-06 2716
el表达式 c:foreach自动生成序号 代码 <c:forEach items="${xxx}" var="xxx" varStatus="status"> <td><c:out value="${status.index+1}" /></td> 效果
在jsp页面中设置<c:foreach>中序号
啊哦啊哦啊哦！ 开心快乐哟！
06-21 4862
首先要使用标签的话需要先引入下面这句话： 设置中的序号主要在于它的varStatus属性; 具体的代码如下： ${stauts.count} ${record.id} ${record.topicname} ${record.content} $
c:forEach 标签varStatus属性自增序号
01-09 1265
 &lt;c:if test="${(dto.rptInfoDtoList)!= null &amp;&amp; fn:length(dto.rptInfoDtoList) &gt; 0}"&gt;                             &lt;c:forEach var="rptInfo" items="${(dto.rptInfoDtoList)}" varStatus=&quo
c:foreach如何输出序号
weixin_30646315的博客
04-01 168
关键在于<c:forEach>的varStatus属性，具体代码如下： <table width="500" border="0" cellspacing="0" cellpadding="0"> <tr> <th>序号</th> <th>姓名</th> ...
<display:table>和<c:forEach>的自动序号
bosschen
10-12 249
&lt;c:forEach&gt;的自动序号：参考红色字体   &lt;c:forEach items="${weeklyDetailInfo}" var="wd" varStatus="status"&gt;   &lt;tr&gt;    &lt;td class="td1"&gt;&lt;input name="hid" id=
jsp中 c:forEach 如何输出递增序号
热门推荐
小码农的博客
04-18 2万+
第一：jsp页面中引入： <%@ taglib prefix=”c” uri=”http://java.sun.com/jsp/jstl/core”%> 第二：建立相应的table <tr> <th>编号 </th> <th>订单号 </th> <th>支付时间</th>
[JSP] c:forEach 输出序号判断奇偶数作不同处理
java_10的专栏
03-09 8831
关键在于的varStatus属性，具体代码如下：      序号     姓名     ${ status.index + 1}     ${ student.name} 这是奇数 这是偶数 备注：status.index是从0开始的。
jsp中<c:foreach>标签的序号问题
啊哦啊哦啊哦！ 开心快乐哟！
06-21 1650
采用ststus.count进行序号的显示，但是设置了分页之后会出现点击下一页之后第二页的序号还是从1开始排序的，有时候并不方便，所以本文章针对带有分页的序号进行设置； varStatus="status"> ${status.count+(currentPage-1)*pageSize} ${record.id}
<c:forEach>的自动序号
ITHuplion的博客
09-28 693
${num} ${vs.index} ${vs.count} ${vs.first} ${vs.last}
JSTL核心标签库详解及<c:forEach><c:if>等常用标签应用
描述中列出的关键字涵盖了JSTL核心标签库中的主要标签，包括条件判断类（如`<c:if>`、`<c:choose>`、`<c:when>`、`<c:otherwise>`）、循环迭代类（如`<c:forEach>`、`<c:forTokens>`）、变量操作类（如`<c:set>`、`...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值