Springboot+Thymeleaf提交复选表格数据给后台[toolbar]

泪目。。。

Thymeleaf官方文档都没查到“toolbar”这玩意。。

后台管理要做一个一键通过，一键驳回的按钮，逻辑很简单，给表格添加复选，选中全部或者多行提交给后台，然后修改数据即可。然鹅过程很曲折：

这个模板框架表格复选框是自带的，网页查看源代码能看到，但是再html页面却是隐藏的。。。因为是模板咯

找不到控制按钮，选中后就没法进行操作...

后来全局搜索在src\main\resources\static\vendor\jbase-admin-ui\src\grid\grid.js找到

"dom": '<"toolbar">frtip', //定制toolbar区域

以及\src\main\resources\static\vendor\jbase-admin-ui\src\grid\example.html（模板演示页面）找到类似控件位置：

这个控件再表格的上方，里面可以是button也可以是a标签或者label标签，具体看你怎么使用。

控制其的点击事件在：

这里selectData就是选中的表格数据，可以是选中两三个也可以是全部选中。

贴上我的代码（附注释），前端：

//控件的点击事件   
bindToolbarBtnClick: {
              //.btn-status_pass是控件的class
            '.btn-status_pass': function (selectedData, el$) {
                //selectData是选中的所有表格数据，结构形如[{"":""."":"",...},{},...]json数组格式
                if(selectedData==null){
                    alert("请至少选择一行")
                }else {
                    //有爱的询问一下
                    if (!confirm("确定要一键通过吗?")) {
                        return;
                    }
                    //发送ajax异步请求将数据提交给后台
                    $.ajax({
                        //请求地址
                        url: 'orgjoin/updateStatus',
                        //请求类型：post提交
                        type: 'POST',
                        //JSON.stringify()，将postdata对象转换成字符串形式
                        //data就是提交的数据
                        //调用ajax的时候，data属性必须这样写。必须!这样后台才能接收。
                        data:{allData:JSON.stringify(selectedData)},
                        //提交的数据类型
                        dataType: 'json',
                        //.done时间是ajax请求之后返回的结果处理事件
                        //result是返回结果
                    }).done(function (result) {
                        if (result.success) {
                            //若成功返回，即代码不报错，重新加载页面
                            location.reload(true);
                            //弹出消息
                            CloudAdmin.Msg.info(result.msg);

                        } else {
                            CloudAdmin.Msg.warn(result.msg);
                        }
                    });
                }
            }
}        

后端：

//映射请求路径
    @RequestMapping(value = "/updateStatus", method = RequestMethod.POST)
    @ResponseBody
//allData：以json数组格式字符串的形式接收前台提交的数据
    public Result updateStatus(@RequestParam String allData) {
        Result result=null;

        //解析json数组格式的字符串
        net.sf.json.JSONArray jsonArray = net.sf.json.JSONArray.fromObject(allData);
     
        //将解析完成转化为array数组
        Object[] objects = jsonArray.toArray();
       

        //遍历数组
        for (Object object : objects) {
            //解析数组里对象
            net.sf.json.JSONObject jsonObject = net.sf.json.JSONObject.fromObject(object);
            if(jsonObject.has("status")&&jsonObject.has("orgJoinId")) {
                //获取value值(单列数据以key：value形式，所以通过key取值)
                int id = Integer.parseInt(jsonObject.getString("orgJoinId"));
           //xxxx这是自己写的方法了，自己按逻辑来。
                 result = orgJoinService.updateAllStatus(id);
            }
        }
        if(result==null){
            return Result.genFail("一键审核失败请重试！");
        }else{
            return result;
        }

    }

开源万岁！感谢那些分享的同僚~~~