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支持多行的数据读取，这个需要设置一个属性

<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块的

参考代码如下：

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

我们定义了一个复杂的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的分页显示

 先看看下分页的效果

 这里，我们可以选择每一个页我们可以显示的数据的条数，也可以显示，当前当前的页数

要实现这个功能，只需要添加 pagination 这个属性即可，并设置为true

分类所需数据的显示总体上有两种，一种是请求所有的数据，然后在客户端进行分页显示，另外一种是：只请求当前页面的数据，每一次我们翻页或者变更每一页包含数据的含量都会重新请求下数据。 两种方式可以根据实际情况来使用，对于少量数据的管理，我们可以使用客户端分页，对于大量或者海量数据的管理建议使用服务器端的数据更新。

 

具体实现的代码参考easyui官网的Demo，

6：字段分组 

看具体的分组效果

我们来看看通过修改代码是如何实现的哦

1. <thead>
   1. 　　<tr>
      1. 　　　　<thdata-options="field:'itemid',width:80"  rowspan="2">Item ID</th>
      2. 　　　　<thdata-options="field:'productid',width:100" rowspan="2">Product</th>
      3. 　　　　<th colspan="4">Item Details</th>
   2. 　　</tr>
   3. 　　<tr>
      1. 　　　　<thdata-options="field:'listprice',width:80, align:'right'">List Price</th>
      2. 　　　　<thdata-options="field:'unitcost',width:80 ,align:'right'">Unit Cost</th>
      3. 　　　　<thdata-options="field:'attr1',width:240">Attribute</th>
      4. 　　　　<thdata-options="field:'status',width:60,align:'center'">Status</th>
   4. 　　</tr>
2. </thead>

加粗的部分是合并的列，虽然我们列是合并的，但是对于数据的填充还是没有影响的哦

 

7：内容对其方式：

我们知道对于一行文字来说，可以有左对齐，右对齐，中间对齐等等， datagrid也提供了这种对齐的功能

<thdata-options="field:'listprice',width:80,align:'right',halign:'center'">List Price</th>

align 表示数据行的对齐， halign 表示表头行的对齐，

 

 

这些是最基本的内容，更多内容请参考官网

Jason