DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。
一.创建DataGrid(数据网格)
1.通过table表来创建datagrid
既然是数据网格，网格也就是tabel表，所以我们可以通过html页面中已存在的table表来创建数据网格。从现有的表格元素创建DataGrid，在HTML中定义列、行和数据。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI入门</title>
<!-- 在head中引入必要的js文件和css文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>
<script type="text/javascript">
$(function(){
});
</script>
</head>
<body>
<table class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'code'">编码</th>
<th data-options="field:'name'">名称</th>
<th data-options="field:'price'">价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td><td>name1</td><td>2323</td>
</tr>
<tr>
<td>002</td><td>name2</td><td>4612</td>
</tr>
</tbody>
</table>
</body>
</html>Html页面中的table表有tfoot属性，我尝试着在datagrid中添加一个tfoot标签，但是在页面效果中并没有显示。
这里的<thead>标签中的<tr>中的<th>（注意是th而不是td）标签中的field字段用来接收从后台传来的值，只有这个field字段和后台的字段值一样，才能将数据填充到datagrid中。
页面效果图：
既然我们是通过html页面中已存在的table表来创建的datagrid的，所以我们可以通过这个table的style来指定这个表的宽和高，也就是指定这个datagrid的宽和高。如果我们没有指定，那么高度会自适应，而宽度为整个屏幕。如果我们在style属性中指定宽和高，那么一定要在height和width属性后面的长度后面加上 px ，如200px，150px，如果不加上px，那么不会显示出效果的。这个datagrid和input标签一样，只要初始化了宽和高，那么就不会发生改变，即使datagrid的面积不够数据显示的，那么数据会被hidden掉，而不是将宽和高的值变大从而显示所有数据。
我们再来看一个Demo。
通过<table>标签创建DataGrid控件。在表格内使用<th>标签定义列。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI入门</title>
<!-- 在head中引入必要的js文件和css文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>
<script type="text/javascript">
$(function(){
});
</script>
</head>
<body>
<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:50">编码</th>
<th data-options="field:'name',width:50">名称</th>
<th data-options="field:'price',width:50,align:'right'">价格</th>
<th data-options="field:'price',width:50,align:'right'">品质</th>
</tr>
</thead>
<tbody>
<tr>
<td >111111111</td><td >1111111111111122222222222222222222222222</td> <td >1111111111</td> <td >11111111</td> <td >1111111111111111111</td>
</tr>
<tr>
<td >1</td><td >1</td> <td >1</td> <td >1</td> <td >1</td>
</tr>
<tr>
<td >1</td><td >1</td> <td >1</td> <td >1</td> <td >1</td>
</tr>
</tbody>
</table>
</body>
</html>页面效果图：
从这个小Demo中我们可以看到：我们是可以通过style来定义datagrid的大小的，通过data-options中的属性来定义单元格的大小，但是这有一个问题，在table表中的data-options中有一个属性fitColumns：true，当它为true时，是自适应datagrid的大小的，也就是说列的宽度会自适应datagrid大小，这样的话在 <th>标签中定义的单元格大小就没有意义了，只有将fitColumns：false设置为false，才会在页面显示自定义的单元格大小。 并且我们好像不能通过height属性来设置datagrid中单元格的高。
2.使用Javascript去创建DataGrid控件
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI入门</title>
<!-- 在head中引入必要的js文件和css文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>
<script type="text/javascript">
$(function(){
$('#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'}
]]
});
});
</script>
</head>
<body>
<table id="dg">
<!-- 如果这块不写的话，只会显示标题 ,并且由于在上方script中定义了thead，所以在table里在定义一个thead是没有意义的，
当然在页面中也是没有效果的。
-->
<tbody>
<tr><td>1</td><td>2</td><td>3</td></tr>
</tbody>
</table>
</body>
</html>页面效果图：
由于没有连接后台，所以对于datagrid来说非常重要的3个方法load（）方法，reload（）方法，loadData（） 是没有办法测试的。
并且，当我们在定义表的thead的时候，tr里面的标签用的是th标签，这样是能正确显示table中每列的标题的，但是如果把th换成td标签，那么将不会显示效果，也就是说，必须要用th标签，而不可以用td标签。
3.列属性
DataGrid列是一个数组对象，该元素也是一个数组对象。元素数组里面的元素是一个配置对象，它用来定义每一个列字段。
我们看一下最简单的列数组：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI入门</title>
<!-- 在head中引入必要的js文件和css文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>
<script type="text/javascript">
$(function(){
$('#dg').datagrid({
url:'datagrid_data.json',
columns:[[
{field:'itemid',title:'Item ID',width:80,sortable:true},
{field:'productid',title:'Product ID',width:80,sortable:true},
{title:'Item Details'}
],[
{field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
{field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
{field:'attr1',title:'Attribute',width:100},
{field:'status',title:'Status',width:60}
]]
});
});
</script>
</head>
<body>
<table id="dg"></table>
</body>
</html>效果演示图：
我们可以看到第一个列数组显示在第一行，第二个列数组显示在第一行的下面，并且拥有sortable：true的属性的列在列名右面有一个上下的小箭头用于排序。
下面我们再来看一下合并行和列的列数组集合：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI入门</title>
<!-- 在head中引入必要的js文件和css文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>
<script type="text/javascript">
$(function(){
$('#dg').datagrid({
url:'datagrid_data.json',
columns:[[
{field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},
{field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},
{title:'Item Details',colspan:4}
],[
{field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
{field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
{field:'attr1',title:'Attribute',width:100},
{field:'status',title:'Status',width:60}
]]
});
});
</script>
</head>
<body>
<table id="dg"></table>
</body>
</html>页面效果图：
这个效果就和上面的不同了。原理就是原本第二行的数组标题应该对应着 第一行的数组标题，但是由于第一个数组标题的第一列和第二列合并了2行，所以相应的，就把第二行的数组标题 “挤”到了右面，应该是List Price列对应Item Details列，其他的列依次向右。而Item Details这时占了4列，所以，第二行数组标题就全都在Item Details列下，也就出现了如上图的页面效果。（如果不理解可以拷贝代码，然后删除某一个rowspan属性或者colspan属性在看效果，这样就很明显看出是怎么布局的了）
Over-------------------------------