java_easyui体系之DataGrid（2）

一：简介

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

二：关键之处

1、效果图：

2、左侧的折叠组件：

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

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"%>


  
    
    My JSP 'original.jsp' starting page
    
    
  
    
  
    
  
    <script type="text/java script" src="js/jquery.min.js">
    <script type="text/java script" src="js/jquery.easyui.min.js">
    <script type="text/java script" src="js/chyUtils.js">
    
    <script type="text/java script">
    	function userManage(id){
    		console.info(id);
    		if("door" == id){
    			$('#tt').tabs('select', 0);
    		}
    		if("userManage" == id){
    			$('#tt').tabs('select', 1);
    		}
    	}
    
  
  
	
	    
  
	    
  
	    
  
	    	
    
    
      content1 
     
     
      
      门户  
      用户管理 
      
     
   
	    
  
	    
  
	    	
    
    
      门户

内嵌user.jsp：

		<script type="text/java script">
  			$(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

java_easyui体系之DataGrid（2）(一)