一：简介

在1的基础上添加layout组件、实现通过条件动态的从后台查询数据到前台展示、使用的方式是将查询单独作为一个layout中的一个面板。

二：关键之处

1、效果图：

2、左侧的折叠组件：

折叠组件是在整体的layout的west布局中的。下图中的 第二个div的class是关键：

     
    
      
        
       
                    content1        
       
        
       
            
        
                
         
门户 
                
         
用户管理
            
        
        
       
    
      
     

3、查询form的存放组件：

这是一个内嵌页面：注意使用内嵌页面的div作为layout的容器、不要使用body、不然会出现一些莫名其妙的问题。下面代码就是

1、将datagrid.jsp中的layout的中部内嵌一个tabs的div、

2、这个div的一个关于“用户管理”的tab内嵌了一个user.jsp页面、

3、user.jsp页面又是一个使用div做layout的页面、北部放查询条件的form、中部放置展示数据的datagrid。

     
    
      
        
       
            
        
                         
          
            
用户名
            
           
                          
            
创建时间
            
  至  
           
                          
            
创建时间
            
  至  查询 清空 
           
                     
        
        
       
             
      
         
      
        
           
      
     
     

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"%>                       
         
         
                                             
     
        
     
        
     
            
      
                
       
                            content1                
       
                
       
                    
        
                        
         
门户 
                        
         
用户管理
                    
        
                
       
            
      
        
     
        
     
            
      
            
       
                        门户            
       
            
       
            
       
        
      
        
     

内嵌user.jsp：

                 
     
            
      
                
       
                    
        
                                 
          
            
用户名
            
           
                                  
            
创建时间
            
  至  
           
                                  
            
创建时间
            
  至  查询 清空 
           
                             
        
                
       
                             
      
                         
      
                
                   
      
                     
     

引用的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的某个组件。