這個js代碼是別人寫的，可能不是最好的，但我個人覺得首先能幫助別人解決功能問題的話就特別好。我稍加修改后用在了自己的項(xiàng)目上了，這里貼出來分享一下。后臺用的TinkPHP因?yàn)槎际遣樵鰟h改比較簡單，這里就不貼了。前臺效果圖因?yàn)楸容^懶，也不貼了。
公司主營業(yè)務(wù)：成都網(wǎng)站制作、做網(wǎng)站、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)公司推出貴池免費(fèi)做網(wǎng)站回饋大家。
重慶分公司
重慶分公司
$(function () {
var datagrid; //定義全局變量datagrid
var editRow = undefined; //定義全局變量：當(dāng)前編輯的行
datagrid = TskupluAddPacket.datagrid({
url: ThinkPHP['MODULE'] + '/Tskuplu/getPacketList', //請求的數(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)容多時自動折至第二行
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 () {//添加列表的操作按鈕添加，修改，刪除等
//添加時如果沒有正在編輯的行，則在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 () {
//刪除時先獲取選擇行
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);
}
//將選擇到的行存入數(shù)組并用,分隔轉(zhuǎn)換成字符串，
//本例只是前臺操作沒有與數(shù)據(jù)庫進(jìn)行交互所以此處只是彈出要傳入后臺的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('刪除失敗', '對不起，您沒有權(quán)限！', 'warning');
} else {
$.messager.alert('刪除失敗', '沒有刪除任何數(shù)據(jù)！', 'warning');
}
}
});
}
});
} else {
$.messager.alert("提示", "請選擇要刪除的行", "error");
}
}
}, '-',
{ text: '修改', iconCls: 'icon-edit',
handler: function () {
//修改時要獲取選擇到的行
var rows = datagrid.datagrid("getSelections");
//如果只選擇了一行則可以進(jìn)行修改，否則不操作
if (rows.length == 1) {
//當(dāng)無編輯行時
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 () {
//保存時結(jié)束當(dāng)前編輯的行，自動觸發(fā)onAfterEdit事件如果要與后臺交互可將數(shù)據(jù)通過Ajax提交后臺
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('警告操作', '未知錯誤！請重新刷新后提交！', 'warning');
}
datagrid.datagrid("unselectAll");
}
});
//////////////////
},
onDblClickRow: function (rowIndex, rowData) {
//雙擊開啟編輯行
if (editRow == undefined) {
datagrid.datagrid("beginEdit", rowIndex);
editRow = rowIndex;
}
}
});
});以上所述是小編給大家介紹的EasyUI中的dataGrid的行內(nèi)編輯，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！
