建站
咨詢
售后
建站咨詢
新聞中心
數(shù)據(jù)表格
繼承$.fn.panel.defaults，使用$.fn.datagrid.defaults重載默認(rèn)值。
創(chuàng)新互聯(lián)專業(yè)提供四川聯(lián)通機(jī)房服務(wù)器托管服務(wù)，為用戶提供五星數(shù)據(jù)中心、電信、雙線接入解決方案，用戶可自行在線購買四川聯(lián)通機(jī)房服務(wù)器托管服務(wù)，并享受7*24小時金牌售后服務(wù)。
依賴關(guān)系
控制面板
縮放
鏈接按鈕
分頁
使用方法
$('#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'}
]]
});
數(shù)據(jù)表格屬性
屬性繼承控制面板，以下是數(shù)據(jù)表格獨有的屬性。
| 名稱 | 類型 | 描述 | 默認(rèn)值 |
|---|---|---|---|
| columns（列） | array（數(shù)組） | 數(shù)據(jù)表格列配置對象，查看列屬性以獲取更多細(xì)節(jié)。 | null |
| frozenColumns（固定列） | array（數(shù)組） | 跟列屬性一樣，但是這些列固定在左邊，不會滾動。 | null |
| fitColumns（自適應(yīng)列寬） | boolean（布爾型） | 設(shè)置為true將自動使列適應(yīng)表格寬度以防止出現(xiàn)水平滾動。 | false |
| striped（顯示條紋） | boolean（布爾型） | 設(shè)置為true將交替顯示行背景。 | false |
| method（方法） | string（字符串） | 請求遠(yuǎn)程數(shù)據(jù)的方法類型。 | post |
| nowrap（截取） | boolean（布爾型） | 設(shè)置為true，當(dāng)數(shù)據(jù)長度超出列寬時將會自動截取。 | true |
| idField（id字段） | string（字符串） | 表明該列是一個唯一列。 | null |
| url（超鏈接） | string（字符串） | 一個用以從遠(yuǎn)程站點請求數(shù)據(jù)的超鏈接地址。 | null |
| loadMsg（載入時信息） | string（字符串） | 當(dāng)從遠(yuǎn)程站點載入數(shù)據(jù)時，顯示的一條快捷信息。 | Processing, please wait … |
| pagination（分頁） | boolean（布爾型） | 設(shè)置true將在數(shù)據(jù)表格底部顯示分頁工具欄。 | false |
| rownumbers（行數(shù)） | boolean（布爾型） | 設(shè)置為true將顯示行數(shù)。 | false |
| singleSelect（單選模式） | boolean（布爾型） | 設(shè)置為true將只允許選擇一行。 | false |
| pageNumber（當(dāng)前頁碼） | number（數(shù)字） | 當(dāng)設(shè)置分頁屬性時，初始化分頁碼。 | 1 |
| pageSize（每頁記錄數(shù)） | number（數(shù)字） | 當(dāng)設(shè)置分頁屬性時，初始化每頁記錄數(shù)。 | 10 |
| pageList（可選擇的每頁記錄數(shù)） | array | 當(dāng)設(shè)置分頁屬性時，初始化每頁記錄數(shù)列表。 | [10,20,30,40,50] |
| queryParams（查詢參數(shù)） | object（對象） | 當(dāng)請求遠(yuǎn)程數(shù)據(jù)時，發(fā)送的額外參數(shù)。 | {} |
| sortName（默認(rèn)排序） | string（字符串） | 當(dāng)數(shù)據(jù)表格初始化時以哪一列來排序。 | null |
| sortOrder（排序順序） | string（字符串） | 定義排序順序，可以是'asc'或者'desc'（正序或者倒序）。 | asc |
| remoteSort（遠(yuǎn)程排序） | boolean（布爾型） | 定義是否通過遠(yuǎn)程服務(wù)器對數(shù)據(jù)排序。 | true |
| showFooter（顯示行底） | boolean（布爾型） | 定義是否顯示行底（如果是做統(tǒng)計表格，這里可以顯示總計等）。 | false |
| rowStyler（行樣式） | function（函數(shù)） | 返回樣式，如：'red'，function有2個參數(shù)： index：行索引，從0開始. row：對應(yīng)于該行記錄的對象。 | |
| loadFilter（載入過濾器） | function（函數(shù)） | 返回用以顯示的已過濾數(shù)據(jù)，function有一個參數(shù)'data'表示原始數(shù)據(jù)，你可以將原始數(shù)據(jù)改變?yōu)橐?guī)范的數(shù)據(jù)格式，該函數(shù)必須返回包含 'total'和'rows'屬性的標(biāo)準(zhǔn)數(shù)據(jù)對象。 | |
| editors（編輯模式） | object（對象） | 定義當(dāng)編輯一行時的編輯模式。 | predefined editors |
| view（視圖） | object（對象） | 定義數(shù)據(jù)表格的視圖。 | default view |
列屬性
數(shù)據(jù)表格的列是一個對象數(shù)組，即這個對象中的元素也是一個數(shù)組（js中數(shù)組是對象）。 對象數(shù)組中的每一個元素都是可配置的對象，每個可配置對象定義一個列。
示例代碼:
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}
]]
| 名稱 | 類型 | 描述 | 默認(rèn)值 |
|---|---|---|---|
| title（標(biāo)題） | string（字符串） | 列標(biāo)題。 | undefined |
| field（字段） | string（字符串） | 列字段。 | undefined |
| width（寬度） | number（數(shù)字） | 列寬。 | undefined |
| rowspan（跨行數(shù)） | number（數(shù)字） | 表明一個單元格跨幾行。 | undefined |
| colspan（跨列數(shù)） | number（數(shù)字） | 表明一個單元格跨幾列。 | undefined |
| align（對其方式） | string（字符串） | 表明如何對其列數(shù)據(jù)，可選值：'left'，'right'，'center'。 | undefined |
| sortable（可排序） | boolean（布爾型） | 設(shè)置為true允許對該列排序。 | undefined |
| resizable（縮放） | boolean（布爾型） | 設(shè)置為true允許該列被縮放。 | undefined |
| hidden（隱藏） | boolean（布爾型） | 設(shè)置為true將隱藏列。 | undefined |
| checkbox（復(fù)選框） | boolean（布爾型） | 設(shè)置為true將顯示復(fù)選框。 | undefined |
| formatter（格式化） | function（函數(shù)） | 格式化單元格函數(shù)，有3個參數(shù)： value：字段的值。 rowData：行數(shù)據(jù)。 rowIndex：行索引。 | undefined |
| styler（樣式） | function（函數(shù)） | 單元格樣式函數(shù)，返回樣式字符串裝飾表格如'red'，function有3個參數(shù)： value：字段值。 rowData：行數(shù)據(jù)。 rowIndex：行索引。 | undefined |
| sorter（排序器） | function（函數(shù)） | T自定義字段排序函數(shù)，有2個參數(shù)： a：該列的第一個值。 b：該列的第二個值。 | undefined |
| editor（編輯器） | string,object（字符串，對象） | 表明編輯類型。如果屬性是字符串類型表示編輯類型，如果是對象則包含2個參數(shù)： type：字符串，編輯類型，可選值：text，textarea，checkbox，numberbox，validatebox，datebox，combobox，combotree。 options：對象，對象于編輯類型的編輯器屬性。 | undefined |
編輯器
使用$.fn.datagrid.defaults.editors重載默認(rèn)值。
每個編輯器都有以下方法：
| 名稱 | 參數(shù) | 描述 |
|---|---|---|
| init | container, options | 初始化編輯器并返回目標(biāo)對象。 |
| destroy | target | 銷毀編輯器。 |
| getValue | target | 獲取編輯框的值。 |
| setValue | target , value | 設(shè)置編輯框的值。 |
| resize | target , width | 調(diào)整編輯器 |
例如，如下代碼將定義一個文本編輯器：
$.extend($.fn.datagrid.defaults.editors, {
text: {
init: function(container, options){
var 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);
}
}
}
});
數(shù)據(jù)表格視圖
使用$.fn.datagrid.defaults.view重載默認(rèn)值。
視圖是一個告訴數(shù)據(jù)表格如何呈現(xiàn)行記錄的對象，對象必須定義以下方法：
| 名稱 | 參數(shù) | 描述 |
|---|---|---|
| render | target, container, frozen | 當(dāng)數(shù)據(jù)載入時調(diào)用。 target: DOM對象，數(shù)據(jù)網(wǎng)格對象。 container: 行記錄容器。 frozen: 是否呈現(xiàn)固定容器。 |
| renderFooter | target, container, frozen | 這是一個可選函數(shù)用以展現(xiàn)行底。 |
| renderRow | target, fields, frozen, rowIndex, rowData | 這是一個可選函數(shù)，它可以被render函數(shù)調(diào)用。 |
| refreshRow | target, rowIndex | 定義如何刷新指定的行。 |
| onBeforeRender | target, rows | 在視圖被呈現(xiàn)之前觸發(fā)。 |
| onAfterRender | target | 在視圖被程序之后觸發(fā)。 |
事件
事件繼承控制面板，以下是數(shù)據(jù)表格獨有的屬性。
| 名稱 | 參數(shù) | 描述 |
|---|---|---|
| onLoadSuccess | data | 當(dāng)數(shù)據(jù)載入成功時觸發(fā)。 |
| onLoadError | none | 當(dāng)載入遠(yuǎn)程數(shù)據(jù)發(fā)生錯誤時觸發(fā)。 |
| onBeforeLoad | param | 在請求載入數(shù)據(jù)之前觸發(fā)，如果返回false將取消載入。 |
| onClickRow | rowIndex, rowData | 當(dāng)用戶點擊行時觸發(fā)，參數(shù)如下： rowIndex：被點擊的行索引，從0開始。 rowData：對應(yīng)于被點擊的行的記錄。 |
| onDblClickRow | rowIndex, rowData | 當(dāng)用戶雙擊一行時觸發(fā)，參數(shù)如下： rowIndex：被點擊的行索引，從0開始。 rowData：對應(yīng)于被點擊的行的記錄。 |
| onClickCell | rowIndex, field, value | 當(dāng)用戶點擊單元格時觸發(fā)。 |
| onDblClickCell | rowIndex, field, value | 當(dāng)用戶雙擊單元格時觸發(fā)。 |
| onSortColumn | sort, order | 當(dāng)用戶對列排序時觸發(fā)，參數(shù)如下： sort：排序字段名稱。 order：排序順序。 |
| onResizeColumn | field, width | 當(dāng)用戶調(diào)整列寬時觸發(fā)。 |
| onSelect | rowIndex, rowData | 當(dāng)用戶選擇一行是觸發(fā)，參數(shù)如下： rowIndex：被選擇的行索引，從0開始。 rowData：對應(yīng)于被選擇行的記錄。 |
| onUnselect | rowIndex, rowData | 當(dāng)用戶取消選擇一行時觸發(fā)，參數(shù)如下： rowIndex：被取消選擇的行索引，從0開始。 rowData：對應(yīng)于被取消選擇行的記錄。 |
| onSelectAll | rows | 當(dāng)用戶選擇所有行時觸發(fā)。 |
| onUnselectAll | rows | 當(dāng)用戶取消選擇所有行時觸發(fā)。 |
| onBeforeEdit | rowIndex, rowData | 當(dāng)用戶開始編輯一行時觸發(fā)，參數(shù)如下： rowIndex：正在編輯的行索引，從0開始。 rowData：對應(yīng)于正在編輯的行的記錄。 |
| onAfterEdit | rowIndex, rowData, changes | 當(dāng)用戶編輯完成時觸發(fā)，參數(shù)如下： rowIndex：正在編輯的行索引，從0開始。 rowData：對應(yīng)于正在編輯的行的記錄。 changes：被改變的字段內(nèi)容，對應(yīng)方式為字段：值。 |
| onCancelEdit | rowIndex, rowData | 當(dāng)用戶取消編輯行時觸發(fā)，參數(shù)如下： rowIndex：正在編輯的行索引，從0開始。 rowData：對應(yīng)于正在編輯的行的記錄。 |
| onHeaderContextMenu | e, field | 當(dāng)數(shù)據(jù)表格的列標(biāo)題被鼠標(biāo)右鍵單擊時觸發(fā)。 |
| onRowContextMenu | e, rowIndex, rowData | 當(dāng)一行被鼠標(biāo)右鍵單擊時觸發(fā)。 |
方法
| 名稱 | 參數(shù) | 描述 |
|---|---|---|
| options | none | 返回屬性對象。 |
| getPager | none | 返回頁面對象。 |
| getPanel | none | 返回控制面板對象。 |
| getColumnFields | frozen | 返回列字段，如果設(shè)置了frozen屬性為true，將返回固定列的字段名。 |
| getColumnOption | field | 返回特定的列屬性。 |
| resize | param | 縮放和布局。 |
| load | param | 載入并顯示第一頁的記錄，如果傳遞了'param'參數(shù)，它將會覆蓋查詢參數(shù)屬性的值。 |
| reload | param | 重載記錄，跟'load'方法一樣但是重載的是當(dāng)前頁的記錄而非第一頁。 |
| reloadFooter | footer | 重載行底記錄。 |
| loading | none | 顯示載入狀態(tài)。 |
| loaded | none | 隱藏載入狀態(tài)。 |
| fitColumns | none | 讓列寬自動適應(yīng)數(shù)據(jù)表格的寬度。 |
| fixColumnSize | none | 固定列尺寸。 |
| fixRowHeight | index | 固定特定列的高度。 |
| loadData | data | 載入本地數(shù)據(jù)，舊記錄將被移除。 |
| getData | none | 返回已載入數(shù)據(jù)。 |
| getRows | none | 返回當(dāng)前頁的記錄。 |
| getFooterRows | none | 返回行底記錄。 |
| getRowIndex | row | 返回指定行的索引，row參數(shù)可以是行記錄或者是一個id字段的值。 |
| getSelected | none | 返回第一個被選擇的行記錄或null。 |
| getSelections | none | 返回所有被選擇的行，當(dāng)沒有記錄被選擇時，將返回一個空數(shù)組。 |
| clearSelections | none | 取消所有的已選擇項。 |
| selectAll | none | 全選。 |
| unselectAll | none | 取消全選。 |
| selectRow | index | 選擇一行，行索引從0開始。 |
| selectRecord | idValue | 通過傳遞id參數(shù)來選擇一行。 |
| unselectRow | index | 取消選擇一行。 |
| beginEdit | index | 開始編輯一行。 |
| endEdit | index | 結(jié)束編輯。 |
| cancelEdit | index | 取消編輯。 |
| getEditors | index | 獲取指定行的編輯器，每個編輯器有如下屬性： actions：編輯器可以做的行為。 target：目標(biāo)編輯器jQuery對象。 field：字段名。 type：編輯器類型。 |
| getEditor | options | 獲取特定的編輯器，options參數(shù)有2個屬性： index：行索引。 field:字段名。 |
| refreshRow | index | 刷新一行。 |
| validateRow | index | 校驗指定的行，如果有效返回true。 |
| updateRow | param | 更新指定的行，param參數(shù)包含如下屬性： index：要更新的行索引。 row：新的行數(shù)據(jù)。 |
| appendRow | row | 添加一行。 |
| insertRow | param | 插入一個新行，param參數(shù)包含如下屬性： index：要插入的行索引，如果沒有定義則在最后面添加一個新行。 row：行數(shù)據(jù)。 |
| deleteRow | index | 刪除一行。 |
| getChanges | type | 獲取從最后一次提交開始的被修改的所有行，type參數(shù)表明修改的類型，可選值：inserted，deleted，updated等 。當(dāng)沒有傳遞type參數(shù)時，返回所有被修改的行。 |
| acceptChanges | none | 提交所有修改的數(shù)據(jù)，提交后的數(shù)據(jù)將不能再修改或者回滾。 |
| rejectChanges | none | 回滾所有被刪除的行。 |
| mergeCells | options | 合并單元格，options參數(shù)包含如下屬性： index：行索引。 field：字段名。 rowspan：整合單元格要跨的行數(shù)。 colspan：整合單元格要跨的列數(shù)。 |
| showColumn | field | 顯示特定的列。 |
| hideColumn | field | 隱藏特定的列。 |
jQuery EasyUI下載：http://www.jeasyui.com/download/index.php
詳細(xì)內(nèi)容： http://www.jeasyui.com/documentation/index.php
附件下載
文章名稱：datagrid（數(shù)據(jù)表格）QueryEasyUI中文幫助手冊
URL地址：http://www.ef60e0e.cn/article/pjedcs.html
