前言
首先我们学习一款框架的方法应该是从阅读官方文档,结合案例理解及扩展来学习的,同理简介或者官方之类的话就不多说了,下面开始介绍如何使用和实现。
使用步骤
1.理解对应数据格式
我们去官网下载好的软件包中找到demo中对应的DataGrid的提供的json数据格式。
我们看到它有两个主要的键值对。
total总共行数
rows行数
其实也很简单理解,我们使用控件的数据源必须和下面这格式一样,要提供总记录数和行数据给它
,控件自身会帮我们加载展示数据和提供分页功能。
2.使用控件
使用控件还是基于官方文档,在html中置入控件标签,在jquery中调用控件函数加载对应格式的数据源,当然具体使用还是得根据官方规范来。
1.引入控件标签
2.配置控件函数,url代表资源路径,columns设置的是对应列名标题和样式
,注意列名不要错,不然显示不出来。
效果实现
可以分页这是组件为我们提供的。
这里的话主要的简单的使用和理解,数据是死的静态的等会我们来进行把数据从数据库展示出来。
对应文件路径:
展示效果:
代码实现
1.思路
我们要配合mvc框架来实现,这里博主之前文章有写,相信上面已经讲的比较清楚了,想要把数据库的数据展示出来的话,我们要在组件函数中配置url资源加载路径、需要显示的列,然后通过后台代码,利用map键值对形式把总记录数和行数据进行存储然后利用json架包,把map转成json的对应数据格式输出到浏览器中。
这就是我们的数据库的数据,目的就是把它显示到前端,我们要建立对应的实体类
2.后台数据格式的转变
这是简单的定义死数据的转变过程,等一下会实现活数据的演变。
public static void main(String[] args) throws JsonProcessingException {
Map<String, Object> map = new HashMap<String, Object>();
map.put("total", 28);
List<Book> asList = Arrays.asList(new Book(1,"x1","x1"),new Book(2,"x2","x2"),new Book(3,"x3","x3"));
map.put("rows", asList);
ObjectMapper om = new ObjectMapper();
String jsonstr = om.writeValueAsString(map);
System.out.println(jsonstr);
}
我们打印出来并实现json格式看一下,明显可以看出来正好符合数据表格需要的规范。
{
"total": 28,
"rows": [{
"id": 1,
"name": "x1",
"pinyin": "x1",
"cid": 0,
"author": null,
"price": 0.0,
"image": null,
"publishing": null,
"description": null,
"state": 0,
"deployTime": null,
"sales": 0
}, {
"id": 2,
"name": "x2",
"pinyin": "x2",
"cid": 0,
"author": null,
"price": 0.0,
"image": null,
"publishing": null,
"description": null,
"state": 0,
"deployTime": null,
"sales": 0
}, {
"id": 3,
"name": "x3",
"pinyin": "x3",
"cid": 0,
"author": null,
"price": 0.0,
"image": null,
"publishing": null,
"description": null,
"state": 0,
"deployTime": null,
"sales": 0
}]
}
3.控件函数配置
配置页面加载时的资源和需要展示的列。
$(function(){
var src = $("#ctx").val();
$('#dg').datagrid({
url:src+'/book.action?methodName=datagrid',
pagination:true,
toolbar:'#tb',
columns:[[
{field:'id',title:'id',width:100},
{field:'name',title:'名称',width:100},
{field:'pinyin',title:'拼音',width:100},
{field:'cid',title:'副id',width:100},
{field:'author',title:'作者',width:100},
{field:'price',title:'价格',width:100},
{field:'image',title:'路径',width:100},
{field:'publishing',title:'出版社',width:100},
{field:'description',title:'描述',width:100},
{field:'state',title:'更新',width:100},
{field:'deployTime',title:'时间',width:100},
{field:'sales',title:'数量',width:100,align:'right'}
]]
});
// 点击搜索按钮完成按名字进行书籍查询
$("#btn-serch").click(function(){
// alert(1);
$('#dg').datagrid('load', {
name: $("#name").val()
});
})
})
4.具体实现
因为这是用mvc框架实现所以业务类只需要写一个方法获取到dao层的数据转为map形式通过json工具类转一下格式输出到浏览器中就好了。
public String datagrid(HttpServletRequest req,HttpServletResponse resp) {
//实例化分页类
PageBean pageBean = new PageBean();
//进行分页初始化
pageBean.setRequest(req);
try {
List<Book> list = this.bookdao.list(book, pageBean);
Map<String, Object> map = new HashMap<String,Object>();
map.put("total", pageBean.getTotal());
map.put("rows", list);
ResponseUtil.writeJson(resp,map);
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
5.代码优化
以上代码看起来是没有上面问题,其实仔细想想存在的题是非常大的,可以这样说吧, 想要实现数据展示这5行代码必不可少,细想一下如果有很多这样的类呢?那是不是很不好,有时候能将100行代码的功能用十行代码写出来那就是代码的优化。
DataGridResult工具类
这是用来优化数据表格的结果集格式的。
两个重要属性:
1.total总记录数
2.rows行数据,这里因为是泛型支持如何结果集
声明了私有的构造器主要是为了良好的规范性和维护性。
package com.liyingdong.util;
public class DataGridResult<T> {
private String total;
private T rows;
private int code;
private String msg;
public static DataGridResult SUCCESS = new DataGridResult<>(/*200,操作成功*/);
public static DataGridResult failtrue = new DataGridResult<>(/*400,操作失败*/);
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;
}
private DataGridResult(String total, T rows) {
super();
this.total = total;
this.rows = rows;
}
private DataGridResult() {
// TODO Auto-generated constructor stub
}
public static <T> DataGridResult ok(String total,T rows){
return new DataGridResult<>(total,rows);
}
}
优化后:
可以看到我们只用了一行代码就实现了。
package com.liyingdong.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.liyingdong.dao.BookDao;
import com.liyingdong.entity.Book;
import com.liyingdong.framework.ActionSupport;
import com.liyingdong.framework.ModelDriver;
import com.liyingdong.util.DataGridResult;
import com.liyingdong.util.PageBean;
import com.liyingdong.util.ResponseUtil;
public class BookAction extends ActionSupport implements ModelDriver<Book> {
private Book book = new Book();
private BookDao bookdao = new BookDao();
@Override
public Book getModel() {
// TODO Auto-generated method stub
return book;
}
public String datagrid(HttpServletRequest req,HttpServletResponse resp) {
PageBean pageBean = new PageBean();
pageBean.setRequest(req);
try {
ResponseUtil.writeJson(resp, DataGridResult.ok(pageBean.getTotal()+"", this.bookdao.list(book, pageBean)));
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
}
实现效果
主界面
分页效果
模糊查询