easyui datagrid屬性和方法

本文可以當做api來使用

使用方法（Usage Example）

從現有的表單元素創建數據表格，定義在html中的行，列和數據。

<table class="easyui-datagrid">  
    <thead>  
        <tr>  
            <th data-options="field:'code'">Code</th>  
            <th data-options="field:'name'">Name</th>  
            <th data-options="field:'price'">Price</th>  
        </tr>  
    </thead>  
    <tbody>  
        <tr>  
            <td>001</td><td>name1</td><td>2323</td>  
        </tr>  
        <tr>  
            <td>002</td><td>name2</td><td>4612</td>  
        </tr>  
    </tbody>  
</table>  

通過<TABLE>標記創建的DataGrid。嵌套的<TH>標簽定義的列的表。

<table class="easyui-datagrid" style="width:400px;height:250px"  
        data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">  
    <thead>  
        <tr>  
            <th data-options="field:'code',width:100">Code</th>  
            <th data-options="field:'name',width:100">Name</th>  
            <th data-options="field:'price',width:100,align:'right'">Price</th>  
        </tr>  
    </thead>  
</table> 

使用JavaScript創建數據表格。

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

$('#dg').datagrid({   
    url:'datagrid_data.json',   
    columns:[[   
        {field:'code',title:'Code',width:100},   
        {field:'name',title:'Name',width:100},   
        {field:'price',title:'Price',width:100,align:'right'}   
    ]]   
});  

查詢數據填充數據表格。

$('#dg').datagrid('load', {   
    name: 'easyui',   
    address: 'ho'  
});

數據更改與服務器交互，刷新當前數據。

$('#dg').datagrid('reload');    // reload the current page data  

數據表格屬性（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="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a> <a href="#" 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:[[   
    {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},   
    {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},   
    {title:'Item Details',colspan:4}   
],[   
    {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},   
    {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},   
    {field:'attr1',title:'Attribute',width:100},   
    {field:'status',title:'Status',width:60}   
]] 

 

名稱	類型	描述	默認值
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

　　　轉載：　https://www.cnblogs.com/prefect/p/5664513.html

　　　詳細文檔：http://www.jeasyui.net/plugins/183.html