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