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

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

屬性

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

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?'
	}
}

事件

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

//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）添加或重寫的方法。

// 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'
	}
});

// 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-edatagrid.zip

jQuery EasyUI 擴(kuò)展