jQuery EasyUI API – Grid – DataGrid [原創漢化官方API]

DataGrid

  繼承自 $.fn.panel.defaults,覆蓋默認值 $.fn.datagrid.defaults.

 

 

 

  DataGrid控件顯示數據以表格的形式提供瞭豐富的選擇,支持排序,組和編輯數據。

 

  DataGrid控件被設計來減少開發時間和要求開發商沒有特定的知識。它是輕量級的和功能豐富的。合並單元格,多列標題,凍結列和頁腳是僅有的幾個特點。

 

 

 

 

[依賴於]

 

panel

resizable

linkbutton

pagination

 

[使用實例]

在HTML標簽中,從現有的元素創建表元素、定義列、行中的數據:

 

復制代碼

 1 <table class="easyui-datagrid">  

 2     <thead>  

 3         <tr>  

 4             <th data-options="field:'code'">Code</th>  

 5             <th data-options="field:'name'">Name</th>  

 6             <th data-options="field:'price'">Price</th>  

 7         </tr>  

 8     </thead>  

 9     <tbody>  

10         <tr>  

11             <td>001</td><td>name1</td><td>2323</td>  

12         </tr>  

13         <tr>  

14             <td>002</td><td>name2</td><td>4612</td>  

15         </tr>  

16     </tbody>  

17 </table>  

復制代碼

 

 

通過<table>標簽創建DataGrid,在table表格裡嵌套<th>標簽定義。

 

復制代碼

 1 <table class="easyui-datagrid" style="width:400px;height:250px"  

 2         data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">  

 3     <thead>  

 4         <tr>  

 5             <th data-options="field:'code',width:100">Code</th>  

 6             <th data-options="field:'name',width:100">Name</th>  

 7             <th data-options="field:'price',width:100,align:'right'">Price</th>  

 8         </tr>  

 9     </thead>  

10 </table>  

復制代碼

 

 

使用Javascript也可以創建DataGrid:

 

1 <table id="dg"></table>  

復制代碼

1 $('#dg').datagrid({   

2     url:'datagrid_data.json',   

3     columns:[[   

4         {field:'code',title:'Code',width:100},   

5         {field:'name',title:'Name',width:100},   

6         {field:'price',title:'Price',width:100,align:'right'}   

7     ]]   

8 });  

復制代碼

 

 

使用一些參數查詢數據:

 

1 $('#dg').datagrid('load', {   

2     name: 'easyui',   

3     address: 'ho'  

4 });  

 

 

改變數據到服務器後,更新之前的數據:

 

1 $('#dg').datagrid('reload');    // 重新加載當前頁的數據 

 

 

[DataGrid 屬性]

屬性繼承自 panel 面板,下面是從 panel 新增的屬性列表:

 

名稱 類型

描述 默認值

columns array DataGrid列的配置對象,更多詳細請參見列屬性。 undefined

frozenColumns array 相同列的屬性,但是這些列會被凍結在左邊。 undefined

fitColumns boolean 為“true”則自動 展開/收縮 列的大小,為瞭自動填充Grid的寬度,防止出現水平滾動條。 false

autoRowHeight boolean 定義是否基於行的內容設置行高,設置“false”可以提高加載性能。 true

toolbar array,selector DataGrid面板頂部的 ToolBar 工具條,可以設置的值如下:

1) 一個數組,每個options項是相同的LinkButton。

2) 一個 selector 選擇器 指定 ToolBar 工具條。

使用<p>標簽定義 ToolBar 工具條:

 

復制代碼

 1 $('#dg').datagrid({

 2     toolbar: '#tb'

 3 });

 4 <p id="tb">

 5   <a href="#" 

 6       class="easyui-linkbutton" 

 7       data-options="iconCls:'icon-edit',plain:true"></a>

 8   <a href="#" 

 9       class="easyui-linkbutton" 

10       data-options="iconCls:'icon-help',plain:true"></a>

11 </p>

復制代碼

 

 

通過數組定義 ToolBar:

 

復制代碼

1 $('#dg').datagrid({

2     toolbar: [{

3         iconCls: 'icon-edit',

4         handler: function(){alert('edit')}

5     },'-',{

6         iconCls: 'icon-help',

7         handler: function(){alert('help')}

8     }]

9 });

復制代碼

null

striped boolean 設置“True”實現各行變色的功能。 false

method string 這個方法需要遠程數據類型。 post

nowrap boolean 設置為“True”則將數據顯示在一行內,設置為“True”可以提高加載性能。 true

idField string 指定哪些字段是標識字段。 null

url string 一個用於請求遠程站點的URL路徑。 null

loadMsg string 當從遠程站點加載數據時,顯示一個提示信息。 Processing, please wait …

pagination boolean 設置為“True”則在DataGrid底部顯示分頁工具條按鈕。 false

rownumbers boolean 設置為“True”則顯示行數列。 false

singleSelect boolean 設置為“True”則隻允許選擇一行。 false

checkOnSelect boolean

如果設置為“True”,當用戶點擊一行時 選中/取消選中 該復選框。

 

如果設置為“False”,當用戶準確點擊復選框時,選中/取消選中 該復選框。

這個屬性時1.3版本之後可用的。

 

true

selectOnCheck boolean

如果設置為True,點擊復選框將總會選擇行。

 

如果設置為False,選中行將不會選中該復選框。

這個屬性在1.3版本後可用。

 

true

pagePosition string 定義分頁工具條的位置,有效值是:'top','bottom','both'。

這個屬性在1.3版本後可用。 bottom

pageNumber number 當設置分頁的屬性時,初始化頁面數量。 1

pageSize number 當設置分頁屬性時,初始化頁面大小。 10

pageList array 當設置分頁屬性時,初始化頁面大小選擇列表、 [10,20,30,40,50]

queryParams object 當請求遠程數據時,附帶發送額外的參數。

代碼示例:

 

1 $('#dg').datagrid({

2     queryParams: {

3         name: 'easyui',

4         subject: 'datagrid'

5     }

6 });

{}

sortName string 定義哪些列可以被排序。 null

sortOrder string 定義列的排序方式,隻能是升序“asc”或降序“desc”。 asc

remoteSort boolean 定義是否接受來自遠程服務器的排序數據。 true

showHeader boolean 定義是否顯示行的頁眉。 true

showFooter boolean 定義是否顯示行的頁腳。 false

scrollbarSize number 滾動條的款(當是垂直滾動條時) 或者 高(當是水平滾動條的時候) 18

rowStyler function 返回例如 'background:red' 一樣的風格樣式,這個方法帶兩個參數:

rowIndex: 行的下標索引,從0開始

rowData: 符合記錄數的行

代碼示例:

 

復制代碼

1 $('#dg').datagrid({

2     rowStyler: function(index,row){

3         if (row.listprice>80){

4             return 'background-color:#6293BB;color:#fff;';

5         }

6     }

7 });

復制代碼

 

loader function

定義如何從遠程服務器加載數據,返回“false”可以終止這個請求。

 

這個函數需要以下參數:

param: 向遠程服務器傳遞的參數對象。

success(data): 這個回調函數會在檢索數據成功後調用。

error(): 這個函數會在檢索數據失敗時調用。

 

json loader

loadFilter function

顯示返回過濾後的數據。這個函數帶一個參數 'data',它表示原始數據。

 

你可以將原始數據源更改為標準的數據格式。

 

這個函數必須返回一個包含“total”和“rows”屬性的標準數據對象。

 

代碼示例:

 

復制代碼

 1 // 從 ASP.NET Web Service Json 輸出中刪除“d”對象

 2 $('#dg').datagrid({

 3     loadFilter: function(data){

 4         if (data.d){

 5             return data.d;

 6         } else {

 7             return data;

 8         }

 9     }

10 });

復制代碼

 

editors object 定義編輯行時的編輯器。 predefined editors

view object 定義DataGrid的View視圖。 default view

 

 

 

 

 

 

 

[列屬性]

DataGrid的列是一個數組對象,它的元素也是一個數組。元素的元素數組是一個配置對象,它定義瞭每一列的字段。

 

 

 

代碼示例:

 

復制代碼

 1 columns:[[   

 2     {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},   

 3     {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},   

 4     {title:'Item Details',colspan:4}   

 5 ],[   

 6     {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},   

 7     {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},   

 8     {field:'attr1',title:'Attribute',width:100},   

 9     {field:'status',title:'Status',width:60}   

10 ]]  

復制代碼

名稱 類型 描述 默認值

title string 列的標題文本。 undefined

field string 列的字段名稱。 undefined

width number 列的寬度,如果沒有定義,寬度將會自動擴展以容納其內容。 undefined

rowspan number 表示應該占據多少行。 undefined

colspan number 表示應該占據多少列。 undefined

align string 表示如何排列對齊列數據,可以用的值有:'left','right','center'。 undefined

sortable boolean 設置為“True”則指定列可以排序。 undefined

resizable boolean 設置為“True”則可以調整列的大小。 undefined

hidden boolean 設置為“True”則隱藏列。 undefined

checkbox boolean 設置為“True”則顯示一個復選框,該復選框有固定的寬度。 undefined

formatter function 單元格格式化的函數,帶有三個參數:

value: 字段值

rowData: 行數據記錄

rowIndex: 行下標

代碼示例:

 

復制代碼

 1 $('#dg').datagrid({

 2     columns:[[

 3         {field:'userId',title:'User', width:80,

 4             formatter: function(value,row,index){

 5                 if (row.user){

 6                     return row.user.name;

 7                 } else {

 8                     return value;

 9                 }

10             }

11         }

12     ]]

13 });

復制代碼

undefined

styler function 單元格樣式函數,返回例如 'background:red' 一樣的用戶自定義的樣式字符串。這個函數帶有三個參數:

value: 字段值

rowData: 行數據記錄

rowIndex: 行下標

代碼示例:

 

復制代碼

 1 $('#dg').datagrid({

 2     columns:[[

 3         {field:'listprice',title:'List Price', width:80, align:'right',

 4             styler: function(value,row,index){

 5                 if (value < 20){

 6                     return 'background-color:#ffee00;color:red;';

 7                 }

 8             }

 9         }

10     ]]

11 });

復制代碼

undefined

sorter function 用來做局部排序的自定義字段的排序功能,帶有兩個參數:

a: 第一個字段值

b: 第二個字段值

代碼示例:

 

復制代碼

 1 $('#dg').datagrid({

 2     remoteSort: false,

 3     columns: [[

 4         {field:'date',title:'Date',width:80,sortable:true,align:'center',  

 5             sorter:function(a,b){  

 6                 a = a.split('/');  

 7                 b = b.split('/');  

 8                 if (a[2] == b[2]){  

 9                     if (a[0] == b[0]){  

10                         return (a[1]>b[1]?1:-1);  

11                     } else {  

12                         return (a[0]>b[0]?1:-1);  

13                     }  

14                 } else {  

15                     return (a[2]>b[2]?1:-1);  

16                 }  

17             }  

18         }

19     ]]

20 });

復制代碼

undefined

editor string,object 顯示編輯類型,當字符串指明瞭編輯類型,對象包含兩個屬性:

type: string,編輯的類型,可以是的值:text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree.

options: object, 對應於編輯類型的編輯器選項。 undefined

 

 

 

 

 

 

 

Editor

重寫默認值 $.fn.datagrid.defaults.editors.

 

 

 

每個 editor 編輯器都有以下行為:

 

名稱 參數 描述

init container, options 初始化 Editor 編輯器,並返回目標對象。

destroy target 如果有必要則摧毀 Editor 編輯器。

getValue target 從 Editor 編輯器獲取數據值。

setValue target , value 設置 Editor 編輯器的數據值。

resize target , width 如果需要則調整 Editor 編輯器。

例如,在Editor編輯器中如下定義:

 

復制代碼

 1 $.extend($.fn.datagrid.defaults.editors, {   

 2     text: {   

 3         init: function(container, options){   

 4             var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);   

 5             return input;   

 6         },   

 7         getValue: function(target){   

 8             return $(target).val();   

 9         },   

10         setValue: function(target, value){   

11             $(target).val(value);   

12         },   

13         resize: function(target, width){   

14             var input = $(target);   

15             if ($.boxModel == true){   

16                 input.width(width – (input.outerWidth() – input.width()));   

17             } else {   

18                 input.width(width);   

19             }   

20         }   

21     }   

22 });  

復制代碼

 

 

 

 

 

[DataGrid View]

重寫默認值:$.fn.datagrid.defaults.view.

 

該視圖是一個對象,它會告訴DataGrid中如何呈現行。該對象必須定義瞭一下功能函數:

 

名稱 參數 描述

render target, container, frozen 數據加載時調用。

target: Dom對象,DataGrid對象。

container: 行容器。

frozen: 表示是否呈現凍結容器。

renderFooter target, container, frozen 這是一個可選的功能,呈現頁腳。

renderRow target, fields, frozen, rowIndex, rowData 這是一個可選的功能,函數將會被render調用。

refreshRow target, rowIndex 定義如何刷新指定的行。

onBeforeRender target, rows 視圖Render前觸發。

onAfterRender target 視圖在Render後觸發。

[事件]

這個時間繼承自 panel 面板,一下是DataGrid另增的事件:

 

名稱 參數 描述

onLoadSuccess data 數據加載時觸發。

onLoadError none 當加載遠程數據時發生一些錯誤的時候觸發。

onBeforeLoad param 在一個請求加載數據之前觸發,如果返回“false”則取消加載操作。

onClickRow rowIndex, rowData 當用戶點擊一行時觸發,這個參數包括:

rowIndex: 單擊行的索引,從0開始。

rowData: 對應單擊的行記錄

onDblClickRow rowIndex, rowData 當用戶雙擊行時觸發,這些參數包括:

rowIndex: 單擊行的索引,從0開始。

rowData: 對應點擊的行記錄

onClickCell rowIndex, field, value 當用戶點擊單元格時觸發。

onDblClickCell rowIndex, field, value 當用戶雙擊單元格時觸發。

代碼示例:

 

復制代碼

1 // 當雙擊一個單元格時,賦予Editor編輯器焦點,以開始編輯

2 $('#dg').datagrid({

3     onDblClickCell: function(index,field,value){

4         $(this).datagrid('beginEdit', index);

5         var ed = $(this).datagrid('getEditor', {index:index,field:field});

6         $(ed.target).focus();

7     }

8 });

復制代碼

onSortColumn sort, order 當用戶排序一列時觸發,這些參數包括:

sort: 排序的列的字段名稱

order: 排序列的順序

onResizeColumn field, width 當用戶調整列大小時觸發。

onSelect rowIndex, rowData 當用戶選擇一行時觸發,這些參數包括:

rowIndex: 選擇行的索引,從0開始

rowData: 對應著所選擇的行記錄

onUnselect rowIndex, rowData 當用戶取消選擇行時觸發,這些參數包括:

rowIndex: 取消選擇的行下標,從0開始

rowData: 對應的取消選擇的行記錄。

onSelectAll rows 當用戶選擇所有行時觸發。

onUnselectAll rows 當用戶取消選中所有行時觸發。

onCheck rowIndex,rowData 當用戶勾選一行時觸發,這些參數包括:

rowIndex: 勾選的行下標,從0開始

rowData: 對應著勾選的行記錄

這個事件在1.3版本後有效。

onUncheck rowIndex,rowData 當用戶取消勾選一行時觸發,這些參數包括:

rowIndex: 取消選中的行下標,從0開始

rowData: 取消選中的行記錄

這個事件在1.3版本後生效

onCheckAll rows 當用戶勾選所有行時觸發,這個事件在1.3版本後有效。

onUncheckAll rows 當用戶取消勾選所有行時觸發,這個事件在1.3版本後生效

onBeforeEdit rowIndex, rowData 當用戶開始編輯一行時觸發,這些參數包括:

rowIndex: 編輯行的下標,從0開始

rowData: 對應著編輯的行記錄

onAfterEdit rowIndex, rowData, changes 當用戶完成編輯時觸發,這些參數包括:

rowIndex: 編輯的行下標,從0開始

rowData: 編輯的行記錄

changes: 更改的 字段/值 對。

onCancelEdit rowIndex, rowData 當用戶取消編輯一行時觸發,這些參數包括:

rowIndex: 編輯的行下標,從0開始

rowData: 對應著編輯的行記錄

onHeaderContextMenu e, field 當DataGrid的標題是右鍵點擊時觸發。

onRowContextMenu e, rowIndex, rowData 當行時右鍵點擊時觸發。

[方法]

名稱 參數 描述

options none 返回options選項對象。

getPager none 返回paper頁面對象。

getPanel none 返回panel面板對象、

getColumnFields frozen 返回列字段。如果凍結設置為true,則凍結列字段返回。

代碼示例:

1 var opts = $('#dg').datagrid('getColumnFields');    // 獲取非凍結列

2 var opts = $('#dg').datagrid('getColumnFields', true); // 獲取凍結列

getColumnOption field 返回指定列的選項option設置。

resize param 做調整,做佈局。

load param

加載並顯示在第一頁的行,如果‘param’指定瞭,那麼它便會隨著QueryParams屬性取代。

 

通常通過傳遞一個參數做一個查詢,這個方法可以成為從服務器加載新數據。

 

1 $('#dg').datagrid('load',{

2     code: '01',

3     name: 'name01'

4 });

reload param 重新加載行,和“load”方法一樣,但是停留在當前頁面。

reloadFooter footer 重新加載頁腳行,代碼示例:

復制代碼

 1 // update footer row values and then refresh

 2 var rows = $('#dg').datagrid('getFooterRows');

 3 rows[0]['name'] = 'new name';

 4 rows[0]['salary'] = 60000;

 5 $('#dg').datagrid('reloadFooter');

 6 

 7 // update footer rows with new data

 8 $('#dg').datagrid('reloadFooter',[

 9     {name: 'name1', salary: 60000},

10     {name: 'name2', salary: 65000}

11 ]);

復制代碼

loading none 顯示加載狀態。

loaded none 隱藏加載狀態。

fitColumns none 使列自動 展開/收縮 以適應網格的寬度。

fixColumnSize field 固定列的大下,如果‘field’參數沒有被分配,則所有列大小都將是固定的。

代碼示例:

 

1 $('#dg').datagrid('fixColumnSize', 'name');  // 固定‘name’列的大小

2 $('#dg').datagrid('fixColumnSize');  // 固定所有列大小

fixRowHeight index 固定指定的行高,如果“index”參數沒有分配,則所有行高都將是固定的。

autoSizeColumn field 調整列寬度以適應其內容,這個方法在1.3版本之後可用。

loadData data 加載本地數據,舊的行會被刪除。

getData none 返回加載的數據。

getRows none 返回當前頁的行。

getFooterRows none 返回頁腳行。

getRowIndex row 返回指定行的索引,row行參數可以是一個行記錄或一個id字段值。

getChecked none 返回復選框被選中的所有行,這個方法在1.3版本後可用。

getSelected none 返回第一個選定行的記錄或null。

getSelections none 返回所有選定的行,當沒有選中記錄的時候,將返回一個空數組。

clearSelections none 清除所有的選擇。

selectAll none 選擇當前頁面所有的行。

unselectAll none 取消選擇當前頁面的所有行。

selectRow index 選擇一行,行下標從0開始。

selectRecord idValue 通過id值參數選中一行。

unselectRow index 取消選中行。

checkAll none 選中當前頁面所有行,這個方法從1.3版本之後可用。

uncheckAll none 取消選中當前頁所有行,這個方法從1.3版本之後可用。

checkRow index 選中一行,行下標從0開始,這個方法從1.3版本之後可用。

uncheckRow index 取消選中一行,行下標從0開始,該方法從1.3版本之後可用。

beginEdit index 開始編輯行。

endEdit index 結束編輯行。

cancelEdit index 取消編輯行

getEditors index 獲取指定的行編輯器,每個編輯器具有以下屬性:

actions: 該編輯器可以做的action動作,和編輯器定義一樣。

target: 目標編輯器的jQuery對象。

field: 字段名稱。

type: 編輯器類型,例如'text','combobox','datebox', 等.

getEditor options 獲取指定的編輯器,該選項包含兩個屬性:

index: 行下標索引

field: 字段名稱

代碼示例:

 

1 // 獲取 DateBox 編輯器,並且更改它的值

2 var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'});

3 $(ed.target).datebox('setValue', '5/4/2012');

refreshRow index 刷新行。

validateRow index 驗證指定的行,返回“true”時有效。

updateRow param 更新指定的行,該參數包含以下屬性:

index: 要更新的行下標索引。

row: 新行的數據。

代碼示例:

 

復制代碼

1 $('#dg').datagrid('updateRow',{

2     index: 2,

3     row: {

4         name: 'new name',

5         note: 'new note message'

6     }

7 });

復制代碼

appendRow row 拼接一個新行,這個新行將會被追加在最後的位置:

1 $('#dg').datagrid('appendRow',{

2     name: 'new name',

3     age: 30,

4     note: 'some messages'

5 });

insertRow param

插入一個新行,該參數包含以下屬性:

index: 要插入新行的下標索引位置,如果沒有指定,則在後面拼接新增。

row: 要新增的行數據,

 

代碼示例如下:

 

復制代碼

1 // 在第二行插入新行

2 $('#dg').datagrid('insertRow',{

3     index: 1,    // index start with 0

4     row: {

5         name: 'new name',

6         age: 30,

7         note: 'some messages'

8     }

9 });

復制代碼

deleteRow index 刪除一行。

getChanges type

獲取自從上次提交後的產生更改的行。

 

這個類型參數指明哪些類型更改瞭行,可能的值如下:inserted,deleted,updated,等.

 

當類型參數沒有指定時,返回所有更改的行。

 

acceptChanges none 提交所有的更改,從它被加載或者上次 acceptChanges 被調用。

rejectChanges none 回滾自其創建後所有更改的數據,或者從最近一次 acceptChanges 被調用。

mergeCells options 合並某個列為一個列,這個選項包含以下屬性:

index: 行下標

field: 字段名稱

rowspan: 要合並的行數

colspan: 要合並的列數

showColumn field 顯示指定的列。

hideColumn field 隱藏指定的列。

 

發佈留言