继上一篇翻页选中之后,功能可以实现,但是在对后台数据的交互的时候,增加后台id作为批量操作的唯一id时候遇到了一些问题,包括页面显示已选n条记录这两个问题,针对这两个问题重新进行了优化,这一优化导致重新修改了所有代码,可见在写代码初期就一定要想好未来需要做的事情,不然就像我一样因为项目紧张赶进度,导致设计缓存对象时候不严谨,直接贴上代码,代码逻辑在注释中,每行都有
//定义对象用来保存选中页与选中id function selects(page,id){ this.page=page; this.id=id; }; //定义map结构用来缓存key为roleId对象以及value为selects的map var selectsMap = new Map();
关注标红代码即可
setJQGrid: function(){ $("#jqGrid").jqGrid({ url: '/xxx/role/queryPage', datatype: "json", colModel: [ { label: '角色序号', name: 'roleId', sortable: true}, { label: '角色名', name: 'name', sortable: true}, { label: '创建人', name: 'createBy', sortable: true}, { label: '创建时间', name: 'createDate', sortable: true}, { label: '最近更新人', name: 'updateBy', sortable: true}, { label: '最近更新时间', name: 'updateDate', sortable: true}, { label: '备注', name: 'remark', sortable: true}, { label: '操作', name: 'operate', sortable:false , formatter: function (cellvalue, options, rowObject) { return "<a onclick='edit("+ options.rowId + ")' style='cursor: pointer;'>编辑</a> <a onclick='deleteRoleRow("+ options.rowId + ")' style='cursor: pointer;'>删除</a>"; } } ], shrinkToFit:true, autoScroll: true, viewrecords: true, height: 365, rowNum: 3, rowList : [3,30,50], rownumbers: true, pgbuttons:true, pginput:true, //autowidth:true, width: 1314, //rownumWidth:2000, multiselect: true,//复选框 pager: "#jqGridPager", jsonReader : { root: "roles", page: "page.currPage", total: "page.totalPage", records: "page.totalCount" }, prmNames : { page:"currPage", rows:"limit", order: "order", }, //当表格所有数据都加载完成而且其他的处理也都完成时触发此事件,排序,翻页同样也会触发此事件 gridComplete:function(){ //冻结列 jQuery("#jqGrid").jqGrid('setFrozenColumns'); //对jqgrid的序号进行列名的设置 jQuery("#jqGrid").jqGrid('setLabel',0, '标记', 'labelstyle'); //获取所有行rowid var ids = jQuery("#jqGrid").jqGrid('getDataIDs'); if(ids){ //遍历所有id for(var i=0; i<ids.length; i++){ //选中偶数行 if (ids[i]%2 == 0) { //对偶数行进行class设置 $('#jqGrid '+'#'+ids[i]).find("td").addClass("table-list-bg-color"); } } }; //1 判断selectsMap是否为空 if(selectsMap.size > 0){ //2 获取翻页之后的当前页码 var currentPage = $('#jqGrid').getGridParam('page'); //3 对selectsMap进行遍历 selectsMap.forEach(function (value, key, map) { //4 判断翻页之后的当前页是痘有多选框被勾选过 if(value.page == currentPage){ //5 已经被勾选过就进行保持选中 $("#jqGrid").setSelection(value.id); } }) } }, //当选择行时触发此事件 rowid:当前行id;status:选择状态 onSelectRow:function(rowid,status){ //1、选中某一行时将当前页的页数和选中的id放入对象中 //1.1 获取当前页码 var page = $('#jqGrid').getGridParam('page'); //1.2 获取当前被勾选的所在行所有数据 var rowData = $('#jqGrid').jqGrid('getRowData',rowid); //1.3 判断是选中状态还是取消状态 if(status){ //1.4 获取当前行的对应所有页码的唯一数据 var roleId = rowData.roleId; //1.5 将页码以及行id放入到缓存对象中去 var selecttest = new selects(page,rowid); //1.6 将所有页面中唯一id作为key,将对象作为value存入缓存map中 selectsMap.set(roleId,selecttest); }else{ //如果是取消状态就从selectsMap中删除这一缓存 selectsMap.delete(rowData.roleId); }; //页面上的已选几条记录 //获取selectsMap的长度赋值给vue的selectRows判断当前已勾选多少条记录 vm.selectRows = selectsMap.size; }, //选中所有行 onSelectAll:function(){ var ids=$("#jqGrid").jqGrid("getGridParam","selarrrow"); if (ids != null) { vm.selectRows = ids.length; }; } }); }
以上代码封装在function中,因为使用vue,所以还需要将selectsMap中的roleId的数据封装成数组传到vue的data中去
前端页面的批量删除,点击删除后显示确认是否删除,绑定了样式,在js的绑定样式中将roleId数组传到vue中
1、前端页面
2、js传数据到vue
3、vue只需要加一个roleIds就可以了
4、在确认删除之后获取vue的roleIds进行批量操作