ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2019-09-13 09:01:10  阅读:300  来源: 互联网

标签:控件 Springboot 表格 json Thymeleaf 选中 result net 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

标签:控件,Springboot,表格,json,Thymeleaf,选中,result,net,toolbar
来源: https://blog.csdn.net/weixin_44018338/article/details/100042645

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有