一:简介

在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>门户 </li>
<li>用户管理</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%">
<tbody><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;">
查询
清空
</td>
</tr>
</tbody></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')));
}

3、上边代码中的serializeObject($('#searchForm'))、他是将form中的所有信息转化为一个对象作为load的参数。当form要传递的参数非常多的时候可以大大简化、但是他不是jquery自带的函数、是自己扩展的、下边是其实现代码(放在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;
};

三:页面源码

首页(datagrid2.jsp):

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

    <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> <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>门户 </li>
<li>用户管理</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>

内嵌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%">
<tbody><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;">
查询
清空
</td>
</tr>
</tbody></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的某个组件。

java_easyui体系之DataGrid(2)[转]的更多相关文章

  1. java_easyui体系之DataGrid(4)[转]

    一:简介 在前面DataGrid(3)的基础上添加后台的实现.本来是想只搭建前台页面的.后台不写.现在觉得还是都实现好点.从真实情况出发.后台用的ssh. 1. 新增冻结列功能. 2. 实现界面的添加 ...

  2. java_easyui体系之DataGrid(3)[转]

    一:简介 在2的基础上实现增删改.增.改都是通过行编辑来实现的.具体业务逻辑: 1. 增加一条记录的时候: a) 在datagrid表格最前端增加一行(当然也可在指定位置增加.)增加的行的字段必须与要 ...

  3. java_easyui体系之DataGrid(1)[转]

    一:简介 以表格的形式展示数据.项目中式很常见的一个使用.table展示数据.牵扯到分页.上一页下一页.首页.尾页.翻页.选中展示的记录用于操作.总记录数等等.使用DataGrid很容易实现这一点. ...

  4. java_easyui体系之目录 [转]

    摘要:简单介绍form的提交方式.与validatebox的结合使用. 一:form简介 Easyui中的form有两种提交方式.结合自己新添加的一种ajax提交方式.本文简单说明form的三种提交方 ...

  5. wpf研究之道-datagrid控件(1)

    "想要说些什么 又不知从何说起",每当想要写一些关于wpf的文章,总是沉思良久,怕自己写不好.今天我想要说的是wpf中datagrid控件.我们先来看看它在整个类的层次结构:   ...

  6. ASP.NET Aries 入门开发教程7:DataGrid的行操作(主键操作区)

    前言: 抓紧勤奋,再接再励,预计共10篇来结束这个系列. 上一篇介绍:ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑 本篇介绍主键操作区相关内容. 1:什么时候有默认的 ...

  7. JQuery easyUI DataGrid 创建复杂列表头(译)

    » Create column groups in DataGrid The easyui DataGrid has ability to group columns, as the followin ...

  8. [systemtap手记]debian体系安装过程

    Debian体系,本人测试用机 Ubuntu 11.10 uname -r 查看原本的内核版本为 3.0.0-12-generic 第一步: 安装systemtap包 $ sudo apt-get i ...

  9. BPM体系文件管理解决方案分享

    一.方案概述 企业管理在很大程度上是通过文件化的形式表现出来,体系文件管理是管理体系存在的基础和证据,是规范企业管理活动和全体人员行为,达到管理目标的管理依据.对与公司质量.环境.职业健康安全等体系有 ...

随机推荐

  1. [原创]java WEB学习笔记93:Hibernate学习之路---Hibernate 缓存介绍,缓存级别,使用二级缓存的情况,二级缓存的架构集合缓存,二级缓存的并发策略,实现步骤,集合缓存,查询缓存,时间戳缓存

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  2. Fiddler 前端工具

    官网地址:http://www.telerik.com/fiddler 支持所有平台,但由于早期是基于.net开发的,对window操作系统支持较好,对mac,linux支持不够好.

  3. viewpaper

    引用:http://blog.csdn.net/billpig/article/details/6650097 增加回弹 http://www.apkbus.com/android-78437-1-1 ...

  4. sqlyong64位破解

    姓名(Name):cr173 序列号(Code):8d8120df-a5c3-4989-8f47-5afc79c56e7c 或者(OR) 姓名(Name):cr173 序列号(Code):59adfd ...

  5. MyEclipse基础配置

    1.设置默认工作空间编码 window/preferences/general/workspace/Text file encoding 2.设置文件默认打开方式 xml建议设置 html建议设置 j ...

  6. Servlet-cookies机制

    通过cookies,可以保存用户的使用习惯,优化用户体验,同时能减轻服务端压力.下面说下在Servlet中cookies机制的使用 就用保存用户登录数据来举例子: 打开网页的处理Servlet: pa ...

  7. Cutterman 切图神器,虽然还没用过,先 mark 一下好了

    在官网上找了半天也没发现下载链接,注册账号用无法激活,还是等等再试吧.

  8. 马哥教育视频笔记:01(Linux常用命令)

    1.查看缓存中使用的命令和命令路径 [wskwskwsk@localhost /]$ hash 命中 命令 /usr/bin/printenv /usr/bin/ls /usr/bin/clear 2 ...

  9. 初识python第一天

    一.python简介 1.1 python的诞生 python的创始人吉多.范罗苏姆(Guido van Rossum),他在开发python语言之前曾使用过几年的ABC语言,ABC是一门主要用于教学 ...

  10. php计算两个日期相差 年 月 日

    在PHP程序中,很多时候都会遇到处理时间的问题,比如:判断用户在线了多长时间,共登录了多少天,两个帖子发布的时间差或者是不同操作之间的日志记录等等.在文章中,简单地举例介绍了PHP中如何计算两个日期相 ...