今天在使用easyUI的时候，发现一个很奇怪的问题，就是我的中部布局的div中在加了一个table后，里面表格的分页栏就不能显示出来了，不多说了，直接上代码吧
datagrid表格加载函数
$('#back_llzpj_datagrid').datagrid({
url : '/Examination2.0/assessmentpaper_findAllPointPaper.action',
fit : true,
border : true,
fitColumns : true,
pagination : true,
singleSelect : true,
sortOrder : 'asc', //排序规则
pageList : [ 5, 10, 15, 20, 30, 50, 100 ], //每页多少条
pageSize : 5, //默认每页多少条
rownumbers : true, //排序ID
columns:[[
{field:'pid',title:'编号',width:100,checkbox :true,sortable:true},
{field:'className',title:'测评班级',width:100,sortable:true},
{field:'examDate',title:'测评日期',width:150,sortable:true},
{field:'pname',title:'试卷名称',width:200,sortable:true},
{field:'pstatusname',title:'试卷状态',width:50,sortable:true},
]]})
}
html代码
<div id="cc" class="easyui-layout" style="width: 950px; height: 600px;"
data-options="fit:true">
<div id="back_zjwh_datagrid_div" data-options="region:'center',title:'课程章节列表'">
<table id="search" width="800" height="20px">
<tr>
<td width="10%" class="fontColor">学期编号:</td>
<td width="8%"><input name='semester' type='radio' id="s1"
onClick="checkSemester('S1')" value='S1' checked />S1</td>
<td width="8%"><input name='semester' type='radio' id="s2"
onClick="checkSemester('S2')" value='S2' />S2</td>
<td width="12%"><input type='radio' name='semester' id="S3"
value='S3' onClick="checkSemester('S3')" />S3</td>
<td width="10%" class="fontColor">测评班级:</td>
<td width="15%"><select name='classes' class='select2'
id='classes'>
</select></td>
<td width="45%"><span style="color: red">请选择您的查询条件，然后点击右边的筛选</span></td>
<td><input name="btnView" type="button"
onClick="checkPointPaper()" class="inp_L1" id="btnView"
onMouseOver="this.className='inp_L2'"
onMouseOut="this.className='inp_L1'" value="筛选"></td>
</tr>
</table>
<table id="back_llzpj_datagrid">
</table>
</div>
</div>
这就是大概的代码，差不多就是我把id为search的table加到这个layout里面后，那个分页栏就被挤到屏幕的最下方去了，反正就是不在屏幕里面
解决办法
在id为back_zjwh_datagrid_div的div中加上这么段代码就可以了
style="padding-bottom:20px;background:#eee;"
通过padding-bottom这个属性就能把分页栏就显示出来了
datagrid表格加载函数
$('#back_llzpj_datagrid').datagrid({
url : '/Examination2.0/assessmentpaper_findAllPointPaper.action',
fit : true,
border : true,
fitColumns : true,
pagination : true,
singleSelect : true,
sortOrder : 'asc', //排序规则
pageList : [ 5, 10, 15, 20, 30, 50, 100 ], //每页多少条
pageSize : 5, //默认每页多少条
rownumbers : true, //排序ID
columns:[[
{field:'pid',title:'编号',width:100,checkbox :true,sortable:true},
{field:'className',title:'测评班级',width:100,sortable:true},
{field:'examDate',title:'测评日期',width:150,sortable:true},
{field:'pname',title:'试卷名称',width:200,sortable:true},
{field:'pstatusname',title:'试卷状态',width:50,sortable:true},
]]})
}
html代码
<div id="cc" class="easyui-layout" style="width: 950px; height: 600px;"
data-options="fit:true">
<div id="back_zjwh_datagrid_div" data-options="region:'center',title:'课程章节列表'">
<table id="search" width="800" height="20px">
<tr>
<td width="10%" class="fontColor">学期编号:</td>
<td width="8%"><input name='semester' type='radio' id="s1"
onClick="checkSemester('S1')" value='S1' checked />S1</td>
<td width="8%"><input name='semester' type='radio' id="s2"
onClick="checkSemester('S2')" value='S2' />S2</td>
<td width="12%"><input type='radio' name='semester' id="S3"
value='S3' onClick="checkSemester('S3')" />S3</td>
<td width="10%" class="fontColor">测评班级:</td>
<td width="15%"><select name='classes' class='select2'
id='classes'>
</select></td>
<td width="45%"><span style="color: red">请选择您的查询条件，然后点击右边的筛选</span></td>
<td><input name="btnView" type="button"
onClick="checkPointPaper()" class="inp_L1" id="btnView"
onMouseOver="this.className='inp_L2'"
onMouseOut="this.className='inp_L1'" value="筛选"></td>
</tr>
</table>
<table id="back_llzpj_datagrid">
</table>
</div>
</div>
这就是大概的代码，差不多就是我把id为search的table加到这个layout里面后，那个分页栏就被挤到屏幕的最下方去了，反正就是不在屏幕里面
解决办法
在id为back_zjwh_datagrid_div的div中加上这么段代码就可以了
style="padding-bottom:20px;background:#eee;"
通过padding-bottom这个属性就能把分页栏就显示出来了