資料表格

資料表格

繼承$.fn.panel.defaults，使用$.fn.datagrid.defaults過載預設值。

依賴關係

• 控制皮膚
• 縮放
• 連結按鈕
• 分頁

使用方法

<table id="tt"></table>

$('#tt').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'}
    ]]
});

資料表格屬性

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

名稱	型別	描述	預設值
columns（列）	array（陣列）	資料表格列配置物件，檢視列屬性以獲取更多細節。	null
frozenColumns（固定列）	array（陣列）	跟列屬性一樣，但是這些列固定在左邊，不會滾動。	null
fitColumns（自適應列寬）	boolean（布林型）	設定為true將自動使列適應表格寬度以防止出現水平滾動。	false
striped（顯示條紋）	boolean（布林型）	設定為true將交替顯示行背景。	false
method（方法）	string（字串）	請求遠端資料的方法型別。	post
nowrap（擷取）	boolean（布林型）	設定為true，當資料長度超出列寬時將會自動擷取。	true
idField（id欄位）	string（字串）	表明該列是一個唯一列。	null
url（超連結）	string（字串）	一個用以從遠端站點請求資料的超連結地址。	null
loadMsg（載入時資訊）	string（字串）	當從遠端站點載入資料時，顯示的一條快捷資訊。	Processing, please wait …
pagination（分頁）	boolean（布林型）	設定true將在資料表格底部顯示分頁工具欄。	false
rownumbers（行數）	boolean（布林型）	設定為true將顯示行數。	false
singleSelect（單選模式）	boolean（布林型）	設定為true將只允許選擇一行。	false
pageNumber（當前頁碼）	number（數字）	當設定分頁屬性時，初始化分頁碼。	1
pageSize（每頁記錄數）	number（數字）	當設定分頁屬性時，初始化每頁記錄數。	10
pageList（可選擇的每頁記錄數）	array	當設定分頁屬性時，初始化每頁記錄數列表。	[10,20,30,40,50]
queryParams（查詢引數）	object（物件）	當請求遠端資料時，傳送的額外引數。	{}
sortName（預設排序）	string（字串）	當資料表格初始化時以哪一列來排序。	null
sortOrder（排序順序）	string（字串）	定義排序順序，可以是'asc'或者'desc'（正序或者倒序）。	asc
remoteSort（遠端排序）	boolean（布林型）	定義是否通過遠端伺服器對資料排序。	true
showFooter（顯示行底）	boolean（布林型）	定義是否顯示行底（如果是做統計表格，這裡可以顯示總計等）。	false
rowStyler（行樣式）	function（函式）	返回樣式，如：'background:red'，function有2個引數： index：行索引，從0開始. row：對應於該行記錄的物件。
loadFilter（載入過濾器）	function（函式）	返回用以顯示的已過濾資料，function有一個引數'data'表示原始資料，你可以將原始資料改變為規範的資料格式，該函式必須返回包含 'total'和'rows'屬性的標準資料物件。
editors（編輯模式）	object（物件）	定義當編輯一行時的編輯模式。	predefined editors
view（檢視）	object（物件）	定義資料表格的檢視。	default view

列屬性

資料表格的列是一個物件陣列，即這個物件中的元素也是一個陣列（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：行索引。	undefined
styler（樣式）	function（函式）	單元格樣式函式，返回樣式字串裝飾表格如'background:red'，function有3個引數： value：欄位值。 rowData：行資料。 rowIndex：行索引。	undefined
sorter（排序器）	function（函式）	T自定義欄位排序函式，有2個引數： a：該列的第一個值。 b：該列的第二個值。	undefined
editor（編輯器）	string,object（字串，物件）	表明編輯型別。如果屬性是字串型別表示編輯型別，如果是物件則包含2個引數： type：字串，編輯型別，可選值：text，textarea，checkbox，numberbox，validatebox，datebox，combobox，combotree。 options：物件，物件於編輯型別的編輯器屬性。	undefined

編輯器

使用$.fn.datagrid.defaults.editors過載預設值。

 

每個編輯器都有以下方法：

名稱	引數	描述
init	container, options	初始化編輯器並返回目標物件。
destroy	target	銷燬編輯器。
getValue	target	獲取編輯框的值。
setValue	target , value	設定編輯框的值。
resize	target , width	調整編輯器

例如，如下程式碼將定義一個文字編輯器：

$.extend($.fn.datagrid.defaults.editors, {
    text: {
        init: function(container, options){
            var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
            return input;
        },
        getValue: function(target){
            return $(target).val();
        },
        setValue: function(target, value){
            $(target).val(value);
        },
        resize: function(target, width){
            var input = $(target);
            if ($.boxModel == true){
                input.width(width - (input.outerWidth() - input.width()));
            } else {
                input.width(width);
            }
        }
    }
});

資料表格檢視

使用$.fn.datagrid.defaults.view過載預設值。

檢視是一個告訴資料表格如何呈現行記錄的物件，物件必須定義以下方法：

名稱	引數	描述
render	target, container, frozen	當資料載入時呼叫。 target: DOM物件，資料網格物件。 container: 行記錄容器。 frozen: 是否呈現固定容器。
renderFooter	target, container, frozen	這是一個可選函式用以展現行底。
renderRow	target, fields, frozen, rowIndex, rowData	這是一個可選函式，它可以被render函式呼叫。
refreshRow	target, rowIndex	定義如何重新整理指定的行。
onBeforeRender	target, rows	在檢視被呈現之前觸發。
onAfterRender	target	在檢視被程式之後觸發。

事件

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

名稱	引數	描述
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	當使用者雙擊單元格時觸發。
onSortColumn	sort, order	當使用者對列排序時觸發，引數如下： sort：排序欄位名稱。 order：排序順序。
onResizeColumn	field, width	當使用者調整列寬時觸發。
onSelect	rowIndex, rowData	當使用者選擇一行是觸發，引數如下： rowIndex：被選擇的行索引，從0開始。 rowData：對應於被選擇行的記錄。
onUnselect	rowIndex, rowData	當使用者取消選擇一行時觸發，引數如下： rowIndex：被取消選擇的行索引，從0開始。 rowData：對應於被取消選擇行的記錄。
onSelectAll	rows	當使用者選擇所有行時觸發。
onUnselectAll	rows	當使用者取消選擇所有行時觸發。
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	當一行被滑鼠右鍵單擊時觸發。

方法

名稱	引數	描述
options	none	返回屬性物件。
getPager	none	返回頁面物件。
getPanel	none	返回控制皮膚物件。
getColumnFields	frozen	返回列欄位，如果設定了frozen屬性為true，將返回固定列的欄位名。
getColumnOption	field	返回特定的列屬性。
resize	param	縮放和佈局。
load	param	載入並顯示第一頁的記錄，如果傳遞了'param'引數，它將會覆蓋查詢引數屬性的值。
reload	param	過載記錄，跟'load'方法一樣但是過載的是當前頁的記錄而非第一頁。
reloadFooter	footer	過載行底記錄。
loading	none	顯示載入狀態。
loaded	none	隱藏載入狀態。
fitColumns	none	讓列寬自動適應資料表格的寬度。
fixColumnSize	none	固定列尺寸。
fixRowHeight	index	固定特定列的高度。
loadData	data	載入本地資料，舊記錄將被移除。
getData	none	返回已載入資料。
getRows	none	返回當前頁的記錄。
getFooterRows	none	返回行底記錄。
getRowIndex	row	返回指定行的索引，row引數可以是行記錄或者是一個id欄位的值。
getSelected	none	返回第一個被選擇的行記錄或null。
getSelections	none	返回所有被選擇的行，當沒有記錄被選擇時，將返回一個空陣列。
clearSelections	none	取消所有的已選擇項。
selectAll	none	全選。
unselectAll	none	取消全選。
selectRow	index	選擇一行，行索引從0開始。
selectRecord	idValue	通過傳遞id引數來選擇一行。
unselectRow	index	取消選擇一行。
beginEdit	index	開始編輯一行。
endEdit	index	結束編輯。
cancelEdit	index	取消編輯。
getEditors	index	獲取指定行的編輯器，每個編輯器有如下屬性： actions：編輯器可以做的行為。 target：目標編輯器jQuery物件。 field：欄位名。 type：編輯器型別。
getEditor	options	獲取特定的編輯器，options引數有2個屬性： index：行索引。 field:欄位名。
refreshRow	index	重新整理一行。
validateRow	index	校驗指定的行，如果有效返回true。
updateRow	param	更新指定的行，param引數包含如下屬性： index：要更新的行索引。 row：新的行資料。
appendRow	row	新增一行。
insertRow	param	插入一個新行，param引數包含如下屬性： index：要插入的行索引，如果沒有定義則在最後面新增一個新行。 row：行資料。
deleteRow	index	刪除一行。
getChanges	type	獲取從最後一次提交開始的被修改的所有行，type參數列明修改的型別，可選值：inserted，deleted，updated等 。當沒有傳遞type引數時，返回所有被修改的行。
acceptChanges	none	提交所有修改的資料，提交後的資料將不能再修改或者回滾。
rejectChanges	none	回滾所有被刪除的行。
mergeCells	options	合併單元格，options引數包含如下屬性： index：行索引。 field：欄位名。 rowspan：整合單元格要跨的行數。 colspan：整合單元格要跨的列數。
showColumn	field	顯示特定的列。
hideColumn	field	隱藏特定的列。