关于jqgrid多选框“各种问题”

        经过我将近一天的时间终于解决了,jqgrid复选框的问题,废话不多说。(底部有代码)

本文解决的问题分为:

1.复选分页,翻页后前一页选中的行不在被选中。

2.点全选按钮,只能选中当前页,第二页第三页等都不会被选中。

3.点击行,复选框会被选中问题(如果有删除操作的话容易导致误选)

4.复选框错位。

解决:

//解决复选框错位(可以根据自己具体情况适当修改里面的值)
if($("tr .jqg-third-row-header")){
    $(".ui-jqgrid .ui-jqgrid-htable th").css("padding","0 1px 0 3px");
}

注:checkBox[ ]  贯穿全局,是核心。

还有一个没有解决的问题,希望各位大佬帮忙解决一下:

当全部选中后翻页或翻回来,标题栏的复选框都不会被选中。

全选:

第二页:选不中

返回第一页:也选不中

开始:

一、复选分页

jqGrid表格插件按照正常情况下,设置multiselect:true,,就可以实现多选。但是当数据分页显示时,翻页后,之前已经选择的就会失效。

这里通过设置一个全局变量(checkBox),缓存已经选中的数据项,来实现翻页后保持选中。再定义一个全局全局变量(cPage),重新加载的时候清空checkBox,在翻页事件中运用这个cPage变量;

关于jqgrid多选框“各种问题”_第1张图片

关于jqgrid多选框“各种问题”_第2张图片

关于jqgrid多选框“各种问题”_第3张图片

二、点击全选

全选必需要知道所有数据的id,存入checkBox[ ] 中在翻页时才会被遍历选中。翻页加载时触发 loadComplete 方法

关于jqgrid多选框“各种问题”_第4张图片

关于jqgrid多选框“各种问题”_第5张图片

关于jqgrid多选框“各种问题”_第6张图片

三、解决点击行,复选框不被选中(beforeSelectRow

关于jqgrid多选框“各种问题”_第7张图片

全部代码:

前端代码:

 
//主要是这个table
 

后端代码:

 /**
     * 资源登记list,跳转
     *
     * @return
     */
    @RequestMapping(value = "/resource/list", method = RequestMethod.GET)
    public ModelAndView List() {
        ModelAndView mav = new ModelAndView("/resource/list");
        //为了全选的操作
        List allId = resourceRepository.findAllId();
        mav.addObject("allId",allId);
        return mav;
    }

    @RequestMapping(value = "/resource/list/data", method = RequestMethod.POST)
    @ResponseBody
    @Transactional(readOnly = true)
    public Map getData(@RequestParam int page, @RequestParam int rows,
                                       @RequestParam String sord, @RequestParam String sidx,String resourceName) {
        PageRequest pageRequest = new PageRequest(page - 1, rows,
                sord.equals("asc") ? Sort.Direction.ASC : Sort.Direction.DESC,
                !StringUtils.isEmpty(sidx) ? sidx : "createdDate");
        Specification specification = Specifications.where(ResourceSpecifications.filterByName(resourceName));
        Page pageData =  resourceRepository.findAll(specification,pageRequest);
        return JqGridDataGenerator.getDataJson(pageData);
    }

 

你可能感兴趣的:(jqGrid,jqGrid复选)