天天看點
傳回

easy ui datagrid 屬性

資料表格屬性（DataGrid Properties）

屬性繼承控制台，以下是資料表格獨有的屬性。

名稱 類型 描述 預設值
columns array 資料表格列配置對象，檢視列屬性以擷取更多細節。 undefined
frozenColumns array 跟列屬性一樣，但是這些列固定在左邊，不會滾動。 undefined
fitColumns boolean 設定為true将自動使列适應表格寬度以防止出現水準滾動。 false
autoRowHeight boolean 定義設定行的高度，根據該行的内容。設定為false可以提高負載性能。 true
toolbar array,selector

資料表格頂部面闆的工具欄。可能的值：

1）數組，每個工具選項和連結按鈕相同。

2）選擇顯示的工具欄。

在一個<div>的标簽定義工具欄:

$('#dg').datagrid({
    toolbar: '#tb'
});
<div id="tb">
<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>
</div>
通過數組定義工具欄: 
$('#dg').datagrid({
    toolbar: [{
        iconCls: 'icon-edit',
        handler: function(){alert('edit')}
    },'-',{
        iconCls: 'icon-help',
        handler: function(){alert('help')}
    }]
});
null
striped boolean 設定為true将交替顯示行背景。 false
method string 請求遠端資料的方法類型。 post
nowrap boolean 設定為true，當資料長度超出列寬時将會自動截取。 true
idField string 表明該列是一個唯一列。 null
url string 一個用以從遠端站點請求資料的超連結位址。 null
loadMsg string 當從遠端站點載入資料時，顯示的一條快捷資訊。 Processing, please wait …
pagination boolean 設定true将在資料表格底部顯示分頁工具欄。 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

當請求遠端資料時，發送的額外參數。

示例:

$('#dg').datagrid({
    queryParams: {
        name: 'easyui',
        subject: 'datagrid'
    }
});
{}
sortName string 當資料表格初始化時以哪一列來排序。 null
sortOrder string 定義排序順序，可以是'asc'或者'desc'（正序或者倒序）。 asc
remoteSort boolean 定義是否通過遠端伺服器對資料排序。 true
showFooter boolean 定義是否顯示行底（如果是做統計表格，這裡可以顯示總計等）。 false
rowStyler function

傳回樣式，如：'background:red'，function有2個參數：

index：行索引，從0開始.

row：對應于該行記錄的對象。

示例:

$('#dg').datagrid({
    rowStyler: function(index,row){
        if (row.listprice>80){
            return 'background-color:#6293BB;color:#fff;';
        }
    }
});
loader function

定義如何從遠端伺服器加載資料。傳回false可以取消該操作。這個函數接受以下參數：

param:

參數對象傳遞到遠端伺服器。

success(data):

回調函數将被調用成功檢索的資料。

error():回調函數将被調用失敗時檢索資料。

 json loader
loadFilter function

傳回過濾的資料顯示。該函數需要一個參數'data'，表示原始資料。您可以更改源資料的标準資料格式。此函數必須傳回标準資料對象中包含的“total”和“rows”的屬性。

示例:

// removing 'd' object from asp.net web service json output
$('#dg').datagrid({
    loadFilter: function(data){
        if (data.d){
            return data.d;
        } else {
            return data;
        }
    }
});
editors object 定義當編輯一行時的編輯模式。 predefined editors
view object 定義資料表格的視圖。 default view

列屬性（Column Properties）

資料表格的列是一個對象數組，即這個對象中的元素也是一個數組（js中數組是對象）。 對象數組中的每一個元素都是可配置的對象，每個可配置對象定義一個列。

示例:

columns:[[   

  1.     {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},   
  2.     {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},   
  3.     {title:'Item Details',colspan:4}   
  4. ],[   
  5.     {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},   
  6.     {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},   
  7.     {field:'attr1',title:'Attribute',width:100},   
  8.     {field:'status',title:'Status',width:60}   
  9. ]]  
名稱 類型 描述 預設值
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

格式化單元格函數，有3個參數：

value：字段的值。

rowData：行資料。

rowIndex：行索引。

示例:

$('#dg').datagrid({
    columns:[[
        {field:'userId',title:'User', width:80,
            formatter: function(value,row,index){
                if (row.user){
                    return row.user.name;
                } else {
                    return value;
                }
            }
        }
    ]]
});
undefined
styler function

單元格樣式函數，傳回樣式字元串裝飾表格如'background:red'，function有3個參數：

value：字段值。

rowData：行資料。

rowIndex：行索引。

示例:

$('#dg').datagrid({
    columns:[[
        {field:'listprice',title:'List Price', width:80, align:'right',
            styler: function(value,row,index){
                if (value < 20){
                    return 'background-color:#ffee00;color:red;';
                }
            }
        }
    ]]
});
undefined
sorter function

T自定義字段排序函數，有2個參數：

a：該列的第一個值。

b：該列的第二個值。

示例:

$('#dg').datagrid({
    remoteSort: false,
    columns: [[
        {field:'date',title:'Date',width:80,sortable:true,align:'center',  
            sorter:function(a,b){  
                a = a.split('/');  
                b = b.split('/');  
                if (a[2] == b[2]){  
                    if (a[0] == b[0]){  
                        return (a[1]>b[1]?1:-1);  
                    } else {  
                        return (a[0]>b[0]?1:-1);  
                    }  
                } else {  
                    return (a[2]>b[2]?1:-1);  
                }  
            }  
        }
    ]]
});
undefined
editor string,object

表明編輯類型。如果屬性是字元串類型表示編輯類型，如果是對象則包含2個參數：

type：字元串，編輯類型，可選值：text，textarea，checkbox，numberbox，validatebox，datebox，combobox，combotree。

options：對象，對象于編輯類型的編輯器屬性。

 undefined

事件（Events）

事件繼承控制台，以下是資料表格獨有的屬性。

名稱 屬性 描述
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

當使用者輕按兩下單元格時觸發。

示例:

// when double click a cell, begin editing and make the editor get focus
$('#dg').datagrid({
    onDblClickCell: function(index,field,value){
        $(this).datagrid('beginEdit', index);
        var ed = $(this).datagrid('getEditor', {index:index,field:field});
        $(ed.target).focus();
    }
});
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 當資料表格的列标題被滑鼠右鍵單擊時觸發。
onRowContextMenu e, rowIndex, rowData 當一行被滑鼠右鍵單擊時觸發。

方法（Methods）

名稱 屬性 描述
options none 傳回屬性對象。
getPager none 傳回頁面對象。
getPanel none 傳回控制台對象。
getColumnFields frozen

傳回列字段，如果設定了frozen屬性為true，将傳回固定列的字段名。

示例:

var opts = $('#dg').datagrid('getColumnFields');    // get unfrozen columns
var opts = $('#dg').datagrid('getColumnFields', true); // get frozen columns
getColumnOption field 傳回特定的列屬性。
resize param 縮放和布局。
load param 載入并顯示第一頁的記錄，如果傳遞了'param'參數，它将會覆寫查詢參數屬性的值。通過傳遞一些參數，通常做一個查詢，這個方法可以被稱為從伺服器加載新資料。 
$('#dg').datagrid('load',{
    code: '01',
    name: 'name01'
});
reload param 重載記錄，跟'load'方法一樣但是重載的是目前頁的記錄而非第一頁。
reloadFooter footer 重載行底記錄。 示例: 
// update footer row values and then refresh
var rows = $('#dg').datagrid('getFooterRows');
rows[0]['name'] = 'new name';
rows[0]['salary'] = 60000;
$('#dg').datagrid('reloadFooter');

// update footer rows with new data
$('#dg').datagrid('reloadFooter',[
    {name: 'name1', salary: 60000},
    {name: 'name2', salary: 65000}
]);
loading none 顯示載入狀态。
loaded none 隐藏載入狀态。
fitColumns none 讓列寬自動适應資料表格的寬度。
fixColumnSize field

固定列尺寸。如果“field' 參數未指定，将所有列的大小固定。

示例:

$('#dg').datagrid('fixColumnSize', 'name');  // fix the 'name' column size
$('#dg').datagrid('fixColumnSize');  // fix all columns size
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：編輯器可以做的行為。

target：目标編輯器jQuery對象。

field：字段名。

type：編輯器類型。
getEditor options

擷取特定的編輯器，options參數有2個屬性：

index：行索引。

field:字段名。

示例:

// get the datebox editor and change its value
var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'});
$(ed.target).datebox('setValue', '5/4/2012');
refreshRow index 重新整理一行。
validateRow index 校驗指定的行，如果有效傳回true。
updateRow param

更新指定的行，param參數包含如下屬性：

index：要更新的行索引。

row：新的行資料。

示例:

$('#dg').datagrid('updateRow',{
    index: 2,
    row: {
        name: 'new name',
        note: 'new note message'
    }
});
appendRow row 添加一行。 新的行會被添加到最後一個位置: 
$('#dg').datagrid('appendRow',{
    name: 'new name',
    age: 30,
    note: 'some messages'
});
insertRow param

插入一個新行，param參數包含如下屬性：

index：要插入的行索引，如果沒有定義則在最後面添加一個新行。

row：行資料。

示例:

// insert a new row at second row position
$('#dg').datagrid('insertRow',{
    index: 1,    // index start with 0
    row: {
        name: 'new name',
        age: 30,
        note: 'some messages'
    }
});
deleteRow index 删除一行。
getChanges type 擷取從最後一次送出開始的被修改的所有行，type參數表明修改的類型，可選值：inserted，deleted，updated等 。當沒有傳遞type參數時，傳回所有被修改的行。
acceptChanges none 送出所有修改的資料，送出後的資料将不能再修改或者復原。
rejectChanges none 復原自建立以來或自上次調用AcceptChanges，所有的變化資料。
mergeCells options

合并單元格，options參數包含如下屬性：

index：行索引。

field：字段名。

rowspan：整合單元格要跨的行數。

colspan：整合單元格要跨的列數。
showColumn field 顯示特定的列。
hideColumn field 隐藏特定的列。
js easyui js
上一篇: jQuery Easy UI整理筆記目錄jQuery Easy UI整理筆記目錄
下一篇: Jquery Easy UI學習(一)datagrid的使用

繼續閱讀