Easyui--datagrid数据网格

前言

本章讲解的是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'<