這個js代碼是別人寫的，可能不是最好的，但我個人覺得首先能幫助別人解決功能問題的話就特別好。我稍加修改后用在了自己的項目上了，這里貼出來分享一下。后臺用的TinkPHP因為都是查增刪改比較簡單，這里就不貼了。前臺效果圖因為比較懶，也不貼了。
$(function () {
var datagrid; //定義全局變量datagrid
var editRow = undefined; //定義全局變量：當前編輯的行
datagrid = TskupluAddPacket.datagrid({
url: ThinkPHP['MODULE'] + '/Tskuplu/getPacketList', //請求的數據源
iconCls: 'icon-save', //圖標
pagination: true, //顯示分頁
pageSize: 15, //頁大小
pageList: [15, 30, 45, 60], //頁大小下拉選項此項各value是pageSize的倍數
fit: true, //datagrid自適應寬度
fitColumn: false, //列自適應寬度
striped: true, //行背景交換
nowap: true, //列內容多時自動折至第二行
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: '包裝細數', width: 100,
editor: { type: 'validatebox', options: { required: true} }
},
{ field: 'packspec', title: '包裝規格', width: 100,
editor: { type: 'validatebox', options: { required: true} }
}
]],
queryParams: {
pluid: $('#addpluid').val()
}, //查詢參數
toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () {//添加列表的操作按鈕添加，修改，刪除等
//添加時如果沒有正在編輯的行，則在datagrid的第一行插入一行
if (editRow == undefined) {
datagrid.datagrid("insertRow", {
index: 0, // index start with 0
row: {}
});
//將新插入的那一行開戶編輯狀態
datagrid.datagrid("beginEdit", 0);
//給當前編輯的行賦值
editRow = 0;
}
}
}, '-',
{ text: '刪除', iconCls: 'icon-remove',
handler: function () {
//刪除時先獲取選擇行
var rows = datagrid.datagrid("getSelections");
//選擇要刪除的行
if (rows.length > 0) {
$.messager.confirm("提示", "你確定要刪除嗎?", function (r) {
if (r) {
var ids = [];
for (var i = 0; i < rows.length; i++) {
ids.push(rows[i].packetid);
}
//將選擇到的行存入數組并用,分隔轉換成字符串，
//本例只是前臺操作沒有與數據庫進行交互所以此處只是彈出要傳入后臺的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 + '條數據被成功刪除！'
})
} else if( data == -999 ) {
$.messager.alert('刪除失敗', '對不起，您沒有權限！', 'warning');
} else {
$.messager.alert('刪除失敗', '沒有刪除任何數據！', 'warning');
}
}
});
}
});
} else {
$.messager.alert("提示", "請選擇要刪除的行", "error");
}
}
}, '-',
{ text: '修改', iconCls: 'icon-edit',
handler: function () {
//修改時要獲取選擇到的行
var rows = datagrid.datagrid("getSelections");
//如果只選擇了一行則可以進行修改，否則不操作
if (rows.length == 1) {
//當無編輯行時
if (editRow == undefined) {
//獲取到當前選擇行的下標
var index = datagrid.datagrid("getRowIndex", rows[0]);
//開啟編輯
datagrid.datagrid("beginEdit", index);
//把當前開啟編輯的行賦值給全局變量editRow
editRow = index;
//當開啟了當前選擇行的編輯狀態之后，
//應該取消當前列表的所有選擇行，要不然雙擊之后無法再選擇其他行進行編輯
datagrid.datagrid("unselectAll");
}
}
}
}, '-',
{ text: '保存', iconCls: 'icon-save',
handler: function () {
//保存時結束當前編輯的行，自動觸發onAfterEdit事件如果要與后臺交互可將數據通過Ajax提交后臺
datagrid.datagrid("endEdit", editRow);
editRow = undefined;
}
}, '-',
{ text: '取消編輯', iconCls: 'icon-redo',
handler: function () {
//取消當前編輯行把當前編輯行罷undefined回滾改變的數據,取消選擇的行
editRow = undefined;
datagrid.datagrid("rejectChanges");
datagrid.datagrid("unselectAll");
}
}, '-'],
onAfterEdit: function (rowIndex, rowData, changes) {
//endEdit該方法觸發此事件
//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('添加失敗', '抱歉！您沒有權限！', 'warning');
} else {
datagrid.datagrid("beginEdit",editRow);
$.messager.alert('警告操作', '未知錯誤！請重新刷新后提交！', 'warning');
}
datagrid.datagrid("unselectAll");
}
});
//////////////////
},
onDblClickRow: function (rowIndex, rowData) {
//雙擊開啟編輯行
if (editRow == undefined) {
datagrid.datagrid("beginEdit", rowIndex);
editRow = rowIndex;
}
}
});
});
以上所述是小編給大家介紹的EasyUI中的dataGrid的行內編輯，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
