easyUI_datagrid组件的使用及举例

datagrid组件

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

静态实现datagrid组件

代码

效果

这种的数据是定死了的，不灵活。
第二种是利用js和json文件来导入数据

使用Javascript

代码

效果

这种基于上一种比较灵活，但是还是不能满足我们的开发需求，我们如果要从数据库表中得到数据的话，就需要第三种方式——web层编写datagrid

举例

需求：

显示所有数据
分页
模糊查询

这里举例用的是第三种方法举例

代码

用到的数据库表的sql文件：

INSERT INTO t_easyui_user_version1
   (`SerialNo`, `Menuid`, `uid`, `uname`, `upwd`)
VALUES
   ('1', '001', '001', '张三', '123456');

INSERT INTO t_easyui_user_version1
   (`SerialNo`, `Menuid`, `uid`, `uname`, `upwd`)
VALUES
   ('2', '002', '002', '李四', '123456');

INSERT INTO t_easyui_user_version1
   (`SerialNo`, `Menuid`, `uid`, `uname`, `upwd`)
VALUES
   ('3', '003', '003', '王五', '123456');

INSERT INTO t_easyui_user_version1
   (`SerialNo`, `Menuid`, `uid`, `uname`, `upwd`)
VALUES
   ('4', '004', '004', '马六', '123456');

INSERT INTO t_easyui_user_version1
   (`SerialNo`, `Menuid`, `uid`, `uname`, `upwd`)
VALUES
   ('5', '000', '005', '田七', '123456');

然后是实体类：
所有字段
封装
构造
toString

Dao方法
这里只需要写一个查询所有的方法就可以了：
（利用之前写的自定义MVC框架）

public class UserDao extends BaseDao<User> {
	public List<User> list(User u,PageBean pageBean) throws Exception{
		String uname=u.getUname();
		String sql="select * from t_easyui_user_version1 where true";
		if(StringUtils.isNotBlank(uname)) {
			sql+=" and uname like '%"+uname+"%'";
		}
		return super.executeQuery(sql, User.class, pageBean);
	}
	}

工具类DataGridResult
里面放的是数据总数
每页显示的条数
一个实例化的方法

package com.wangjuanxia.util;

public class DataGridResult<T> {
	private String total;
	private T rows;
	public String getTotal() {
		return total;
	}
	public void setTotal(String total) {
		this.total = total;
	}
	public T getRows() {
		return rows;
	}
	public void setRows(T rows) {
		this.rows = rows;
	}
	public DataGridResult(String total, T rows) {
		super();
		this.total = total;
		this.rows = rows;
	}
	public DataGridResult() {
		super();
	}
	@Override
	public String toString() {
		return "DataGridResult [total=" + total + ", rows=" + rows + "]";
	}
	
	public static <T> DataGridResult<T> ok(String total,T rows){
		return new DataGridResult<>(total,rows);
	}
	
}

然后是处理业务逻辑的Web层
UserAction

package com.wangjuanxia.web;

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.wangjuanxia.dao.UserDao;
import com.wangjuanxia.entity.User;
import com.wangjuanxia.util.DataGridResult;
import com.wangjuanxia.util.PageBean;
import com.wangjuanxia.util.ResponseUtil;
import com.wangjuanxia.framemark.ActionSupport;
import com.wangjuanxia.framemark.ModelDriver;

public class UserAction extends ActionSupport implements ModelDriver<User> {
	private User user=new User();
	private UserDao ud=new UserDao();
	@Override
	public User getModel() {
		return user;
	}
	
	public String datagrid(HttpServletRequest req,HttpServletResponse resp) {
		PageBean pageBean = new PageBean();
		pageBean.setRequest(req);
		try {
			List<User> list = this.ud.list(user, pageBean);

			ResponseUtil.writeJson(resp, DataGridResult.ok(pageBean.getTotal()+"",list));
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}

}

然后看js文件：
注意看我的注释

$(function(){
	var ctx=$("#ctx").val();
	$('#dg').datagrid({    
	    url:ctx+'/user.action?methodName=datagrid',    
	    pagination:true,//分页，true为分页，false不分页
	    toolbar: '#tb',//按钮条
	    columns:[[    
	        {field:'serialNo',title:'编号'},    
	        {field:'menuid',title:'菜单ID'},    
	        {field:'uid',title:'用户ID'},
	        {field:'uname',title:'用户名'},
	        {field:'upwd',title:'密码'}
	    ]]    
	});
	
	
	//点击搜索按钮完成按名字进行模糊查询
	$("#btn-search").click(function(){
		alert("11");
		$('#dg').datagrid('load', {    
		    uname:$("#name").val()  //uname是字段名，可改成其他的，name是jsp页面里input的id
		    
		}); 
	});
	 
})

最后是jsp页面
定义需要的资源

<body>
<input type="hidden" id="ctx" value="${pageContext.request.contextPath }"/>
	<div id="tb">
		<input class="easyui-textbox" id="name" name="name" />
		<a id="btn-search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true">查询</a>
		<a id="btn-add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">新增</a>
	</div>

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

这里的按钮条有两种方法，一种就是我上面写的这种，还有一种就是这种：

jsp：

<div id="tb">
<a 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>

但是按钮用法不建议使用，因为所有代码都在js文件里，比较混乱。

效果

显示所有

模糊查询，关键字“张”：

总结

datagrid组件的使用及举例就到这里啦，希望你们能看得懂，有什么问题可以评论区留言~