easyui中在表格中进行编辑文本并提交后台

场景设置：在一个edatagrid中进行表格参数的编辑，鼠标双击是进行表 个编辑，点击添加按钮时，在提交，取消时，取消上一步操作，图：
前台页面代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div id="rolelist-btn"></div>
<div id="roletb-btn">
    <a id="role-add" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加</a>
    <a id="role-save" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a>
    <a id="role-clear" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">取消编辑</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" id="roledele-btn">删除</a>
    <a id="role-give" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-lock'">分配权限</a>
    <a id="role-add2" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'">窗口添加</a>
    <a id="role-update2" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">窗口修改</a>
</div>
<div id="rolegive"></div>
<script>

    //修改
    $("#role-update2").click(function () {
        var arrs=$("#rolelist-btn").datagrid("getSelections");
        if(arrs.length!=1){
            alert("请选择一条要修改的数据")
        }
        $("body").append("<div id='roleupdate-dialog'></div>")
        $("#roleupdate-dialog").dialog({
            title:'修改窗口',
            width:500,
            height:400,
            href:'${pageContext.request.contextPath}/role/toupdate?id='+arrs[0].id,
            modal:true,
            buttons:[{//底部按钮
                text:'保存',
                iconCls:'icon-sava',
                handler:function(){
                    $("#roleadd").submit();
                }
            },{
                text:'关闭',
                iconCls:'icon-cancel',
                handler:function(){
                    alert("关闭操作窗口");
                    $("#roleadd-dialog").dialog("destroy");
                }
            }]
        })
    })

    //窗口添加
    $("#role-add2").click(function(){
        $("body").append("<div id='roleadd-dialog'></div>");
        $("#roleadd-dialog").dialog({
            title:'添加窗口',
            width:500,
            height:400,
            href:'${pageContext.request.contextPath}/role/toadd2',
            modal:true,
            buttons:[{//底部按钮
                text:'保存',
                iconCls:'icon-sava',
                handler:function(){
                    $("[name=resIds]").val();
                    $("#roleadd").submit();
                }
            },{
                text:'关闭',
                iconCls:'icon-cancel',
                handler:function(){
                    alert("关闭操作窗口");
                    $("#roleadd-dialog").dialog("destroy");
                }
            }]
        })
    })


    $("#role-give").click(function(){
       var arr=$("#rolelist-btn").edatagrid("getSelections");
       if(arr.length!=1){
           alert("请选择一条数据");return
       }
      $("#rolegive").dialog({
          title:'权限分配',
          width:500,
          height:450,
          modal:true,
          href:'${pageContext.request.contextPath}/role/findRoleId?id='+arr[0].id,
      })
    });

    // 添加
    $("#role-add").click(function () {
        $("#rolelist-btn").edatagrid("addRow");
    });
    // 保存
    $("#role-save").click(function () {
        $("#rolelist-btn").edatagrid("saveRow");
    });
    //取消编辑
    $("#role-clear").click(function () {
        $("#rolelist-btn").edatagrid("cancelRow");
    });
    //删除
    $("#roledele-btn").click(function () {
        $("#rolelist-btn").edatagrid("destroyRow");
    });
    $("#rolelist-btn").edatagrid({
        url:'${pageContext.request.contextPath}/role/list',
        fit:true,
        fitColumns:true,
        singleSelect:false,
        pagination:true,
        idField:"id",
        saveUrl:'${pageContext.request.contextPath}/role/add',//保存地址
        updateUrl:'${pageContext.request.contextPath}/role/add',//修改地址
        destroyUrl:"${pageContext.request.contextPath}/role/dele",//删除地址
        rownumbers:true,
        pageSize:3,
        pageList:[3,6,9],
        toolbar:'#roletb-btn',
        destroyMsg:{
            norecord:{    // 在没有记录选择的时候执行
                title:'提示信息',
                msg:'请选择要删除的行'
            },
            confirm:{       // 在选择一行的时候执行
                title:'提示信息',
                msg:'确认删除吗？此操作不可恢复！！'
            }
        },
        columns:[[
            {title:'角色编号',field:'id',width:70,checkbox:true},
            {title:'角色名称',field:'roleName',width:70,
                editor:{
                type:'text',
                    options:{
                    required:true
                    }
                }
            },
            {title:'角色描述',field:'roleDesc',width:70,
                editor:{
                    type:'text',
                    options:{
                        required:true
                    }
                }
            },
            {title:'添加时间',field:'createDate',width:70,

            },
            {title:'角色状态',field:'roleState',width:70,
                formatter:function(value,row,index){
                if(value==1){
                    return '激活';
                }else{
                    return '停用';
                }
                },
                editor:{
                    type:'combobox',
                    options:{
                        valueField:'label',
                        textField:'value',
                        data:[{
                            label:'1',
                            value:'激活'
                        },{
                            label:'2',
                            value:'停用'
                        }]
                    }
                }

            },

        ]],
        onSuccess:function(data){
            if(typeof data == "string") {
                data = JSON.parse(data);
            }
           if(data.status ==200){
                $.messager.alert("消息提醒","操作成功");
                $("#rolelist-btn").edatagrid("reload");
          }else{
                $.messager.alert("消息提醒","操作失败");

           }
        }
    })
</script>