EasyUI之datagrid控件

datagrid的前言

DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能

效果图

绑定数据库的数据效果图：

在搜索栏里输入名称点击搜索查询数据：

后台查询

首先创建实体类：

package com.luopeng.entity;

public class User {
	private long id;
	private String name;
	private String pwd;
	private long type;
	public long getId() {
		return id;
	}
	public void setId(long id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getPwd() {
		return pwd;
	}
	public void setPwd(String pwd) {
		this.pwd = pwd;
	}
	public long getType() {
		return type;
	}
	public void setType(long type) {
		this.type = type;
	}
	
	public User() {}
	public User(long id, String name, String pwd, long type) {
		
		this.id = id;
		this.name = name;
		this.pwd = pwd;
		this.type = type;
	}
	@Override
	public String toString() {
		return "User [id=" + id + ", name=" + name + ", pwd=" + pwd + ", type=" + type + "]";
	}
	
	
	
	
	
}

然后dao方法：

package com.luopeng.dao;

import java.awt.print.Book;
import java.sql.SQLException;
import java.util.List;

import com.luopeng.entity.User;
import com.luopeng.util.PageBean;
import com.luopeng.util.StringUtils;

public class UserDao extends BaseDao<User>{

	public List<User> list(User user,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String name=user.getName();
		String sql="select * from t_easyui_user where true ";
		if(StringUtils.isNotBlank(name)) {
			sql+=" and name like '%"+name+"%'";
		}
		return super.executeQuery(sql, User.class, pageBean);
	}

	
	
	
	
	
	
	
}

web（servlet）控制层：

package com.luopeng.web;

import java.sql.SQLException;
import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.luopeng.dao.UserDao;
import com.luopeng.entity.User;
import com.luopeng.framework.ActionSupport;
import com.luopeng.framework.ModelDriver;
import com.luopeng.util.DataGridResult;
import com.luopeng.util.PageBean;
import com.luopeng.util.ResponseUtil;

public class UserAction extends ActionSupport implements ModelDriver<User>{

	private User user=new User();
	private UserDao userDao=new UserDao();
	@Override
	public User getModel() {
		// TODO Auto-generated method stub
		return user;
	}
	
	public String datagrid(HttpServletRequest req,HttpServletResponse resp) throws Exception {
//		total中的数据从哪来
//		rows的数据从哪里来
		PageBean pageBean=new PageBean();
		pageBean.setRequest(req);
		try {
			List<User> list = this.userDao.list(user, pageBean);
//			Map<String, Object> map = new HashMap<String, Object>();
//			map.put("total", pageBean.getTotal());
//			map.put("rows", list);
//			ResponseUtil.writeJson(resp, map);
			ResponseUtil.writeJson(resp, DataGridResult.ok(pageBean.getTotal()+"",list));

			
		} catch (InstantiationException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IllegalAccessException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}

mian方法调用dao方法：

public static void main(String[] args) throws JsonProcessingException {
		Map<String, Object> map=new HashMap<String, Object>();
		map.put("tobal", 28);
		List<User> asList = Arrays.asList(new User(5, "xx", "1234", 5),new User(6, "cc", "122", 6));
		map.put("rows", asList);
		
		ObjectMapper om=new ObjectMapper();
		String jsonstr = om.writeValueAsString(map);
		System.out.println(jsonstr);
	}

结果：

{
	"tobal": 28,
	"rows": [{
		"id": 5,
		"name": "xx",
		"pwd": "1234",
		"type": 5
	}, {
		"id": 6,
		"name": "cc",
		"pwd": "122",
		"type": 6
	}]
}

前端布局及查询

布局

css样式、jQuery、js：

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js">
</script>
<!-- 组件库源码的js文件 -->
<script type="text/javascript" 
src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js">
</script>
<!--导入menu.js-->
<script type="text/javascript" 
src="${pageContext.request.contextPath }/static/js/menu.js">
</script>

界面代码：

<title>增加、修改、删除</title>
<body>

	<input type="hidden" id="ctx" value="${pageContext.request.contextPath }">
<div id="tb">
<input class="easyui-textbox" id="name" name="name" style="width:20%;padding-left:10px" data-options="label:'名称：',required:true">
<a id="btn-search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">搜索</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true">新增</a>
</div>

<table id="dg"></table>  

</body>

查询–menu.js

$(function(){
	var ctx = $("#ctx").val();
	$('#dg').datagrid({    
		url:ctx+'/user.action?methodName=datagrid',
		pagination:true,
	    toolbar:'#tb',
	    columns:[[    
	        {field:'id',title:'id',width:100},    
	        {field:'name',title:'名称',width:100},    
	        {field:'pwd',title:'密码',width:100},
	        {field:'type',title:'type',width:100}
	          
	    ]]    
	});  
//	点击搜索按钮完成按名字进行用户查询
	$("#btn-search").click(function(){
		$('#dg').datagrid('load', {  
		    name: $("#name").val()
		}); 
	});
})