EasyUI中的dataGrid的行內(nèi)編輯
更新時(shí)間：2017年06月22日 11:52:32 作者：kerryk
這篇文章主要介紹了EasyUI中的dataGrid的行內(nèi)編輯的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
這個(gè)js代碼是別人寫的，可能不是最好的，但我個(gè)人覺得首先能幫助別人解決功能問題的話就特別好。我稍加修改后用在了自己的項(xiàng)目上了，這里貼出來分享一下。后臺(tái)用的TinkPHP因?yàn)槎际遣樵鰟h改比較簡(jiǎn)單，這里就不貼了。前臺(tái)效果圖因?yàn)楸容^懶，也不貼了。
$(function () {
var datagrid; //定義全局變量datagrid
var editRow = undefined; //定義全局變量：當(dāng)前編輯的行
datagrid = TskupluAddPacket.datagrid({
url: ThinkPHP['MODULE'] + '/Tskuplu/getPacketList', //請(qǐng)求的數(shù)據(jù)源
iconCls: 'icon-save', //圖標(biāo)
pagination: true, //顯示分頁
pageSize: 15, //頁大小
pageList: [15, 30, 45, 60], //頁大小下拉選項(xiàng)此項(xiàng)各value是pageSize的倍數(shù)
fit: true, //datagrid自適應(yīng)寬度
fitColumn: false, //列自適應(yīng)寬度
striped: true, //行背景交換
nowap: true, //列內(nèi)容多時(shí)自動(dòng)折至第二行
border: false,
idField: 'packetid', //主鍵
sortName : 'packetid', //排序字段
sortOrder : 'desc', //排序方式
columns: [[//顯示的列
{field: 'packetid', title: 'ID', width: 100, sortable: true, checkbox: true },
{ field: 'packunit', title: '包裝單位', width: 100, sortable: true,
editor: { type: 'validatebox', options: { required: true} }
},
{ field: 'packqty', title: '包裝細(xì)數(shù)', width: 100,
editor: { type: 'validatebox', options: { required: true} }
},
{ field: 'packspec', title: '包裝規(guī)格', width: 100,
editor: { type: 'validatebox', options: { required: true} }
}
]],
queryParams: {
pluid: $('#addpluid').val()
}, //查詢參數(shù)
toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () {//添加列表的操作按鈕添加，修改，刪除等
//添加時(shí)如果沒有正在編輯的行，則在datagrid的第一行插入一行
if (editRow == undefined) {
datagrid.datagrid("insertRow", {
index: 0, // index start with 0
row: {}
});
//將新插入的那一行開戶編輯狀態(tài)
datagrid.datagrid("beginEdit", 0);
//給當(dāng)前編輯的行賦值
editRow = 0;
}
}
}, '-',
{ text: '刪除', iconCls: 'icon-remove',
handler: function () {
//刪除時(shí)先獲取選擇行
var rows = datagrid.datagrid("getSelections");
//選擇要?jiǎng)h除的行
if (rows.length > 0) {
$.messager.confirm("提示", "你確定要?jiǎng)h除嗎?", function (r) {
if (r) {
var ids = [];
for (var i = 0; i < rows.length; i++) {
ids.push(rows[i].packetid);
}
//將選擇到的行存入數(shù)組并用,分隔轉(zhuǎn)換成字符串，
//本例只是前臺(tái)操作沒有與數(shù)據(jù)庫(kù)進(jìn)行交互所以此處只是彈出要傳入后臺(tái)的id
//alert(ids.join(','));
$.ajax({
url : ThinkPHP['MODULE'] + '/Tskuplu/deletePacket',
type : 'POST',
data : {
ids : ids.join(',')
},
beforeSend : function (){
$.messager.progress({
text : '正在處理中...'
});
},
success : function (data){
$.messager.progress('close');
if (data >0){
datagrid.datagrid('reload');
$.messager.show({
title : '操作提醒',
msg : data + '條數(shù)據(jù)被成功刪除！'
})
} else if( data == -999 ) {
$.messager.alert('刪除失敗', '對(duì)不起，您沒有權(quán)限！', 'warning');
} else {
$.messager.alert('刪除失敗', '沒有刪除任何數(shù)據(jù)！', 'warning');
}
}
});
}
});
} else {
$.messager.alert("提示", "請(qǐng)選擇要?jiǎng)h除的行", "error");
}
}
}, '-',
{ text: '修改', iconCls: 'icon-edit',
handler: function () {
//修改時(shí)要獲取選擇到的行
var rows = datagrid.datagrid("getSelections");
//如果只選擇了一行則可以進(jìn)行修改，否則不操作
if (rows.length == 1) {
//當(dāng)無編輯行時(shí)
if (editRow == undefined) {
//獲取到當(dāng)前選擇行的下標(biāo)
var index = datagrid.datagrid("getRowIndex", rows[0]);
//開啟編輯
datagrid.datagrid("beginEdit", index);
//把當(dāng)前開啟編輯的行賦值給全局變量editRow
editRow = index;
//當(dāng)開啟了當(dāng)前選擇行的編輯狀態(tài)之后，
//應(yīng)該取消當(dāng)前列表的所有選擇行，要不然雙擊之后無法再選擇其他行進(jìn)行編輯
datagrid.datagrid("unselectAll");
}
}
}
}, '-',
{ text: '保存', iconCls: 'icon-save',
handler: function () {
//保存時(shí)結(jié)束當(dāng)前編輯的行，自動(dòng)觸發(fā)onAfterEdit事件如果要與后臺(tái)交互可將數(shù)據(jù)通過Ajax提交后臺(tái)
datagrid.datagrid("endEdit", editRow);
editRow = undefined;
}
}, '-',
{ text: '取消編輯', iconCls: 'icon-redo',
handler: function () {
//取消當(dāng)前編輯行把當(dāng)前編輯行罷undefined回滾改變的數(shù)據(jù),取消選擇的行
editRow = undefined;
datagrid.datagrid("rejectChanges");
datagrid.datagrid("unselectAll");
}
}, '-'],
onAfterEdit: function (rowIndex, rowData, changes) {
//endEdit該方法觸發(fā)此事件
//var row = datagrid.datagrid("getData").rows[rowIndex]; //獲取某一行的值
var inserted = datagrid.datagrid('getChanges','inserted');
var updated = datagrid.datagrid('getChanges','updated');
if(inserted.length < 1 && updated.length <1){
editRow = undefined;
datagrid.datagrid('unselectAll');
return;
}
var url = '';
if(inserted.length>0){
url=ThinkPHP['MODULE'] + '/Tskuplu/addPacket';
}
if(updated.length>0){
url=ThinkPHP['MODULE'] + '/Tskuplu/updatePacket';
}
$.ajax({
url : url,
type : 'POST',
data : {
'pluid': $('#addpluid').val(),
'packetid':rowData.packetid,
'packunit':rowData.packunit,
'packqty' :rowData.packqty,
'packspec':rowData.packspec
},
beforeSend : function (){
$.messager.progress({
text : '正在處理中...'
})
},
success : function (data){
$.messager.progress('close');
if (data > 0){
datagrid.datagrid("acceptChanges");
$.messager.show({
title : '操作提示',
msg : '添加成功'
});
editRow = undefined;
datagrid.datagrid("reload");
$('#addcheck').val(1);
} else if (data == -999) {
$.messager.alert('添加失敗', '抱歉！您沒有權(quán)限！', 'warning');
} else {
datagrid.datagrid("beginEdit",editRow);
$.messager.alert('警告操作', '未知錯(cuò)誤！請(qǐng)重新刷新后提交！', 'warning');
}
datagrid.datagrid("unselectAll");
}
});
//////////////////
},
onDblClickRow: function (rowIndex, rowData) {
//雙擊開啟編輯行
if (editRow == undefined) {
datagrid.datagrid("beginEdit", rowIndex);
editRow = rowIndex;
}
}
});
});
以上所述是小編給大家介紹的EasyUI中的dataGrid的行內(nèi)編輯，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- jquery Easyui Datagrid實(shí)現(xiàn)批量操作（編輯，刪除，添加）
- Easyui筆記2：實(shí)現(xiàn)datagrid多行刪除的示例代碼
- Jquery EasyUI Datagrid右鍵菜單實(shí)現(xiàn)方法
- jQuery Easyui datagrid行內(nèi)實(shí)現(xiàn)【添加】、【編輯】、【上移】、【下移】
- jQuery Easyui datagrid連續(xù)發(fā)送兩次請(qǐng)求問題
- 詳解jquery easyui之datagrid使用參考
- 實(shí)現(xiàn)easyui的datagrid導(dǎo)出為excel的示例代碼
- easyui datagrid 大數(shù)據(jù)加載效率慢,優(yōu)化解決方法(推薦)
- jQuery EasyUI編輯DataGrid用combobox實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)
相關(guān)文章
這篇文章主要給大家推薦一款jQuery插件模板，這是本人最喜歡的一款了，原因很簡(jiǎn)單，使用方便，可選擇性也比較多。有需要的小伙伴參考下吧2015-01-01
在Jquery中可以通過選中a標(biāo)簽使用trigger方法定義事件即可模擬用戶點(diǎn)擊超鏈接或者按鈕，感興趣的朋友操作下2013-10-10
jQuery實(shí)現(xiàn)用方向鍵控制層的上下左右移動(dòng)
本文將會(huì)使用jquery實(shí)現(xiàn)以下功能:按下方向鍵時(shí)，使層向相應(yīng)的方向平滑移動(dòng)20像素；四個(gè)方向鍵的鍵碼分別是37（左）、38（上）、39（右）和40（下）,感興趣的朋友可以了解下2013-01-01
jQuery實(shí)現(xiàn)最簡(jiǎn)單實(shí)用的分秒倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)最簡(jiǎn)單實(shí)用的分秒倒計(jì)時(shí)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
jQuery插件EasyUI獲取當(dāng)前Tab中iframe窗體對(duì)象的方法
這篇文章主要介紹了jQuery插件EasyUI獲取當(dāng)前Tab中iframe窗體對(duì)象的方法,涉及EasyUI窗體操作的相關(guān)技巧,需要的朋友可以參考下2016-08-08
這篇文章主要介紹了jQuery操作表單常用控件方法,實(shí)例總結(jié)了jQuery針對(duì)常用表單控件的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
本篇文章主要是對(duì)使用jQuery與JSONP輕松解決跨域訪問的問題進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-02-02
這篇文章主要介紹了jquery事件冒泡，以及如何阻止jQuery事件冒泡現(xiàn)象，感興趣的朋友可以參考一下2016-01-01
Jquery組件easyUi實(shí)現(xiàn)選項(xiàng)卡切換示例
這篇文章主要為大家詳細(xì)介紹了Jquery組件easyUi實(shí)現(xiàn)選項(xiàng)卡切換示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
本篇文章主要介紹了JQuery實(shí)現(xiàn)圖片輪播效果的制作原理以及實(shí)現(xiàn)代碼，文章末尾附上源碼下載，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-05-05