如何直接编辑datagrid

大家先看一下效果图吧。

当点击取消编辑时，可退出编辑。

下面开始给大家讲解，第一个如何添加：

首先，当我们点击的时候，

,toolbar:[{
                    //这里的toolbar是写在columns前后的。不是写在它里面的
                
    text:'增加',
    iconCls:'icon-add',
    handler:function () {  //当点击添加之后会执行的代码
    if(state!=undefined){//这里我在上面定义一个全局变量  var state = undefined 
         $("#datagrid").datagrid("endEdit",state);//如果不等于undefined 则结束编辑
     }else{
       
         $("#datagrid").datagrid('insertRow',{//等于undefined，说明可以添加 

/*insertRow中有两个属性，
     index:在哪个地方添加，0代表是第一行， row:要添加的数据信息
departmentName都是对应的field*/
/*
    appendRow:是在最后添加一行，一般不使用，影响客户体验，一般使用insertRow
*/

              index:0, 
              row:{
                   departmentName:"",
                   departmentIntroduce:"",
                   id:""
                 }
          })
/*现在将第一行打开可编辑模式，然后将state=0 因为你这条信息还没编辑完，不可能让点添加在添加一行吧，所以，在这里要将state！=undefined 就行 为0也行，只要不等于undefined */
          $("#datagrid").datagrid("beginEdit",0);
              state = 0;
           }
      }
},{          /*点击保存时调用这个方法，将进行结束编辑模式，*/
                    text:'保存',
                    iconCls:'icon-save',
                    handler:function () {
                        $("#datagrid").datagrid("endEdit",state);
                    }
                }

/*此时会自动调用onAfterEdit  写在toolbar外*/
    onAfterEdit:function (rowIndex, rowDate, changes) {
             $.ajax({
                        url:"http://localhost:8080/addDepartment.action",
                        type:"post",
                        contentType:"application/json;charset=utf-8",
                        data:JSON.stringify(rowDate),
                        success:function (res) {
                            var msg = "添加失败";
                            if(res=="1"){
                                msg = "添加成功"
                                state = undefined;
                                loadPanel();
                            }
                            $.messager.show({
                                title:"提示",
                                msg:msg,
                                showTime:"2200"
                            })
                        }
                    })
                },