DataGrid组件简介
DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。
使用过程中可以查看官方文档：DataGrid组件的
依赖关系，案例，DataGrid属性，事件和方法，以及demo
示例
1.两种方式（静态代码块HTML和我们使用动态代码块目的为了实现动态数据）
2.从现有的表格元素创建DataGrid，在HTML中定义列、行和数据。
通过Table标签创建DataGrid控件。在表格内使用标签定义列。
<table class="easyui-datagrid" style="width:400px;height:250px"
data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
<thead>
<tr>
<th data-options="field:'code',width:100">编码</th>
<th data-options="field:'name',width:100">名称</th>
<th data-options="field:'price',width:100,align:'right'">价格</th>
</tr>
</thead>
</table>
3.此外，也允许使用Javascript去创建DataGrid控件。(实现动态代码块从数据库)
创建js代码块：
$('#dg').datagrid({
url:'datagrid_data.json',
columns:[[
{field:'code',title:'代码',width:100},
{field:'name',title:'名称',width:100},
{field:'price',title:'价格',width:100,align:'right'}
]]
});
界面引用：
<table id="dg"></table>
4.找到官方提供的demo示例
目标
1、通过打开一个选项卡，展示一张表的数据，明确datagrid组件的用法
实现步骤
1.从点击树形菜单展示tabs选项卡的基础上从数据库拿值展示数据
2.使用自定义mvc编码模式，完成从数据库查询展示数据到以datagrid组件表格的形式
3.实体类(同步数据库的列字段)
private long id;
private String name;
private String pinyin;
private long cid;
private String author;
private float price;
private String image;
private String publishing;
private String description;
private int state;
private Timestamp deployTime;
private int sales;
4.dao层（编写查询方法查询数据库表的值，）
package com.houzhihong.dao;
import java.sql.SQLException;
import java.util.List;
import com.houzhihong.entity.Book;
import com.houzhihong.util.BaseDao;
import com.houzhihong.util.PageBean;
import com.houzhihong.util.StringUtils;
public class BookDao extends BaseDao<Book> {
public List<Book> list(Book book,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
String name =book.getName();
String sql = "select * from t_easyui_book where true ";
if(StringUtils.isNotBlank(name)) {
sql += " and name like '%"+name+"%'";
}
return super.executeQuery(sql, Book.class, pageBean);
}
//测试
public static void main(String[] args) throws InstantiationException, IllegalAccessException, SQLException {
BookDao bookDao = new BookDao();
Book book = new Book();
List<Book> list = bookDao.list(book, null);
for (Book b : list) {
System.out.println(b);
}
}
}
4.1 通用man方法检验一下，看方法有没有问题
控制台打印结果出来了说明方法没问题。
5.web层（处理业务逻辑）
package com.houzhihong.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.houzhihong.dao.BookDao;
import com.houzhihong.entity.Book;
import com.houzhihong.mvc.framework.ActionSupport;
import com.houzhihong.mvc.framework.ModelDriven;
import com.houzhihong.util.DataGridResult;
import com.houzhihong.util.PageBean;
import com.houzhihong.util.ResponseUtil;
public class BookAction extends ActionSupport implements ModelDriven<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 {
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, DataGridResult.ok(pageBean.getTotal()+"", list));
} catch (InstantiationException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
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,"x","x", 0, null, 0, null, null, null, 0, null, 0));
map.put("rows", asList);
ObjectMapper om = new ObjectMapper();
String jsonstr = om.writeValueAsString(map);
System.out.println(jsonstr);
}
}
6.为了重复写总记录数，和每页多少条，抽取到通用工具类
Map<String, Object> map = new HashMap<String, Object>();
map.put("total", pageBean.getTotal());
map.put("rows", list);
DataGridResult工具类
package com.houzhihong.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();
}
public static <T>DataGridResult<T> ok(String total,T rows){
return new DataGridResult<T>(total,rows);
}
}
7.把总记录数 和查询的结果集传过去
ResponseUtil.writeJson(resp, DataGridResult.ok(pageBean.getTotal()+"", list));
8.配置好mvc.xml文件
<?xml version="1.0" encoding="UTF-8"?>
<config>
<action path="/permission" type="com.houzhihong.web.PermissionAction"></action>
<action path="/book" type="com.houzhihong.web.BookAction"></action>
</config>
9，js代码块（数据展示，模糊查询）
$(function(){
var ctx = $("#ctx").val();
$('#dg').datagrid({
url:ctx+'/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,align:'right'},
{field:'cid',title:'书籍类别',width:100},
{field:'author',title:'作者',width:100},
{field:'price',title:'价格',width:100},
{field:'image',title:'图片',width:300}
]]
});
//搜索按钮 模糊查询
$("#btn-search").click(function(){
//alert(11);
$('#dg').datagrid('load', {
name:$("#name").val()
});
});
})
界面
1.引入需要使用到的核心库
<!--全局样式 -->
<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">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/themes/default/easyui.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>
<script type="text/javascript"
src="${pageContext.request.contextPath}/static/js/book.js"></script>
2，引用datagrid组件表格形式展示数据，文本框模糊查询。
<!-- 隐藏域 -->
<input type="hidden" id="ctx"
value="${pageContext.request.contextPath}">
<table id="dg"></table>
<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 id="btn-add"
href="#" class="easyui-linkbutton"
data-options="iconCls:'icon-help',plain:true">新增</a>
</div>
效果图
1.通过姓名进行模糊查询
2.表格形式展示数据
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
