EasyUI-Datagrid

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 ，该方法返回的是一个数组

1. function getSelections (){
   1. 　　var ss = [];
   2. 　　var rows = $ ( ‘#dg‘ ). datagrid ( ‘getSelections‘ );
   3. 　　for ( var i = 0 ; i < rows . length ; i ++){
      1. 　　　　var row = rows [ i ];
      2. 　　　　ss . push ( ‘<span>‘ + row . itemid + ":" + row . productid + ":" + row . attr1 + ‘</span>‘ );
   4. 　　}
   5. 　　$ . messager . alert ( ‘Info‘ , ss . join ( ‘<br/>‘ ));
2. }

我们可以将返回的数据，当成是一个对象数据，每一个对象就是datagrid中的一个数据对象，然后我们就可以分别读取每一个对象的属性值，也就是字段值哦。

但是，这里有一点需要注意的地方，当你一次读取多行数据的时候，前提是你必须得让datagrid支持多行的数据读取，这个需要设置一个属性

<select onchange = " $ ( ‘#dg‘ ). datagrid ({ singleSelect :( this . value == 0 )}) " >

我们可以设置 singleSelect的bool值。

3：添加复选框

有的时候我们需要在第一列添加一个复选框，要实现这个功能其实也很简单，添加下列一行代码即可

<th data-options="field:‘ck‘, checkbox:true"></th>

在定义表列的时候，添加一个表列，然后设置为复选框类型即可 checkbox：true

复选框有两个属性，一个是点击框才会选中，一个是 单击行的任何部分也会选中复选框

SelectOnCheck: <input type = "checkbox" checked onchange = " $ ( ‘#dg‘ ). datagrid ({ selectOnCheck : $ ( this ). is ( ‘:checked‘ )}) " >

CheckOnSelect: <input type = "checkbox" checked onchange = " $ ( ‘#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块的

参考代码如下：

1. <div id = "tb" style = " padding : 5px ; height : auto " >
   1. 　　<div style = " margin - bottom : 5px " >
      1. 　　　　<a href = "#" class = "easyui-linkbutton" iconCls = "icon-add" plain = "true" ></a>
      2. 　　　　<a href = "#" class = "easyui-linkbutton" iconCls = "icon-edit" plain = "true" ></a>
      3. 　　　　<a href = "#" class = "easyui-linkbutton" iconCls = "icon-save" plain = "true" ></a>
      4. 　　　　<a href = "#" class = "easyui-linkbutton" iconCls = "icon-cut" plain = "true" ></a>
      5. 　　　　<a href = "#" class = "easyui-linkbutton" iconCls = "icon-remove" plain = "true" ></a>
   2. 　　</div>
   3. 　　<div>
      1. 　　　　Date From: <input class = "easyui-datebox" style = " width : 80px " >
      2. 　　　　To: <input class = "easyui-datebox" style = " width : 80px " >
      3. 　　　　Language:
      4. 　　　　<select class = "easyui-combobox" panelHeight = "auto" style = " width : 100px " >
         1. 　　　　　　<option value = "java" > Java </option>
         2. 　　　　　　<option value = "c" > C </option>
         3. 　　　　　　<option value = "basic" > Basic </option>
         4. 　　　　　　<option value = "perl" > Perl </option>
         5. 　　　　　　<option value = "python" > Python </option>
      5. 　　　　</select>
      6. 　　　　<a href = "#" class = "easyui-linkbutton" iconCls = "icon-search" > Search </a>
   4. 　　</div>
2. </div>

我们定义了一个复杂的toolbar,我们将它们封装在Div对象中，然后我们将这个包含复杂toolbar的DIV对象绑定到datagrid中，

<table class = "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的分页显示

原文：http://www.cnblogs.com/xingchen/p/3576312.html