easyUi学习之datagrid学习(springmvc+easyui的demo)

学习了easyui的tabs和accordion组件,今天学习了下datagrid组件,顺便再复习下tabs的使用,用多了就会记住了,此次用springmvc来处理请求,项目结构如下:

[img]http://dl2.iteye.com/upload/attachment/0103/7160/13fa5745-0cc8-341f-88b9-dc4eee1235f0.jpg[/img]

对于以上的一些文件做下记录,免得以后自己回过头来看的时候有所疑问

第一个是log4j.properties,为什么有这个文件,因为用到了spring-mvc,如果没有这个文件springmvc会报错,不能达到自己预期的结果

第二个是webRoot下css,js,img,这三个文件夹是easyUi自带的,因为easyui有些默认的样式图片之类的,我也没深究直接放下面的,然后页面载入.

下面是demo,整个demo的流程是,通过欢迎页面的button动态的添加tabs标签,然后通过datagrid异步请求得到数据填充到table,下面是代码:

第一步:创建web项目,把需要的jar包都放进来:

[img]http://dl2.iteye.com/upload/attachment/0103/7173/fb39f8d3-d00e-391a-9a8b-207abcb2b94d.png[/img]

第二步:配置web.xml,配置servlet,因为springmvc是基于dispatchServlet的

	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  
    index.jsp
  

  //配置spring-mvc的servlet
  
  	dispatcherServlet
  	org.springframework.web.servlet.DispatcherServlet
  
  
  	dispatcherServlet
  	/
  

第四步:在web-inf下创建dispatcherServlet-servlet.xml文件

	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.1.xsd
		http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.1.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.1.xsd">
		 
	 	
		  
		  
		   
	
		
		
	

第五步:写控制器,controller

package test.datagrid.controller;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import test.datagrid.entity.Pager;
import test.datagrid.entity.Person;

@Controller
public class TestController {
	@RequestMapping("/getData")
	@ResponseBody
	public Pager getPersons(){
		Pager result = new Pager();
		List num = new ArrayList();
		Person person ;
		for(int i=0;i<10;i++){
		  person = new Person();
		  person.setAge("1"+i);
		  person.setName("骚一"+i+"号");
		  person.setSex("male"+i);
		  num.add(person);
		}
		result.setRows(num);
		return result;
	}

	@RequestMapping("/testList")
	public ModelAndView toList(){
		return new ModelAndView("testDatagrid");
	}
}

其中用到的实体类:

package test.datagrid.entity;

public class Person {
	private String name;
	private String sex;
	private String age;
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getSex() {
		return sex;
	}
	public void setSex(String sex) {
		this.sex = sex;
	}
	public String getAge() {
		return age;
	}
	public void setAge(String age) {
		this.age = age;
	}	
}

pager是我自定义的实体类,因为datagrid可以配置分页,只需要设定其中参数就行,虽然没用到分页,但是我设置了pager参数,里面有个属性rows应该是必须的,这我也不是特别确定,因为开始返回的没有rows居然报错了,好了代码如下

package test.datagrid.entity;

import java.util.Collections;
import java.util.List;

public class Pager {
	 protected List rows = Collections.emptyList();

	public List getRows() {
		return rows;
	}

	public void setRows(List rows) {
		this.rows = rows;
	}	 
}

第六步:就是写前台来访问
首先更改index.jsp页面代码,改为一个button按钮,通过按钮事件来添加tabs选项卡
代码如下:

        <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>


  
   
	
	
	
  

  
  	通过datagrid获取数据
    


    
  
  

//${ctx}/testList请求在controller中返回的是testDatagrid.jsp页面,所以在创建一个jsp文件夹,里面放testDatagrid.jsp,因为我的dispatchServlet-servlet.xml是这样配置的,生成的view是在jsp文件夹下的,代码如下:

<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>





  
  	
	
	
	
  

  
  		
  
  

//这个页面就是通过datagrid组件来得到后台数据,并填充到table中,

最后启动服务器,输入地址,因为是index.jsp页面,所以只要输出项目名就ok,输入:
http://localhost:8082/TestDataGrid/

初始进来的页面如下:

[img]http://dl2.iteye.com/upload/attachment/0103/7180/193cbcdc-349a-35cf-8666-53de5733a243.jpg[/img]

点击按钮得到如下结果:

[img]http://dl2.iteye.com/upload/attachment/0103/7182/e18e91c5-a02e-38b3-86a8-123b84f4ce97.jpg[/img]