zoukankan      html  css  js  c++  java
  • BootstrapTable,选中某几行,获取其数据并进行后台处理。以及其他的属性使用。

    参考链接:bootstrap Table API 中文版

    Bootstrap Table 选中某几行,获取其数据

    Ajax传递数组,struts2接收数组

    1、首先将复选框搞出来,<table data-single-select="true"> 属性,限制了只能单选。去除以后添加<th data-checkbox="true"></th>就可以添加复选框的功能了。
    所以将复选框搞出来以后,就开始将获取到选择的数据值了。

     1 <table id="table" class="base_viewTable" data-toggle="table"
     2     data-locale="zh-CN" data-ajax="tableRequest"
     3     data-side-pagination="server" data-striped="true"
     4     data-single-select="true" data-click-to-select="true"
     5     data-pagination="true" data-pagination-first-text="首页"
     6     data-pagination-pre-text="上一页" data-pagination-next-text="下一页"
     7     data-pagination-last-text="末页">
     8     <thead style="text-align: center;">
     9         <tr>
    10             <th data-checkbox="true"></th><!--复选框-->
    11             <th data-field="id" data-formatter="indexFormatter" data-width="40" data-halign="center" data-align="center">序号</th>
    12             <th data-field="alias" data-halign="center" data-align="center">别名</th>
    13             <th data-field="name" data-halign="center" data-align="center">名称</th>
    14             <th data-field="paramter" data-halign="center" data-align="center"  data-width="100">参数</th>
    15             <th data-field="status" data-formatter="statusFormatter" data-halign="center" data-align="center" data-halign="center"  data-width="80">状态</th>
    16             <th data-field="updateTime" data-formatter="timeFormatter" data-halign="center" data-align="center"  data-width="130">时间</th>
    17             <th data-formatter="optFormatter" data-halign="center" data-align="center" data-width="110">操作</th>
    18         </tr>
    19     </thead>
    20 </table>

    效果图:

    其他属性简单使用介绍:

    更多其他属性,用的时候直接查看参考https://blog.csdn.net/liushuiziyouliu/article/details/80988458。此网友写的以及很详细了,这里不重复转载了。

    <table data-single-select="true"> 属性,限制了只能单选。去除以后添加<th data-checkbox="true"></th>就可以添加复选框的功能了。
    <table data-click-to-select="true">属性,单机每一行,可以选中行首的单选框或者复选框哦。
    <th data-checkbox="true"></th>属性,复选框。可以进行批量操作哦。默认false不显示checkbox(复选框),设为true则显示,checkbox的每列宽度已固定。
    <th data-radio="true"></th>属性,单选框,可以进行单条数据操作。默认false不显示radio(单选按钮),设为true则显示,radio宽度是固定的。
    <th data-field="id"></th>属性,是每列的字段名,不是表头所显示的名字,通过这个字段名可以给其赋值,相当于key,表内唯一。
    <th data-halign="center"></th>属性,table header(表头)的对齐方式,有:left(靠左)、right(靠右)、center(居中)。
    <th data-align="center"></th>属性。每格内数据的对齐方式,有:left(靠左)、right(靠右)、center(居中)。
    <th data-width="100"></th>属性。每列的宽度。详细参考https://blog.csdn.net/liushuiziyouliu/article/details/80988458。
    其他属性,用的时候直接查看参考https://blog.csdn.net/liushuiziyouliu/article/details/80988458。此网友写的以及很详细了,这里不重复转载了。

    2、使用js处理获取到的复选框数据,然后使用ajax将数据传递给struts的action。

     1 function selectTen(){
     2     //获取到本页选择的十条数据,使用getSelections即可获得,row是json格式的数据
     3     var getSelectRows = $("#jobTable").bootstrapTable('getSelections', function (row) {
     4           return row;
     5     });
     6     //console.log(getSelectRows);//控制台打印输出,方便观察值
     7     var ids = new Array();//定义js数组用于存放自己所需的值
     8     for(var i=0;i<getSelectRows.length;i++){
     9         ids[i] = getSelectRows[i].id;
    10     }
    11     //将表单元素数组或者对象序列化,是.serialize()的核心方法
    12     var params = $.param({'ids' : ids},true);
    13     //console.log(ids);//控制台打印输出,方便观察值
    14     BootstrapDialog.show({
    15         title : '批量操作确认提示',
    16         message : '确定批量操作记录吗?',
    17         buttons : [
    18                 {
    19                     cssClass : "btn-info",
    20                     label : '批量操作',
    21                     action : function(dialog) {
    22                         $.ajax({
    23                             type : 'post',
    24                             url : "xxxAction!xxxAllForever.action",
    25                             dataType : 'json',
    26                             traditional : true,
    27                             data : params,//将表单元素数组或者对象序列化的数组值传递到后台。
    28                             async : false,
    29                             error : function(request, textStatus,
    30                                     errorThrown) {
    31                                 fxShowAjaxError(request, textStatus,
    32                                         errorThrown);
    33                             },
    34                             success : function(data) {
    35                                 dialog.close();
    36                                 $.alert(data.result);
    37                                 searchJob();
    38                             }
    39                         });
    40                     }
    41                 }, {
    42                     cssClass : "base_btn-bluecyan",
    43                     label : '关闭',
    44                     action : function(dialog) {
    45                         dialog.close();
    46                     }
    47                 } ]
    48     });
    49 }

     3、由于公司框架还是使用的struts,所以在action里面定义一个private ArrayList<Integer> ids;变量。
    Action中List的定义:
    通过使用param方法的处理,在action中ids的类型不管是数组还是list都能够正确的接收到这些id了。
    ps:一定不要忘了setter方法! 我习惯性加的setter和getter方法。

    private ArrayList<Integer> ids;
    public ArrayList<Integer> getIds() {
        return ids;
    }
    public void setIds(ArrayList<Integer> ids) {
        this.ids = ids;
    }
    
    public String xxxAllForever() {
        //System.out.println(ids);
        String result = null;
        if(ids.size() > 0) {
            for(int i=0;i<ids.size();i++) {
                result = xxxService.stopxxx(ids.get(i));
            }
        }
        dataMap.put("result", result);
        return SUCCESS;
    }

    待续......

  • 相关阅读:
    Linux下简单的多线程编程--线程池的实现
    Nginx配置免费SSL证书StartSSL,解决Firefox不信任问题
    php100视频教程解压密码
    PDO防注入原理分析以及使用PDO的注意事项
    php mysql PDO使用
    禁用网页右键菜单和鼠标拖动选择
    php pdo和mysqli对比选择
    PHP-mac下的配置及运行
    550 5.7.1 Client does not have permissions to send as this sender
    Entity framework code first
  • 原文地址:https://www.cnblogs.com/biehongli/p/10572884.html
Copyright © 2011-2022 走看看