easyui datagrid控件使用

datagrid控件使用

1.目标
把数据库的数据显示到tabs页面中，并且提供查询和分页
效果图：

**删除修改和新增后面在讲今天讲查询和把数据呈现到表格上面：
首先我们了解datagrid控件
是个数据表格控件：并且自带分页属性
jsp界面写个表格标签和需要工具栏
//表格

//两个按钮

搜索 新增

js界面
$(function() {}）//自动运行
datagrid需要写在自运行里面**

$('#dg').datagrid({
       //数据文件读取文件路径
		url : $("#ctx").val() + '/book.action?methodName=books',
		//分页工具栏属性
		pagination : true,
		//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
		fitColumns : true,
		//定义工具栏我这里定义了搜索和新增按钮
		toolbar : '#tb',
		//列明
		columns : [ [ {
		//field是读取数据文件，属性要相同才能被读取
			field : 'bid',
			title : 'id',
			width : 100
		}, {
			field : 'bname',
			title : '名称',
			width : 100
		}, {
			field : 'price',
			title : '价格',
			width : 100
		}, {
			field : '操作',
			title : '操作',
			width : 100,
			align : "right",
			formatter : function(value, row, index) {
				return "<a href='javascript:void(0);' οnclick='xg()'>修改</a>" +
						"&nbsp<a href='javascript:void(0);' οnclick='del()'>删除</a> "
			}
		}

		] ]
	})

后面就是把后台数据传到js来了
得到数据方法

public List<Book> executeQuery(Book book, PageBean pageBean) throws Exception {
	String bname = book.getBname();
	String sql = "select * from t_mvc_book where 1=1";
	//如果传了名字过来就加上模糊查询语句
	if (StringUtils.isNotBlank(bname)) {
		sql += " and bname like '%" + bname + "%'";
	}
	return super.executeQuery(sql, Book.class, pageBean);
}

将数据转化为datagrid需要的形式并且发送

	public String books(HttpServletRequest req, HttpServletResponse resp) throws Exception {
	//分页属性
		PageBean pageBean = new PageBean();
		//将分页传入
		//在easyui中，点击下一页上一页等默认的分页效果，携带的参数是page/rows
		//我封装的pageBean刚好是这两个属性
		pageBean.setRequest(req);
		//得到数据库的所有数据
		List<Book> list = bookdao.executeQuery(book, pageBean);
		//将数据变成需要的格式
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("total", pageBean.getTotal());
		map.put("rows", list);
		//将数据转为josn并且发送回去
		ResponseUtil.writem(resp, map);
		return null;
	}

搜索功能
给搜索设置点击事件
load将数据发送给后台
和前面dao包方法对应

$("#btn-search").click(function() {
		$('#dg').datagrid('load', {
			bname : $("#bname").val()
		});
	})

结果：