DataGrid 是EasyUi框架中或者其他的框架中都比较重要的组件，这里我们就深入的介绍下。
Datagrid是用来显示数据的，然后还可以对表中的数据进行编辑。
上图就是datagrid的一个例子，我们可以从这里看出datagrid要比我们传统显示数据的方式要友好和漂亮的多哦。
下面我们来从简单的datagrid开始学习
1：创建一个简单的datagrid
1.1：
<table id="dg" class="easyui-datagrid" style="width:200px;
height:200px;" fitcolumns="true" singleselect="true"
pagination="true">
<thead><!--如果添加表头，就需要thead这个标签对-->
<tr>
<th
data-options="field:‘Name‘">Name</th>
<th
data-options="field:‘PassWord‘">PassWord</th>
</tr>
</thead>
</table>
上面的代码我们创建了一个 easyui样式的 datagrid ，然后为这个datagrid添加里两列，列名分别是：Name,PassWord, 对应绑定的字段是 field属性值指定的，分别是 Name,PassWord。
1.2：我们创建一个按钮，并绑定一个事件，单击后加载对应的数据
<input type="button" value="click me" onclick="mm()">
1.3：对应的Javascript代码如下所示：
<script type="text/javascript">
function mm() {
var grid = $("#dg").datagrid();<!--获取datagrid实例-->
if
(grid) {
$.get(‘Handler.ashx‘, function (data)
{<!--使用Jquery的Ajax加载数据，Handler.ashx可以是本地的，也可以是远程的服务-->
grid.datagrid("loadData",
data)<!--如果数据存在，然后就将数据填充到datagrid当中-->
},
‘json‘);
}
else {
alert("Error");
}
}
</script>
1.4：显示效果如下所示：
上图就是我们代码运行后的效果，点击 click Me 按钮后，读取、加载、显示数据。
我们还可以为这个Datagrid添加 title的属性
上面的代码是单击按钮后，通过Ajax调用数据并填充的效果，不过，我们也可以再datagrid加载的同时并读取数据的，我们所需要做的仅仅是指定datagrid的URL属性即可。
<table id="dg" url="handler.ashx" title="My User"
class="easyui-datagrid" style="width:200px; height:200px;"
fitcolumns="true"
singleselect="true">
<thead>
<tr>
<th
data-options="field:‘Name‘">Name</th>
<th
data-options="field:‘PassWord‘">PassWord</th>
</tr>
</thead>
</table>
运行后但是不单击按钮的效果
这里可以看到即使不单击按钮也可以读取数据。 这里我们的URL指定的是一个读取数据并将数据以Json字符串的格式返回的服务，当然了，我们还可以直接指定一个静态的json数据文件，比如：url="myuser.json"，需要情调的是，这个.json文件内的数据格式必须正确，如果我们访问远程服务器上面的Json文件，我们要确保IIS的MIME类型包含Json文件。 其实，添加也非常简单的 text/json,文件的后缀名=.json.
2:读取选中的行的数据
function mm() {
var row =
$("#dg").datagrid("getSelected");
alert("name = " + row.Name + "
password = " + row.PassWord);
}
getSelected 是一个方法，他返回你所选中的一条数据的对象，然后我们可以用他们的字段值来读取这些数据，比如上文中提到的，row.Name, row.PassWord 等。 我们知道 Name以及PassWord是datagrid我字段值。
当然，我们也可以一次选择多行的数据，调用的方法是 getSelections ，该方法返回的是一个数组
我们可以将返回的数据，当成是一个对象数据，每一个对象就是datagrid中的一个数据对象，然后我们就可以分别读取每一个对象的属性值，也就是字段值哦。
但是，这里有一点需要注意的地方，当你一次读取多行数据的时候，前提是你必须得让datagrid支持多行的数据读取，这个需要设置一个属性
<selectonchange="$(‘#dg‘).datagrid({singleSelect:(this.value==0)})">
我们可以设置 singleSelect的bool值。
3：添加复选框
有的时候我们需要在第一列添加一个复选框，要实现这个功能其实也很简单，添加下列一行代码即可
<th data-options="field:‘ck‘, checkbox:true"></th>
在定义表列的时候，添加一个表列，然后设置为复选框类型即可 checkbox：true
复选框有两个属性，一个是点击框才会选中，一个是 单击行的任何部分也会选中复选框
SelectOnCheck: <inputtype="checkbox"checkedonchange="$(‘#dg‘).datagrid({selectOnCheck:$(this).is(‘:checked‘)})">
CheckOnSelect: <inputtype="checkbox"checkedonchange="$(‘#dg‘).datagrid({checkOnSelect:$(this).is(‘:checked‘)})">
selectOnCheck: 表示只有点选框的时候才可以选中
checkOnSelect：表示只有点选行的时候或者点选框的时候都会选中复选款框
4:为datagrid添加Toolbar
4.1：创建toolbar对象数组
<script type="text/javascript">
var _toolbar =
[{
text: ‘Add‘,
iconCls: ‘icon-add‘,
handler: function () {
alert(‘add‘) }
}, {
text: ‘Cut‘,
iconCls:
‘icon-cut‘,
handler: function () { alert(‘cut‘) }
}, ‘-‘,
{
text: ‘Save‘,
iconCls: ‘icon-save‘,
handler: function ()
{ alert(‘save‘) }
}];
</script>
上段代码块定义了一个toolbar数组对象
4.2：将toolbar对象数组绑定到datagrid
<table id="dg" url="handler.ashx" title="My User" class="easyui-datagrid" style="width:200px; height:200px;" data-options="striped:‘true‘ , toolbar:_toolbar">
红色代码段就是我们创建的toolbar对象数组
然后我们在data-options 中使用toolbar对象进行绑定
运行代码后的效果如下所示：
上面仅仅是定义了三个简单的toolbar，当然我们是可以定义复杂的toolbar块的
参考代码如下：
我们定义了一个复杂的toolbar,我们将它们封装在Div对象中，然后我们将这个包含复杂toolbar的DIV对象绑定到datagrid中，
<tableclass="easyui-datagrid"title="DataGrid Complex Toolbar"style="width:700px;height:250px"data-options="rownumbers:true,singleSelect:true,url:‘datagrid_data1.json‘,method:‘get‘,toolbar:‘#tb‘">
我们可以看到 是如何将Div对象绑定到datagrid的
效果如下图所示：
5：实现grid的分页显示
EasyUI-Datagrid,布布扣,bubuko.com
原文：http://www.cnblogs.com/xingchen/p/3576312.html