EasyUI之dataGrid的行內編輯

　　這個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;
                    }
                }
        });      
    });