jQuery EasyUI 教程
jQuery EasyUI 擴(kuò)展 - 可編輯的數(shù)據(jù)網(wǎng)格（Editable DataGrid）
jQuery EasyUI 擴(kuò)展
用法
在 html 標(biāo)簽中創(chuàng)建數(shù)據(jù)網(wǎng)格（datagrid）
????<table id="tt" style="width:600px;height:200px"
????????????title="Editable DataGrid"
????????????singleSelect="true">
????????<thead>
????????????<tr>
????????????????<th field="itemid" width="100" editor="{type:'validatebox',options:{required:true}}">Item ID</th>
????????????????<th field="productid" width="100" editor="text">Product ID</th>
????????????????<th field="listprice" width="100" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th>
????????????????<th field="unitcost" width="100" align="right" editor="numberbox">Unit Cost</th>
????????????????<th field="attr1" width="150" editor="text">Attribute</th>
????????????</tr>
????????</thead>
????</table>
讓數(shù)據(jù)網(wǎng)格（datagrid）可編輯
$('#tt').edatagrid({
url: 'datagrid_data.json',
saveUrl: ...,
updateUrl: ...,
destroyUrl: ...
});
現(xiàn)在您可以雙擊數(shù)據(jù)網(wǎng)格行開(kāi)始編輯操作。您也可以設(shè)置 saveUrl、updateUrl、destroyUrl 屬性來(lái)自動(dòng)同步客戶端與服務(wù)器端的數(shù)據(jù)。
屬性
該屬性擴(kuò)展自數(shù)據(jù)網(wǎng)格（datagrid），下面是為可編輯的數(shù)據(jù)網(wǎng)格（edatagrid）添加的屬性。
| 名稱 | 類型 | 描述 | 默認(rèn)值 |
|---|---|---|---|
| destroyMsg | object | 當(dāng)銷毀一行時(shí)要顯示的確認(rèn)對(duì)話框消息。 |
destroyMsg:{
????norecord:{????// when no record is selected
????????title:'Warning',
????????msg:'No record is selected.'
????},
????confirm:{????// when select a row
????????title:'Confirm',
????????msg:'Are you sure you want to delete?'
????}
}
|
| autoSave | boolean | 設(shè)置為 true，則當(dāng)點(diǎn)擊數(shù)據(jù)網(wǎng)格外部時(shí)自動(dòng)保存編輯行。 | false |
| url | string | 一個(gè) URL，從服務(wù)器檢索數(shù)據(jù)。 | null |
| saveUrl | string | 一個(gè) URL，向服務(wù)器保存數(shù)據(jù)，并返回添加的行。 | null |
| updateUrl | string | 一個(gè) URL，向服務(wù)器更新數(shù)據(jù)，并返回更新的行。 | null |
| destroyUrl | string | 一個(gè) URL，向服務(wù)器傳送 'id' 參數(shù)來(lái)銷毀該行。 | null |
| tree | selector | 顯示對(duì)應(yīng)的樹(shù)組件的樹(shù)選擇器。 | null |
| treeUrl | string | 一個(gè) URL，檢索樹(shù)的數(shù)據(jù)。 | null |
| treeDndUrl | string | 一個(gè) URL，處理拖放操作。 | null |
| treeTextField | string | 定義樹(shù)的文本字段名稱。 | name |
| treeParentField | string | 定義樹(shù)的父節(jié)點(diǎn)字段名稱。 | parentId |
事件
該事件擴(kuò)展自數(shù)據(jù)網(wǎng)格（datagrid），下面是為可編輯的數(shù)據(jù)網(wǎng)格（edatagrid）添加的事件。
| 名稱 | 參數(shù) | 描述 |
|---|---|---|
| onAdd | index,row | 當(dāng)添加一個(gè)新行時(shí)觸發(fā)。 |
| onEdit | index,row | 當(dāng)編輯一行時(shí)觸發(fā)。 |
| onBeforeSave | index | 一行被保存之前觸發(fā)，返回 false 則取消保存動(dòng)作。 |
| onSave | index,row | 當(dāng)保存一行時(shí)觸發(fā)。 |
| onDestroy | index,row | 當(dāng)銷毀一行時(shí)觸發(fā)。 |
| onError | index,row |
當(dāng)發(fā)生服務(wù)器錯(cuò)誤時(shí)觸發(fā)。 服務(wù)器應(yīng)返回一個(gè) 'isError' 屬性設(shè)置為 true 的行，表示發(fā)生錯(cuò)誤。 代碼實(shí)例： //server side code echo json_encode(array( ????'isError' => true, ????'msg' => 'error message.' ));
//client side code
$('#dg').edatagrid({
????onError: function(index,row){
????????alert(row.msg);
????}
});
|
方法
該方法擴(kuò)展自數(shù)據(jù)網(wǎng)格（datagrid），下面是為可編輯的數(shù)據(jù)網(wǎng)格（edatagrid）添加或重寫的方法。
| 名稱 | 參數(shù) | 描述 |
|---|---|---|
| options | none | 返回選項(xiàng)（options）對(duì)象。 |
| enableEditing | none | 啟用數(shù)據(jù)網(wǎng)格（datagrid）編輯。 |
| disableEditing | none | 禁用數(shù)據(jù)網(wǎng)格（datagrid）編輯。 |
| editRow | index | 編輯指定的行。 |
| addRow | index |
向指定的行索引添加一個(gè)新行。 如果 index 參數(shù)未指定，則向最后的位置追加一個(gè)新行。 代碼實(shí)例：
// append an empty row
$('#dg').edatagrid('addRow');
// append an empty row as first row
$('#dg').edatagrid('addRow',0);
// insert a row with default values
$('#dg').edatagrid('addRow',{
????index: 2,
????row:{
????????name:'name1',
????????addr:'addr1'
????}
});
|
| saveRow | none | 保存編輯行，發(fā)布到服務(wù)器。 |
| cancelRow | none | 取消編輯行。 |
| destroyRow | index |
銷毀當(dāng)前選中的行。 如果 index 參數(shù)未指定，則銷毀所有選中的行。 代碼實(shí)例：
// destroy all the selected rows
$('#dg').edatagrid('destroyRow');
// destroy the first row
$('#dg').edatagrid('destroyRow', 0);
// destroy the specified rows
$('#dg').edatagrid('destroyRow', [3,4,5]);
|
下載 jQuery EasyUI 實(shí)例
jQuery EasyUI 擴(kuò)展其他擴(kuò)展