<div id="searchpanel" class="easyui-panel" border="false" title="查询条件"
style="height: 100px;"
data-options="iconCls:'icon-search', collapsible:true">
<table class="tableForm datagrid-toolbar"
style="width: 100%; height: 100%;">
<tr>
<th>
用户名
</th>
<td>
<input name="userName" style="width: 155px" />
</td>
<th>
联系电话
</th>
<td>
<input name="phone" style="width: 155px" />
</td>
<th>
所属单位
</th>
<td>
<input name="phone" style="width: 155px" />
</td>
</tr>
<tr>
<th>
开始日期
</th>
<td>
<input name="timeStart" editable="flase"
class="easyui-datetimebox" style="width: 155px" />
</td>
<th>
结束日期
</th>
<td>
<input name="timeEnd" editable="flase" class="easyui-datetimebox"
style="width: 155px" />
</td>
<th></th>
<td>
<a href="#" class="easyui-linkbutton">查询</a>
<a href="#" class="easyui-linkbutton">清空</a>
</td>
</tr>
</table>
</div>
<table id="centerDateGrid">
<thead>
<tr>
<th field="userId" width="80" sortable="true">
userId
</th>
<th field="loginName" width="100" sortable="true">
loginName
</th>
<th field="userName" width="80" sortable="true">
userName
</th>
<th field="password" width="80" align="right" sortable="true">
password
</th>
<th field="cell" width="80" align="right" sortable="true">
cell
</th>
<th field="qq" width="100" align="right" sortable="true">
qq
</th>
<th field="mail" width="110" sortable="true">
mail
</th>
</tr>
</thead>
</table>
</div>
-->
这是我的center里面的代码
下面是我的js代码:
$(function() {
alert("进来了");
//初始化查询pannel
// 初始化右下角的提示框
$.messager.show({
title : '我的消息',
msg : '登录成功,欢迎使用此系统',
timeout : 3000,
showType : 'slide'
});
// 初始化datagrid
$("#centerDateGrid").datagrid({
url : 'login/users!findList.action',
height:"200px;",
iconCls : 'icon-save',// 图标
rownumbers : true,// 如果为true，则显示一个行号列。
singleSelect : true,// 如果为true，则只允许选择一行。
// autoRowHeight:false,//定义设置行的高度，根据该行的内容。设置为false可以提高负载性能。
nowrap : false,// 如果为true，则在同一行中显示数据。设置为true可以提高加载性能。
pagination : true,// 显示分页工具条
pageSize : 20,// 每页条数
fit : true,// datagrid自适应宽高
fitColumns : true,// 使列自动展开/收缩到合适的数据表格宽度。
idField : 'userId',
sortName : 'userId',// 定义哪些列可以进行排序
sortOrder : 'asc',// 定义列的排序顺序，只能是'asc'或'desc'
border : false,
pageList : [ 20, 30, 40, 50 ],// 分页条数选择
toolbar : [ {
text : '添加',
iconCls : 'icon-add',
hander : function() {
}
},'-', {
text : '修改',
iconCls : 'icon-edit',
hander : function() {
}
},'-', {
text : '删除',
iconCls : 'icon-remove',
hander : function() {
}
} ]
//toolbar:"#toolbar"
});
});
//查询条件
function search(){
$("#centerDateGrid").datagrid("load",{
userName("#userName").val()
});
}
//清空查询条件
function clear(){
}
table不要设高度，fit：true；fitColumns : true;
在<table id="centerDateGrid">后面多放了一个</div>，把这个</div>删除试试。
你的查询表单表单占了一定高度了，但是easyui设置fit为true是依据视窗高度的，没有减去查询表单的占位。。这样导致你的导航显示不出来
要先实现你的效果，需要使用center和north布局layout
$('#test').datagrid({
width: ($(window).width()*0.99),
height:($(window).height()*0.98)
});
可以在datagrid外层加入layout，然后将datagrid的height：100px去掉，添加fit="true"
自己写一段自适应的js代码，用屏幕的高度减去其他部分的高度设置为datagrid的高度（宽度也是一样），就可以实现自适应了
自己写一段自适应的js代码，用屏幕的高度减去其他部分的高度设置为datagrid的高度（宽度也是一样），就可以实现自适应了
首先外面一层easyui-layout，接着设置region，然后datagrid设置fit="true"，不要给高度，肯定能行，例如：
你的datagrid不要设置宽度和高度，设置fit=true
datagrid 中的 data-options=“fit:true;....................."
如果要自适应的话，table外边不能有任何元素，你的那个多了个div，去掉就可以了，另外别忘记在你的table里面写入fit:true