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就是选中的表格数据，可以是选中两三个也可以是全部选中。

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

1. //控件的点击事件

2. bindToolbarBtnClick: {

3. //.btn-status_pass是控件的class

4. '.btn-status_pass': function (selectedData, el$) {

5. //selectData是选中的所有表格数据，结构形如[{"":""."":"",...},{},...]json数组格式

6. if(selectedData==null){

7. alert("请至少选择一行")

8. }else {

9. //有爱的询问一下

10. if (!confirm("确定要一键通过吗?")) {

11. return;

12. }

13. //发送ajax异步请求将数据提交给后台

14. $.ajax({

15. //请求地址

16. url: 'orgjoin/updateStatus',

17. //请求类型：post提交

18. type: 'POST',

19. //JSON.stringify()，将postdata对象转换成字符串形式

20. //data就是提交的数据

21. //调用ajax的时候，data属性必须这样写。必须!这样后台才能接收。

22. data:{allData:JSON.stringify(selectedData)},

23. //提交的数据类型

24. dataType: 'json',

25. //.done时间是ajax请求之后返回的结果处理事件

26. //result是返回结果

27. }).done(function (result) {

28. if (result.success) {

29. //若成功返回，即代码不报错，重新加载页面

30. location.reload(true);

31. //弹出消息

32. CloudAdmin.Msg.info(result.msg);

33.  

34. } else {

35. CloudAdmin.Msg.warn(result.msg);

36. }

37. });

38. }

39. }

40. }

后端：

1. //映射请求路径

2. @RequestMapping(value = "/updateStatus", method = RequestMethod.POST)

3. @ResponseBody

4. //allData：以json数组格式字符串的形式接收前台提交的数据

5. public Result updateStatus(@RequestParam String allData) {

6. Result result=null;

7.  

8. //解析json数组格式的字符串

9. net.sf.json.JSONArray jsonArray = net.sf.json.JSONArray.fromObject(allData);

10.  

11. //将解析完成转化为array数组

12. Object[] objects = jsonArray.toArray();

13.  
14.  

15. //遍历数组

16. for (Object object : objects) {

17. //解析数组里对象

18. net.sf.json.JSONObject jsonObject = net.sf.json.JSONObject.fromObject(object);

19. if(jsonObject.has("status")&&jsonObject.has("orgJoinId")) {

20. //获取value值(单列数据以key：value形式，所以通过key取值)

21. int id = Integer.parseInt(jsonObject.getString("orgJoinId"));

22. //xxxx这是自己写的方法了，自己按逻辑来。

23. result = orgJoinService.updateAllStatus(id);

24. }

25. }

26. if(result==null){

27. return Result.genFail("一键审核失败请重试！");

28. }else{

29. return result;

30. }

31.  

32. }

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

参考地址https://blog.csdn.net/harry5508/article/details/82256299