Java项目之使用Bootstraptable批量操作

最新推荐文章于 2023-02-18 13:26:42 发布

刘大壮·

最新推荐文章于 2023-02-18 13:26:42 发布

阅读量658

点赞数

文章标签： javascript java

本文链接：https://blog.csdn.net/weixin_44538469/article/details/116901716

版权

本文介绍了如何在Java项目中利用BootstrapTable插件创建动态表格，实现数据的批量选择与操作。通过实例展示了HTML、JavaScript和Java代码，展示了如何通过用户勾选获取数据并执行后端处理。

摘要由CSDN通过智能技术生成

          Java项目之使用Bootstraptable批量操作

开发工具与关键技术：IntelliJ IDEA java
作者：刘剑鸿
撰写时间：2021/5.15
一开始认识一下bootstrap-table插件介绍。它是一个基于bootstrap样式的表格组件，可以通过简单的配置，即可以动态生成表格，从而方便使用。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210516200554898.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDUzODQ2OQ==,size_16,color_FFFFFF,t_70#pic_center)

这是bootstraptable中的checkbox ，通过勾选所要的数据从而进行批量操作。
具体代码如下： 

```html
<table class="table table-bordered table-sm" data-click-to-select="true" data-toggle="table" id="user">
<thead>
 <tr>
<th data-checkbox="true"></th>
<th hidden data-field="id">ID</th>
<th>菜单名称</th>
<th>菜单URL</th>
<th>备注</th>
<th>菜单级别</th>
  </tr>
  </thead>
<tbody>
<c:forEach var="paid" items="${requestScope.paid}">
    <tr>
        <td data-checkbox="true">
        </td>
        <td >${paid.manu}</td>
        <td>${paid.manuURL}</td>
        <td>${paid.bill_ramark}</td>
        <td>${paid.manuclass}</td>
          </tr>
</c:forEach>
</tbody>
```

主要的思路：勾选所需数据，获取该行数据的ID，然后某个方法进行使用。

```javascript
function just_do() {
    var getSelectRows = $("#user").bootstrapTable('getSelections', function (row) {
                   return row;
    });
         //console.log(getSelectRows);//控制台打印输出，方便观察值
    var ids = "";//定义js数组用于存放自己所需的值
    for(var i=0;i<getSelectRows.length;i++){
        ids += getSelectRows[i]['id']+",";
    }
    ids = ids.substring(0,ids.length - 1);
    var ms = "你确定要执行吗？";
    if(confirm(ms) == true){
    $.ajax({
        url:"${pageContext.request.contextPath}/electric/Paid",
        type:"post",
        data:{Ids:ids },
        success:function (data) {
            //window.history.go(-1);
        }
    })
    }
}
```

"#user是表的ID，'getSelections' 这个方法名它意思是：返回被选择的行，当没有行被选择，则返回空数组（但并不是undefined，也不是null，是长度为0的空数组，所以可以判断长度是否大于0来确定是否选择了行）
这里的['id']对应的是：<th hidden data-field="id">ID</th>
接下来就是个普通的ajax请求提交了，
提交到控制器：控制器的代码如下：

```java

```java
@RequestMapping("/Paid")
@ResponseBody
public String Paid(String Ids){
    String[] ss = Ids.split(",");
    for (String s : ss){
        electricService.PaidOut(Integer.parseInt(s));
    }
    // electricService.PaidOut(Ids,Con,Pai);
    return "redirect:/electric/Toelectric";
}
```

```

split() 方法根据匹配给定的正则表达式来拆分字符串。
String[] ss就可以得到ID，通过循环，使每个ID 都才方法中执行。
之后PaidOut()里面执行就是个普通的方法，
我这里是单表新增
<insert id="PaidOut" parameterType="com.ljh.pojo.Paid">
 insert into
 collecting.paid (id)
   value (#{Ids});
</insert>