<div class="easyui-tabs" fit="true" border="false">
<div title="用户管理" border="false">
<!-- -->
<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>
</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(){
}
用easyui的layout来进行布局。。看\examples\layout里面的示例