建站
咨詢
售后
建站咨詢
新聞中心
有時(shí)候我們的后臺(tái)系統(tǒng)表單比較復(fù)雜，做過進(jìn)銷存或者一些銷售訂單的都應(yīng)該有過感覺。
創(chuàng)新互聯(lián)建站專業(yè)提供成都主機(jī)托管四川主機(jī)托管成都服務(wù)器托管四川服務(wù)器托管，支持按月付款！我們的承諾：貴族品質(zhì)、平民價(jià)格，機(jī)房位于中國電信/網(wǎng)通/移動(dòng)機(jī)房，服務(wù)器托管服務(wù)有保障！
雖然Easyui Datagrid提供了行內(nèi)編輯，但是不夠靈活，但是我們稍微修改一下來達(dá)到批量編輯,批量刪除,批量添加的效果。
現(xiàn)在我們來看看原的編輯:來自Easyui 1.5.1的Demo
接下來，我們主要是要高度自由的編輯實(shí)現(xiàn)：
1.可以同時(shí)追加多行
2.追加的行可以是任何位置
3.可以隨時(shí)進(jìn)行編輯任意位置的行
4.保存再統(tǒng)一驗(yàn)證
實(shí)現(xiàn)
在原有的rowediting.html進(jìn)行修改！
第一：修改行的點(diǎn)擊事件（點(diǎn)擊行的時(shí)候進(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);
}
}
}
第二：刪除事件（點(diǎn)擊頂部菜單Remove刪除選中的行，點(diǎn)擊列表的-號(hào)，刪除減號(hào)行）
function removeit(){
if (editIndex == undefined){return}
$('#dg').datagrid('selectRow', editIndex);
$('#dg').datagrid('cancelEdit', editIndex)
.datagrid('deleteRow', editIndex);
editIndex = undefined;
}
第三：添加事件，點(diǎn)擊菜單的Append和+號(hào)
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("提示", "提交錯(cuò)誤了！");
//});
}最后我們可以獲得，上面操作的，所有：添加的行，刪除的行，更新的行！把數(shù)據(jù)傳入到數(shù)據(jù)后臺(tái)進(jìn)行處理！
最后你還需要對(duì)數(shù)據(jù)進(jìn)行循環(huán)校驗(yàn),可以獲得數(shù)據(jù)，在控制臺(tái)輸出：
console.log(inserted); console.log(deleted); console.log(updated);
總結(jié)：
最后完整代碼：（替換Easyui的rowediting.html可運(yùn)行效果）
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 |
|---|
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
分享名稱：jqueryEasyuiDatagrid實(shí)現(xiàn)批量操作（編輯，刪除，添加）
文章分享：http://www.dlmjj.cn/article/possjs.html
