easyui實現datagrid行內編

easyui的datagrid行內編輯對於修改信息而言比較方便直觀，下面舉例說明： 

需求說明： 
在行內編輯員工狀態 
 

一、編輯jsp 

...
               <a href="#" id="save" onclick="obj.save()" class="easyui-linkbutton" iconCls="icon-save" plain="true">保存</a>
               <a href="#" id="redo" onclick="obj.redo()" class="easyui-linkbutton" iconCls="icon-redo" plain="true">取消編輯</a>
           </form>
...

二、編輯js 
說明： 
1.根據需求，除了status列，其它列均不要求被編輯，故設置readonly:'true',disabled:true，禁止其被編輯。 
2.對obj對象設置editRow的意義在於限制用戶只能對一行進行修改操作，即在this.editRow == undefined前提下進行修改。 
3.$('#dg').datagrid('beginEdit',index);是修改操作的開始，$('#dg').datagrid('endEdit',this.editRow);結束脩改。需注意的是，只有提交的信息通過驗證（如果存在的話）才能結束脩改。結束修改後會進入datagrid的onAfterEdit方法，以提交至控制器。 

影音先鋒電影 http://www.iskdy.com/ 

obj = {
            //編輯行屬性
            editRow:undefined,
            //保存
            save:function(){
                //結束當前編輯行.注：1.只有填寫的信息通過驗證後才能結束編輯.2.結束編輯後進入datagrid的onAfterEdit方法。
                $('#dg').datagrid('endEdit',this.editRow);
            },
            //取消
            redo:function(){
                this.editRow = undefined
                $('#dg').datagrid('rejectChanges')//回滾已編輯數據
            },
            //datagrid行內修改用戶狀態。index：當前行索引值。
            editStatus:function(index){
                //獲取選擇行
                var rows = $('#dg').datagrid('getSelections');
                if(currUserStatus!=0){
                    $.messager.alert('警告', '您不是管理員，無權執行此操作！', 'warning');
                }else{
                    //修改操作需選中一行
                    if(rows.length == 1 ){
                        //如果已有編輯行，則關閉當前編輯行
                        if(this.editRow != undefined) $('#dg').datagrid('endEdit',this.editRow);
                        //如果未有編輯行，則進行編輯
                        if(this.editRow == undefined){
                            //設置當前行爲編輯狀態
                            $('#dg').datagrid('beginEdit',index);
                            //將當前行索引值賦給obj的editRow
                            this.editRow = index;
                            //取消選擇當前行
                            $('#dg').datagrid('unselectRow',index);
                        }
                    }else{
                        $.messager.alert('警告', '修改必須選中僅且一行！', 'warning');
                    }
                }
            },
            ...

    }
...
$('#dg').datagrid({
        //條紋
        striped:true,
        //標題
        title:'用戶管理',
        //提交的url地址
        url:'emplAction!listEmpl.action',
        //允許收縮數據
        collapsible:'true',
        //分頁
        pagination:'true',
        //自適應
        fit:'true',
        //默認頁容量
        pageSize:'10',
        //分頁工具位置
        pagePosition:'top',
        //列自適應
        fitColumns:'true',
        //顯示編號
        rownumbers:'true',
        //排序
        sortable:'true',
        sortName:'id',
        //主鍵
        idField:'id',
        ...
        //在datagrid中進行添加或修改操作。注：當前業務沒有在datagrid中“添加操作”的需求，只有更新操作，故省去了“添加操作”的判定。
        onAfterEdit:function(rowIndex,rowData,changes){
            var updated = $('#dg').datagrid('getChanges','updated');
            var url = '';
            //如果選擇了修改，但實際未做任何改變，則直接返回false
            if(updated.length==0){
                obj.editRow = undefined;
                return false
            }
            //修改用戶
            if(updated.length>0){
                url='emplAction!editStatus.action';
            }
            //ajax提交，rowData是行數據
            $.ajax({
                timeout:1000,//超時時間設置，單位：毫秒
                type:'post',
                url:url,
                data:{
                    row:rowData,
                },
               /* beforeSend:function(){
                    console.log("提交前..")
                    console.log(rowData);
                    console.log(url);
                    $('#dg').datagrid('loading');
                },*/
                success:function(data){
                    if(data){
                        $('#dg').datagrid('loaded');
                        $('#dg').datagrid('load');
                        $('#dg').datagrid('unselectAll');
                        //當前行結束編輯
                        $('#dg').datagrid('endEdit',obj.editRow);
                        $.messager.show({
                            title:'提示',
                            msg:data,
                        })
                        obj.editRow = undefined;
                    }
                },
                complete:function(XMLHttpRequest,status){
                    if(status=='timeout'){
                        alert('修改失敗，超時..')
                    }
                },
                error:function(XMLHttpRequest,errorThrown){
                    if(errorThrown=='408'){
                        alert('修改失敗，超時..')
                    }
                }

            })
        },
        //列字段
        columns:[[
                  {
                      field:'ck',
                      checkbox:true
                  },
                  {
                      field:'eid',
                      title:'用戶編號',
                      height:30,
                      width:100,
                      align:'center',
                      sortable:'true',//排序
                      readonly:'true',
                      disabled:true//禁止編輯
                      /*editor:{
                          type:'numberbox',
                          options:{
                              required:true,
                              disabled:true//禁止編輯
                          }
                      }*/
                  },
                  {
                      field:'ename',
                      title:'用戶名',
                      width:100,
                      height:30,
                      align:'center',
                      readonly:'true',
                      disabled:true
                  },
                  {
                      field:'hiredate',
                      title:'入職時間',
                      width:100,
                      height:30,
                      align:'center',
                      readonly:'true',
                      disabled:true
                  },
                  {
                      field:'jname',
                      title:'職位描述',
                      width:100,
                      height:30,
                      align:'center',
                      readonly:'true',
                      disabled:true
                  },
                  {
                      field:'dname',
                      width:100,
                      height:30,
                      title:'所屬部門',
                      align:'center',
                      readonly:'true',
                      disabled:true
                  },
                  {
                      field:'status',
                      width:100,
                      height:30,
                      title:'狀態',
                      align:'center',
                      editor:{//編輯選項
                          type:'combobox',
                          options:{
                              url:"emplAction!getJobStatusList.action",//請求地址
                              required:true,
                              panelHeight: 'auto',
                              valueField:'jsid',//下拉框的值
                              textField:'status'//下拉框顯示的文本
                          }
                      }

                  },
                  {
                      field:'process',
                      title:'操作',
                      width:150,
                      height:30,
                      align:'center',
                      //格式化列值（設置列值在頁面的顯示樣式）
                      formatter:function(value,row,index){
                          return "<a href='javascript:obj.editStatus("+index+")'>修改狀態</a>"
                          +"  <a href='javascript:obj._delete("+row.eid+")'>刪除</a>"
                      }
                  }
                  ...
        ]],

    })

倫理片 http://www.dotdy.com/
三、編輯控制器 

//獲取職位信息
    public void getJobStatusList() throws IOException{
           resp.setCharacterEncoding("UTF-8");
           jobStatus=jobStatusService.listJobStatus();
           List<Map<String,String>> list = new ArrayList<>();
           Map<String,String> map = null;
           if(jobStatus.size()!=0){
               for (int i = 0; i < jobStatus.size(); i++) {
                   map = new HashMap<String, String>();
                   map.put("jsid", String.valueOf(jobStatus.get(i).getJsid()));
                   map.put("status", jobStatus.get(i).getStatus());
                   list.add(map);
               }
           }
           String s = JSON.toJSONString(list);
           PrintWriter out = resp.getWriter();
           out.println(s);
    }
    //修改用戶狀態
    public void editStatus()
            throws IOException {
       resp.setCharacterEncoding("UTF-8");
           //獲取提交的datagrid中的行數據
       int eid = Integer.parseInt(req.getParameter("row[eid]"));
       int status = Integer.parseInt(req.getParameter("row[status]"));
       boolean b = false;
       b = empService.editStatus(status, eid);
       PrintWriter out = resp.getWriter();
       if(b){
            out.print("修改成功！");
       }else{
            out.print("修改失敗！");
       }
    }

大功告成，效果如下：