最近项目碰到个问题:使用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>
再次刷新,行号出来了,问题解决。
这次主要是在写代码过程中,只顾拷贝之前项目的代码,没有注意细节,导致出现这种问题,记录在此,便于提醒自己