jQuery EasyUI 擴展 – 可編輯的數(shù)據(jù)網(wǎng)格

2018-09-28 17:01 更新

jQuery EasyUI 擴展 - 可編輯的數(shù)據(jù)網(wǎng)格(Editable DataGrid)


jQuery EasyUI 擴展 jQuery EasyUI 擴展

用法

在 html 標簽中創(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)格行開始編輯操作。您也可以設置 saveUrl、updateUrl、destroyUrl 屬性來自動同步客戶端與服務器端的數(shù)據(jù)。

屬性

該屬性擴展自數(shù)據(jù)網(wǎng)格(datagrid),下面是為可編輯的數(shù)據(jù)網(wǎng)格(edatagrid)添加的屬性。

名稱 類型 描述 默認值
destroyMsg object 當銷毀一行時要顯示的確認對話框消息。
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 設置為 true,則當點擊數(shù)據(jù)網(wǎng)格外部時自動保存編輯行。 false
url string 一個 URL,從服務器檢索數(shù)據(jù)。 null
saveUrl string 一個 URL,向服務器保存數(shù)據(jù),并返回添加的行。 null
updateUrl string 一個 URL,向服務器更新數(shù)據(jù),并返回更新的行。 null
destroyUrl string 一個 URL,向服務器傳送 'id' 參數(shù)來銷毀該行。 null
tree selector 顯示對應的樹組件的樹選擇器。 null
treeUrl string 一個 URL,檢索樹的數(shù)據(jù)。 null
treeDndUrl string 一個 URL,處理拖放操作。 null
treeTextField string 定義樹的文本字段名稱。 name
treeParentField string 定義樹的父節(jié)點字段名稱。 parentId

事件

該事件擴展自數(shù)據(jù)網(wǎng)格(datagrid),下面是為可編輯的數(shù)據(jù)網(wǎng)格(edatagrid)添加的事件。

名稱 參數(shù) 描述
onAdd index,row 當添加一個新行時觸發(fā)。
onEdit index,row 當編輯一行時觸發(fā)。
onBeforeSave index 一行被保存之前觸發(fā),返回 false 則取消保存動作。
onSave index,row 當保存一行時觸發(fā)。
onDestroy index,row 當銷毀一行時觸發(fā)。
onError index,row 當發(fā)生服務器錯誤時觸發(fā)。
服務器應返回一個 'isError' 屬性設置為 true 的行,表示發(fā)生錯誤。

代碼實例:

//server side code
echo json_encode(array(
	'isError' => true,
	'msg' => 'error message.'
));
//client side code
$('#dg').edatagrid({
	onError: function(index,row){
		alert(row.msg);
	}
});

方法

該方法擴展自數(shù)據(jù)網(wǎng)格(datagrid),下面是為可編輯的數(shù)據(jù)網(wǎng)格(edatagrid)添加或重寫的方法。

名稱 參數(shù) 描述
options none 返回選項(options)對象。
enableEditing none 啟用數(shù)據(jù)網(wǎng)格(datagrid)編輯。
disableEditing none 禁用數(shù)據(jù)網(wǎng)格(datagrid)編輯。
editRow index 編輯指定的行。
addRow index 向指定的行索引添加一個新行。
如果 index 參數(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ā)布到服務器。
cancelRow none 取消編輯行。
destroyRow index 銷毀當前選中的行。
如果 index 參數(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 實例

jquery-easyui-edatagrid.zip


jQuery EasyUI 擴展 jQuery EasyUI 擴展


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號