java_easyui体系之DataGrid（2）
一：简介
在1的基础上添加layout组件、实现通过条件动态的从后台查询数据到前台展示、使用的方式是将查询单独作为一个layout中的一个面板。
二：关键之处
1、效果图：
2、左侧的折叠组件：
折叠组件是在整体的layout的west布局中的。下图中的 第二个div的class是关键：
<div data-options="region:'west',title:'功能导航',split:true" style="width:160px;">
<div class="easyui-accordion" data-options="fit:true,border:false">
<div title="Title1" data-options=" iconCls:'icon-save'" style="padding:10px;">
content1
</div>
<div title="Title2" data-options="fit:true,border:false,iconCls:'icon-reload',selected:true" style="padding:10px">
<ul>
<li><a id="door" class="easyui-linkbutton" οnclick="userManage(id);" data-options="plain:true">门户</a> </li>
<li><a id="userManage" class="easyui-linkbutton" οnclick="userManage(id);" data-options="plain:true">用户管理</a></li>
</ul>
</div>
</div>
</div>3、查询form的存放组件：
这是一个内嵌页面：注意使用内嵌页面的div作为layout的容器、不要使用body、不然会出现一些莫名其妙的问题。下面代码就是
1、将datagrid.jsp中的layout的中部内嵌一个tabs的div、
2、这个div的一个关于“用户管理”的tab内嵌了一个user.jsp页面、
3、user.jsp页面又是一个使用div做layout的页面、北部放查询条件的form、中部放置展示数据的datagrid。
<div class="easyui-layout" data-options="fit:true,border:false,">
<div data-options="region:'north',border:false,title:'过滤'" style="height: 140px;overflow: hidden">
<form id="searchForm">
<table class="datagrid-toolbar" style="height:100%;width:100%">
<tr>
<th>用户名</th>
<td><input id="username" name="username" style="width: 320px"/></td>
</tr>
<tr>
<th>创建时间</th>
<td>
<input name="createTimeStart" editable="false" class="easyui-datetimebox" style="width:155px;" />
至
<input name="createTimeEnd" editable="false" class="easyui-datetimebox" style="width:155px;" />
</td>
</tr>
<tr>
<th>创建时间</th>
<td>
<input name="modifyTimeStart" editable="false" class="easyui-datetimebox" style="width:155px;" />
至
<input name="modifyTimeEnd" editable="false" class="easyui-datetimebox" style="width:155px;" />
<a class="easyui-linkbutton" οnclick="show();">查询</a>
<a class="easyui-linkbutton" οnclick="clean();">清空</a>
</td>
</tr>
</table>
</form>
</div>
<div data-options="region:'center',border:false">
<table id="datagrid"></table>
</div>
</div>4、点击查询从新加载数据：
这想说的一个是load方法的使用、而load方法参数需要一个对象（当然也可以是一个一个字段的 name : value）。一个是将form中所有信息序列化成一个form对象传递到前台。
1、首次进入时load一下、这是在$(function(){ $('#datagrid').datagrid({url: '' , xxx}) })中load的、
2、点击查询：load指定的datagrid的数据、这里直接使用datagrid的load方法、首先要选择作为datagrid展示的table的id、而不是别的什么东西。
//查询数据
function show(){
$('#datagrid').datagrid('load',serializeObject($('#searchForm')));
}serializeObject = function(form){
var o = {};
$.each(form.serializeArray(), function(index){
if(o[this['name']]){
o[this['name']] = o[this['name']] + this['value'];
}else{
o[this['name']] = this['value'];
}
});
return o;
};三：页面源码
首页（datagrid2.jsp）：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'original.jsp' starting page</title>
<link rel="stylesheet" type="text/css" href="css/easyui/default/easyui.css">
<link rel="stylesheet" type="text/css" href="css/easyui/icon.css">
<link rel="stylesheet" type="text/css" href="css/easyui/demo.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/chyUtils.js"></script>
<script type="text/javascript">
function userManage(id){
console.info(id);
if("door" == id){
$('#tt').tabs('select', 0);
}
if("userManage" == id){
$('#tt').tabs('select', 1);
}
}
</script>
</head>
<body id="blayout" class="easyui-layout">
<div data-options="region:'north', split:false" style="height:100px;"></div>
<div data-options="region:'east',title:'在线列表',split:true" style="width:160px;"></div>
<div data-options="region:'west',title:'功能导航',split:true" style="width:160px;">
<div class="easyui-accordion" data-options="fit:true,border:false">
<div title="Title1" data-options=" iconCls:'icon-save'" style="padding:10px;">
content1
</div>
<div title="Title2" data-options="fit:true,border:false,iconCls:'icon-reload',selected:true" style="padding:10px">
<ul>
<li><a id="door" class="easyui-linkbutton" οnclick="userManage(id);" data-options="plain:true">门户</a> </li>
<li><a id="userManage" class="easyui-linkbutton" οnclick="userManage(id);" data-options="plain:true">用户管理</a></li>
</ul>
</div>
</div>
</div>
<div data-options="region:'center',title:'欢迎',"style="overflow: hidden;">
<div id="tt" class="easyui-tabs" data-options="fit:true,border:false,">
<div title="门户" data-options="closable:true" >
门户
</div>
<div id="userManage" title="用户管理" data-options="href:'user.jsp',closable:true" >
</div>
</div>
</div>
</body>
</html>内嵌user.jsp：
<script type="text/javascript">
$(function(){
$('#datagrid').datagrid({
url:'login_getJson.action',
title: '用户列表',
iconCls:'icon-save',
pagination:true,
pageSize:10,
pageList:[10,20,30,40,50,60,70,80,90,100],
fit:true,//使表格自适应
fitColumns:true,//使得表格中所有的列宽相加等于自适应的宽度、也就是浏览器改变大小的时候下方会不会出现滚动条、一般只有在列较少的时候使用
nowrap:false,//表格中的文字可以换行、默认是false、不能换行、这样在文字很多的时候就看不到全部：使用真实的数据去测试
border:false,
idFeild:'id',//标识、会记录我们选中项的id、不一定是id、通常使用主键
sortName:'id',//设置默认排序时的 字段（必须是field中的一个字段）
sortOrder:'asc',//是按照升序还是降序排序 但是仅仅添加这两个字段并不会自动排序、这样写的意义就是前台会自动的向后台传递两个参数：sort order,我们可以在后台查询记录的时候进行排序
columns:[ [{
title:'编号',
field:'id',
width:100,//必须要给
// sortable:true,//指定按照这个排序
},{
title:'姓名',
field:'userName',
width:100,//必须要给
},{
title:'密码',
field:'passWord',
width:100,//必须要给
}] ],
toolbar:[{
text: '增加',
iconCls:'icon-add',
handler:function(){
}
},'-',{
text: '删除',
iconCls:'icon-remove',
handler:function(){
}
},'-',{
text: '修改',
iconCls:'icon-edit',
handler:function(){
}
},'-']
});
});
//查询数据
function show(){
$('#datagrid').datagrid('load',serializeObject($('#searchForm')));
}
//清除查询条件、返回初始数据展示状态
function clean(){
$('#datagrid').datagrid('load',{});
$('#searchForm').find('input').val('');
}
</script>
<div class="easyui-layout" data-options="fit:true,border:false,">
<div data-options="region:'north',border:false,title:'过滤'" style="height: 140px;overflow: hidden">
<form id="searchForm">
<table class="datagrid-toolbar" style="height:100%;width:100%">
<tr>
<th>用户名</th>
<td><input id="username" name="username" style="width: 320px"/></td>
</tr>
<tr>
<th>创建时间</th>
<td>
<input name="createTimeStart" editable="false" class="easyui-datetimebox" style="width:155px;" />
至
<input name="createTimeEnd" editable="false" class="easyui-datetimebox" style="width:155px;" />
</td>
</tr>
<tr>
<th>创建时间</th>
<td>
<input name="modifyTimeStart" editable="false" class="easyui-datetimebox" style="width:155px;" />
至
<input name="modifyTimeEnd" editable="false" class="easyui-datetimebox" style="width:155px;" />
<a class="easyui-linkbutton" οnclick="show();">查询</a>
<a class="easyui-linkbutton" οnclick="clean();">清空</a>
</td>
</tr>
</table>
</form>
</div>
<div data-options="region:'center',border:false">
<table id="datagrid"></table>
</div>
</div> 引用的js：
serializeObject = function(form){
var o = {};
$.each(form.serializeArray(), function(index){
if(o[this['name']]){
o[this['name']] = o[this['name']] + this['value'];
}else{
o[this['name']] = this['value'];
}
});
return o;
};四：补充说明
1、 当对datagrid进行DUAL时、可以使用toolbar直接添加功能按钮、也可以使用div作为
2、 使用datatimebox时 要加上editable=false
3、 查询时、使用load、而不是使用reload、load查询的时候会将页面改回到首页、reload则会保留当前页号、查询结果也会显示当前页的数据、如果查询结果记录数达不到当前页号*每页记录数、则会显示空、并且最下面的状态栏也会显示异常信息。
4、 当将内嵌页面作为layout使用的时候、不要将body设置成class=”easyui-layout”使用div作为layout的容器。
5、 折叠的组件式通过 class=”easyui-accordion”—— 然后通过div来设置的。而不是想象中的内嵌layout。
6、 可以通过点击 class=”easyui-accordion”中的选项动态展示tabs的某个组件。
扫一扫
268
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
