拓展10-两个datagrid动态多选追加和删除—保持排序不变

1、效果图

2、添加或者修改弹出框dialog

• dialog对话框—>form表单–>一个table表格一个layout布局
• table表格内两个input标签
• layout布局布局中，west，center，east三个模块，左右均为datagrid，中间为按钮
• 两个datagrid通过js创建，按钮分别绑定点击事件
• 注意：form表单元素不包含datagrid，这很重要。

<%--添加或者修改的弹出框--%>
<div id="editDialog" class="easyui-dialog"
     data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#btns'">
    <form id="editForm" method="post">
        <input id="roleId" type="hidden" name="id"/>
        <table cellpadding="5">
            <tr>
                <td>名称:&ensp;</td>
                <td><input class="easyui-textbox" type="text" name="name" data-options="required:true"/></td>
                <td>&ensp;&ensp;&ensp;</td>
                <td>sn:&ensp;</td>
                <td><input class="easyui-textbox" type="text" name="sn" data-options="required:true"/></td>
            </tr>
        </table>
        <div class="easyui-layout" style="width:900px;height:400px;">
            <div data-options="region:'west'" style="width:45%;">
                <%--所有权限--%>
                <table id="allPermsGrid">
                    <thead>
                    <tr>
                        <th data-options="field:'',width:20,checkbox:true">多选</th>
                        <th data-options="field:'id',width:40" sortable="true">序号</th>
                        <th data-options="field:'name',width:100" sortable="true">名称</th>
                        <th data-options="field:'sn',width:100">编码</th>
                        <th data-options="field:'url',width:100">路径</th>
                    </tr>
                    </thead>
                </table>
            </div>
            <div data-options="region:'center'" style="width:5%;text-align: center">
                <div style="padding-top: 80px;">
                    <input type="butto