這個js代碼是別人寫的，可能不是最好的，但我個人覺得首先能幫助別人解決功能問題的話就特別好。我稍加修改后用在了自己的項目上了，這里貼出來分享一下。后臺用的TinkPHP因為都是查增刪改比較簡單，這里就不貼了。前臺效果圖因為比較懶，也不貼了。
$(function () { var datagrid; //定義全局變量datagrid var editRow = undefined; //定義全局變量：當前編輯的行 datagrid = TskupluAddPacket.datagrid({ url: ThinkPHP['MODULE'] + '/Tskuplu/getPacketList', //請求的數(shù)據(jù)源 iconCls: 'icon-save', //圖標 pagination: true, //顯示分頁 pageSize: 15, //頁大小 pageList: [15, 30, 45, 60], //頁大小下拉選項此項各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: '包裝細數(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); //給當前編輯的行賦值 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ù)庫進行交互所以此處只是彈出要傳入后臺的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"); //如果只選擇了一行則可以進行修改，否則不操作 if (rows.length == 1) { //當無編輯行時 if (editRow == undefined) { //獲取到當前選擇行的下標 var index = datagrid.datagrid("getRowIndex", rows[0]); //開啟編輯 datagrid.datagrid("beginEdit", index); //把當前開啟編輯的行賦值給全局變量editRow editRow = index; //當開啟了當前選擇行的編輯狀態(tài)之后， //應(yīng)該取消當前列表的所有選擇行，要不然雙擊之后無法再選擇其他行進行編輯 datagrid.datagrid("unselectAll"); } } } }, '-', { text: '保存', iconCls: 'icon-save', handler: function () { //保存時結(jié)束當前編輯的行，自動觸發(fā)onAfterEdit事件如果要與后臺交互可將數(shù)據(jù)通過Ajax提交后臺 datagrid.datagrid("endEdit", editRow); editRow = undefined; } }, '-', { text: '取消編輯', iconCls: 'icon-redo', handler: function () { //取消當前編輯行把當前編輯行罷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; } } }); });