datagrid不展示行号原因之一

最新推荐文章于 2025-06-06 13:49:56 发布

原创最新推荐文章于 2025-06-06 13:49:56 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jsp #easyui #行号 #table

前端专栏收录该内容

12 篇文章

订阅专栏

在使用EasyUI的datagrid时，设置rownumbers: true未能显示行号，但发现行号元素存在且被页面布局遮挡。通过检查jsp文件，发现datagrid的div容器位于form内部，移除该div出form后，行号正常显示。这是一个因忽视代码细节导致的问题，提醒开发者注意代码结构对界面展示的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目碰到个问题：使用easyui作为前端框架，加载datagrid时，虽然设置了rownumbers: true这个参数，但是页面依然没有显示出行号，但是每一行的前面都有一段空白的距离，如下图所示：

使用F12在浏览器中查找页面元素，发现行号是存在的，所以定位问题是在页面布局出了问题导致行号被覆盖或者遮挡了，仔细检查jsp文件，发现div被放在了form中，如下所示：

<form id="formQueryCond" method="POST">
	<input id="inputId" name="inputId"/>
	<input id="inputLevel" name="inputLevel"/>
	<input id="inputStartDate" name="inputStartDate"/>
	<input id="inputEndDate" name="inputEndDate"/>

	<div id="selConditionArea" class="easyui-panel" fit="true">
		<table id="dataList"  data-options="toolbar:'#tt'"></table>
		<div id="tt">
			<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true"
			   onclick="exportData()">导出Excel</a>
		</div>
	</div>
</form>

将div挪出form，如下所示：

<form id="formQueryCond" method="POST">
	<input id="inputId" name="inputId"/>
	<input id="inputLevel" name="inputLevel"/>
	<input id="inputStartDate" name="inputStartDate"/>
	<input id="inputEndDate" name="inputEndDate"/>
</form>

<div id="selConditionArea" class="easyui-panel" fit="true">
	<table id="dataList"  data-options="toolbar:'#tt'"></table>
	<div id="tt">
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true"
		   onclick="exportData()">导出Excel</a>
	</div>
</div>

再次刷新，行号出来了，问题解决。

这次主要是在写代码过程中，只顾拷贝之前项目的代码，没有注意细节，导致出现这种问题，记录在此，便于提醒自己