目录
前言
本章讲解的是Easyui中对的datagrid数据网格，以及实现效果。
datagrid简介和用法
数据网格（datagrid）以表格格式显示数据，并为选择、排序、分组和编辑数据提供了丰富的支持。数据网格（datagrid）的设计目的是为了减少开发时间，且不要求开发人员具备指定的知识。它是轻量级的，但是功能丰富。它的特性包括单元格合并，多列页眉，冻结列和页脚，等等。
从已有的表格元素创建数据网格（datagrid），在 html 中定义列、行及数据。
<table class="easyui-datagrid">
<thead>
<th data-options="field:'code'">Code</th>
<th data-options="field:'name'">Name</th>
<th data-options="field:'price'">Price</th>
</thead>
<tbody>
<td>001</td>
<td>name1</td>
<td>2323</td>
<td>002</td>
<td>name2</td>
<td>4612</td>
</tbody>
</table>也可以使用 javascript 创建数据网格（datagrid）。
<table id="dg"></table>$('#dg').datagrid({
url:'datagrid_data.json',
columns:[[
{
field:'code',title:'Code',width:100},
{
field:'name',title:'Name',width:100},
{
field:'price',title:'Price',width:100,align:'right'}
]]
});
通过一些参数查询数据。
$('#dg').datagrid('load', {
name: 'easyui',
address: 'ho'
});在向服务器改变数据之后，更新前台数据。
$('#dg').datagrid('reload'); 案例演示
在页面上添加一个div或table标签，然后用jquery获取这个标签，并初始化一个datagrid。代码如下：
<body>
<input type="hidden" id="ctx"
value="${pageContext.request.contextPath }">
<div id="tb">
<input class="easyui-textbox" name="name" id="name" style="with:20%;padding-left:10px" data-options="label:'书名：'," >
<a id="btn-search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-serch'">搜索</a>
<a href="btn-add" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true">新增</a>
</div>
<table id="dg"></table>
</body>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}
]]
});
//点击搜索按钮完成按名字进行书籍查询
$("#btn-search").click(function(){
// alert(11);
$('#dg').datagrid('load', {
name:$("#name").val()
});
});
})通用的工具类简化代码
public class Book {
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;
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPinyin() {
return pinyin;
}
public void setPinyin(String pinyin) {
this.pinyin = pinyin;
}
public long getCid() {
return cid;
}
public void setCid(long cid) {
this.cid = cid;
}
public String getAuthor() {
return author;
}
public void setAuthor(String author) {
this.author = author;
}
public float getPrice() {
return price;
}
public void setPrice(float price) {
this.price = price;
}
public String getImage() {
return image;
}
public void setImage(String image) {
this.image = image;
}
public String getPublishing() {
return publishing;
}
public void setPublishing(String publishing) {
this.publishing = publishing;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public int getState() {
return state;
}
public void setState(int state) {
this.state = state;
}
public Timestamp getDeployTime() {
return deployTime;
}
public void setDeployTime(Timestamp deployTime) {
this.deployTime = deployTime;
}
public int getSales() {
return sales;
}
public void setSales(int sales) {
this.sales = sales;
}
@Override
public String toString() {
return "Book [id=" + id + ", name=" + name + ", pinyin=" + pinyin + ", cid=" + cid + ", author=" + author
+ ", price=" + price + ", image=" + image + ", publishing=" + publishing + ", description="
+ description + ", state=" + state + ", deployTime=" + deployTime + ", sales=" + sales + "]";
}
public Book() {
}
public Book(long id, String name, String pinyin) {
super();
this.id = id;
this.name = name;
this.pinyin = pinyin;
}
}BookAction处理代码
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) throws Exception {
//total中的数据从哪来?--->pagebean中的total属性
//rows的数据从哪来？---》每页的展示数据
PageBean pagebean=new PageBean();
pagebean.setRequest(req);
try {
List<Book> list = this.bookdao.list(book, pagebean);
ResponseUtil.writeJson(resp,DataGridResult.ok(pagebean.getTotal()+"",list));
} catch (InstantiationException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IllegalAccessException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}效果展示：
本章数据网格就讲到这，有需要补充的小伙伴欢迎在下方评论区留言！