拓展10-两个datagrid动态多选追加和删除—保持排序不变
程序员文章站
2022-04-16 09:24:15
...
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>名称: </td>
<td><input class="easyui-textbox" type="text" name="name" data-options="required:true"/></td>
<td>   </td>
<td>sn: </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="button" id="btn1" value="添加" onclick="bnt1()"/><br/><br/><br/>
<input type="button" id="btn2" value="移除" onclick="bnt2()"/><br/><br/><br/>
<input type="button" id="btn3" value="添加所有" onclick="bnt3()"/><br/><br/><br/>
<input type="button" id="btn4" value="移除所有" onclick="bnt4()"/>
</div>
</div>
<div data-options="region:'east'" style="width:45%;">
<%--当前角色拥有的权限--%>
<table id="rolePermsGrid">
<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">名称</th>
<th data-options="field:'sn',width:100">编码</th>
<th data-options="field:'url',width:100">路径</th>
</tr>
</thead>
</table>
</div>
</div>
</form>
<div id="btns">
<a href="javascript:;" data-method="save" class="easyui-linkbutton c3" data-options="iconCls:'icon-ok'">确定</a>
<a href="javascript:;" data-method="close" class="easyui-linkbutton c5"
data-options="iconCls:'icon-cancel'">取消</a>
</div>
</div>
3、新建datagrid
//创建两个grid
//1.当前角色拥有的权限Grid
rolePermsGrid.datagrid({
fitColumns: true,
singleSelect: false,
checkOnSelect: true,
fit: true
})
//2.所有权限的Grid
allPermsGrid.datagrid({
url: '/permission/list',
fitColumns: true,
singleSelect: false,
checkOnSelect: true,
fit: true
})
})
4、添加方法
add() {
//打开面板前把里面的数据清除，只能清楚表单数据
editForm.form("clear");
//修改添加框的标题
editDialog.dialog({title: '添加菜单'});
//把添加框(editDialog)打开并居中
editDialog.dialog("center").dialog("open");
//清空当前角色datagrid中的数据
rolePermsGrid.datagrid("loadData", []);
//重新加载所有权限datagrid中的数据
allPermsGrid.datagrid("reload");
},
5、修改方法
edit() {
allPermsGrid.datagrid("reload");
//获取选择的行
var row = datagrid.datagrid("getSelected");
//判断是否选择了一行
//没有选择提示并结束
if (!row) {
$.messager.alert('提示', '请先选择一行进行修改', "info");
return;
} else {
//修改添加框的标题
editDialog.dialog({title: '修改菜单'});
//把添加框(editDialog)打开
editDialog.dialog("center").dialog("open");
//回显其他内容
editForm.form('load', row);
//回显权限数据,先复制一个模板
var perms = [...row.permissions];
rolePermsGrid.datagrid("loadData", perms);
}
},
6、οnclick="bnt1()"方法
var bnt1 = function () {
var rows1 = $("#allPermsGrid").datagrid('getChecked');
var rows2 = $("#rolePermsGrid").datagrid('getRows');
var rows3 = [...rows1];
var rows4 = [...rows2];
var messg = [];
for (var j = 0; j < rows3.length; j++) {
var flag1 = true;
var flag2 = false;
var rows1id = rows3[j].id;
var index = $("#allPermsGrid").datagrid('getRowIndex', rows3[j]);
$("#allPermsGrid") .datagrid('deleteRow', index);
for(var i = 0; i < rows4.length; i++){
var rows2id = rows4[i].id;
if(rows1id==rows2id){
flag1 = false ;
flag2 = true ;
messg.push(rows3[j].name);
}
}
if(flag1){
rows4.push( rows3[j]);
}
//冒泡排序，按照id排序
for(var k = 0;k<rows4.length-1;k++){
for(var m = 0;m<rows4.length-1;m++){
if(rows4[m].id>rows4[m+1].id){
var temp = rows4[m];
rows4[m] = rows4[m+1];
rows4[m+1] =temp;
}
}
}
$("#rolePermsGrid").datagrid("loadData", rows4);
if(flag2){
$.messager.show({
title:'提示',
msg:'<h3 style="color: red;">'+messg+'已经存在,请不要重复添加</h3>',
showType:'slide',
timeout:2000,
style:{
right:'',
top:document.body.scrollTop+document.documentElement.scrollTop,
bottom:''
}
});
}
}
}
7、οnclick="bnt2()"方法
var bnt2 = function () {
var rows = $("#rolePermsGrid").datagrid('getChecked');
var rows3 = $("#allPermsGrid").datagrid('getRows');
var rows2 = [...rows];
var rows4 = [...rows3];
for (var j = 0; j < rows2.length; j++) {
var flag = true;
var rowsid = rows2[j].id;
var index = $("#rolePermsGrid").datagrid('getRowIndex', rows2[j]);
$("#rolePermsGrid") .datagrid('deleteRow', index);
for(var i = 0; i < rows4.length; i++){
var rows4id = rows4[i].id;
if(rowsid==rows4id){
flag = false ;
}
}
if(flag){
rows4.push( rows2[j]);
}
}
//冒泡排序
for(var k = 0;k<rows4.length-1;k++){
for(var m = 0;m<rows4.length-1;m++){
if(rows4[m].id>rows4[m+1].id){
var temp = rows4[m];
rows4[m] = rows4[m+1];
rows4[m+1] =temp;
}
}
}
$("#allPermsGrid").datagrid("loadData", rows4);
}
8、οnclick="bnt3()"方法
//和bnt1方法一样，只需要把第一行换成下面这个
var rows1 = $("#allPermsGrid").datagrid('getRows');
9、οnclick="bnt4()"方法
//和bnt2方法一样，只需要把第一行换成下面这个
var rows = $("#rolePermsGrid").datagrid('getRows');