有時候我們的后臺系統(tǒng)表單比較復(fù)雜，做過進(jìn)銷存或者一些銷售訂單的都應(yīng)該有過感覺。
創(chuàng)新互聯(lián)建站專業(yè)提供成都主機托管四川主機托管成都服務(wù)器托管四川服務(wù)器托管，支持按月付款！我們的承諾：貴族品質(zhì)、平民價格，機房位于中國電信/網(wǎng)通/移動機房，服務(wù)器托管服務(wù)有保障！
雖然Easyui Datagrid提供了行內(nèi)編輯，但是不夠靈活，但是我們稍微修改一下來達(dá)到批量編輯,批量刪除,批量添加的效果。
現(xiàn)在我們來看看原的編輯:來自Easyui 1.5.1的Demo
接下來，我們主要是要高度自由的編輯實現(xiàn)：
1.可以同時追加多行
2.追加的行可以是任何位置
3.可以隨時進(jìn)行編輯任意位置的行
4.保存再統(tǒng)一驗證
實現(xiàn)
在原有的rowediting.html進(jìn)行修改！
第一：修改行的點擊事件（點擊行的時候進(jìn)入編輯狀態(tài)）
重慶分公司
重慶分公司
function onClickCell(index, field){
if (editIndex != index) {
if (endEditing()) {
$('#dg').datagrid('selectRow', index)
.datagrid('beginEdit', index);
var ed = $('#dg').datagrid('getEditor', { index: index, field: field });
if (ed) {
($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
}
editIndex = index;
} else {
setTimeout(function () {
$('#dg').datagrid('selectRow', editIndex);
}, 0);
}
}
}
第二：刪除事件（點擊頂部菜單Remove刪除選中的行，點擊列表的-號，刪除減號行）
function removeit(){
if (editIndex == undefined){return}
$('#dg').datagrid('selectRow', editIndex);
$('#dg').datagrid('cancelEdit', editIndex)
.datagrid('deleteRow', editIndex);
editIndex = undefined;
}
第三：添加事件，點擊菜單的Append和+號
function append(){
var index = $('#dg').datagrid('getRowIndex', $('#dg').datagrid('getSelected'));
if (index == -1)
index = 0;
$("#dg").datagrid("insertRow", {
index: index+1,
row: {oper: "+ -",status:'P'}
});
}
第四：保存（獲得操作的記錄，包括，增加，修改，刪除中的記錄）
function accept(){
if (endEditing()){
var $dg = $('#dg');
var rows = $dg.datagrid('getChanges');
if (rows.length) {
var inserted = $dg.datagrid('getChanges', "inserted");
var deleted = $dg.datagrid('getChanges', "deleted");
var updated = $dg.datagrid('getChanges', "updated");
var effectRow = new Object();
if (inserted.length) {
effectRow["inserted"] = JSON.stringify(inserted);
}
if (deleted.length) {
effectRow["deleted"] = JSON.stringify(deleted);
}
if (updated.length) {
effectRow["updated"] = JSON.stringify(updated);
}
//alert(inserted);
//alert(deleted);
//alert(updated);
}
}
//$.post("/Home/Commit", effectRow, function (rsp) {
// if (rsp) {
// $dg.datagrid('acceptChanges');
// bindData();
// }
//}, "JSON").error(function () {
// $.messager.alert("提示", "提交錯誤了！");
//});
}最后我們可以獲得，上面操作的，所有：添加的行，刪除的行，更新的行！把數(shù)據(jù)傳入到數(shù)據(jù)后臺進(jìn)行處理！
最后你還需要對數(shù)據(jù)進(jìn)行循環(huán)校驗,可以獲得數(shù)據(jù)，在控制臺輸出：
console.log(inserted); console.log(deleted); console.log(updated);
總結(jié)：
最后完整代碼：（替換Easyui的rowediting.html可運行效果）
Row Editing in DataGrid - jQuery EasyUI Demo Row Editing in DataGrid
Click the row to start editing.
| 操作 | Item ID | Product | List Price | Unit Cost | Attribute | Status |
|---|
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
