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>" +
" <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()
});
})
结果: