Bootstrap Table 删除和批量去除

壹.在列属性中投入事件

率先起始化页面

一条记下可以看作一条数据的数组

        {
          title:'数据量序号',
          field:'sjid'
          // hidden:true
        },{
          field: 'operate',
          title: '操作',
          width: '80px',
           events: operateEvents,
          formatter: operateFormatter
        }
$(function(){
  $('#archives-table').bootstrapTable({
   url: "/coinSend/list",//数据源
   dataField: "rows",//服务端返回数据键值 就是说记录放的键值是rows,分页时使用总记录数的键值为total
   search: true,//是否搜索
   cache: false,
   striped: true,
   pagination: true,//是否分页
   sortable: true,          //是否启用排序
   sortOrder: "asc",          //排序方式
   //pageNumber:1,
   pageSize: 10,//单页记录数
   pageList: [5, 10, 20, 50],//分页步进值
   sidePagination: "server",//服务端分页
   contentType: "application/json",//请求数据内容格式 默认是 application/json 自己根据格式自行服务端处理
   dataType: "json",//期待返回数据类型
   method: "post",//请求方式
   searchAlign: "left",//查询框对齐方式
   silent: true,
   queryParamsType: "limit",//查询参数组织方式
   queryParams: function getParams(params) {
     var param = {
      pageNum: params.pageNumber,
      pageSize: params.pageSize,
      realName : params.search
     };
     return param;
   },
   responseHandler: function(res) {
     return {
      "total": res.total,//总页数
      "rows": res.rows  //数据
     };
   },
   searchOnEnterKey: false,//回车搜索
   showRefresh: true,//刷新按钮
   showColumns: true,//列选择按钮
   buttonsAlign: "left",//按钮对齐方式
   toolbar: "#userToolbarsendCoin",//指定工具栏
   toolbarAlign: "right",//工具栏对齐方式
   columns: [
     /*{
      title: "全选",
      field: "select",
      checkbox: true,
      width: 20,//宽度
      align: "center",//水平
      valign: "middle"//垂直
     },*/
     {
      title: "ID",//标题
      field: "id",//键名
      sortable: true,//是否可排序
      order: "desc"//默认排序方式
     },
     {
      field: "userInfo.userName",
      title: "用户名",
      sortable: true,
      titleTooltip: "this is name"
     }/*,
     {
      field: "userInfo.id",
      title: "userInfo.id",
     }*/,
     {
      field: "userInfo.realName",
      title: "真实姓名",
      sortable: true,
     },
     {
      field: "userInfo.department",
      title: "所属部门",
      sortable: true,
     },{
      field: "coinName",
      title: "类型",
      sortable: true,
     },
     {
      field: "amount",
      title: "数量",
      sortable: true,
      sorter:numSort
     },
     {
      field: "validDateStart",
      title: "有效期起",
      sortable: true,
      //——修改——获取日期列的值进行转换
      formatter: function (value, row, index) {
        var time = new Date(value);
        var y = time.getFullYear();//年
        var m = time.getMonth() + 1;//月
        var d = time.getDate();//日
        return y+"-"+m+"-"+d
      }
     },
     {
      field: "validDateEnd",
      title: "有效期止",
      sortable: true,
      //——修改——获取日期列的值进行转换
      formatter: function (value, row, index) {
        var time = new Date(value);
        var y = time.getFullYear();//年
        var m = time.getMonth() + 1;//月
        var d = time.getDate();//日
        return y+"-"+m+"-"+d}
     }
     ,
     {
      field: "userInfo.id",
      title: "操作列",
      formatter:function(value, row, rowIndex){
        var userId =row.userInfo.id;
        var amount =row.amount;
        var validDateStart =row.validDateStart;
        var validDateEnd =row.validDateEnd;
        var realName =row.userInfo.realName;
        console.log(userId);
        console.log(realName);
        console.log(amount);console.log(validDateStart);console.log(validDateEnd);
        if(userId!=null){
         return'      '+'<a class="btn btn-info" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="sendCoin(\''+userId+'\',\''+realName+'\',\''+row.id+'\');"> <i class="icon-edit icon-white"></i>分配</a>' +'      '/*+
            '<a class="btn btn-info" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="editTw(\''+userId+'\',\''+amount+'\',\''+realName+'\',\''+validDateEnd+'\',\''+row.id+'\');"> <i class="icon-edit icon-white"></i>编辑</a>'*/;
        }else{
         return '<a class="btn btn-info" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="sendCoin(\''+userId+'\');"> <i class="icon-edit icon-white"></i>分配</a>';
        }
     }
     }
   ],
   onClickRow: function(row, $element) {
     //$element是当前tr的jquery对象
     $element.css("background-color", "white");
     /*alert(row.id);
     id = row.id;*/
   },//单击row事件
   locale: "zh-CN",//中文支持,
   detailView: false, //是否显示详情折叠
   detailFormatter: function(index, row, element) {
   var html = '';
   $.each(row, function(key, val){
     html += "<p>" + key + ":" + val + "</p>"
   });
   return html;
  }
})
  /*$('#archives-table').bootstrapTable('hideColumn', 'userInfo.id');*/
  /*$("#searchBtn").click(function() {
   var realName = $("#realName").val();
   $.ajax({
     type: "post",
     url: "/coinSend/list",
     data: {param : param},
     dataType:"json",
     success : function(json) {
      $("#archives-table").bootstrapTable('load', json);//主要是要这种写法
     }
   });
  });*/
})

1      Html

二.写贰个函数

伸手后台controller,动态获取数据

1.一  批量选拔框

 function operateFormatter(value, row, index) {
    return [
    '<input type="submit" value="上传" class="RoleOfedit btn btn-primary btn-sm"   data-toggle="modal" style="display:inline">',
    ].join('');
  }

报表能够加1个手风琴样式

图片 1

叁.回想那一个写在表格的前方

<div class="ibox float-e-margins">
  <div class="ibox-title">
   <h5>员工列表</h5>
   <div class="ibox-tools">
     <a class="collapse-link">
      <i class="fa fa-chevron-up"></i>
     </a>
   </div>
  </div>
  <div class="ibox-content">
   <div class="ibox float-e-margins">
     <table id="archives-table" class="table table-hover">
     </table>
   </div>
  </div>
</div>

一.2  单个删除

 window.operateEvents = {
     'click .RoleOfedit': function (e, value, row, index) {
        alert(row.qxxh);
        $("#upload").modal('show');
      }
    };

总结

图片 2

四.点击“弹出模态框”

以上所述是笔者给大家介绍的BootStrap数据表格实例代码,希望对大家有着帮忙,借使大家有别的疑问请给本身留言,作者会及时恢复生机大家的。在此也特别感激我们对台本之家网址的匡助!

2      bootStarp

<div class="modal fade" id="upload" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <form action="http://localhost:8080/GD/UploadAction_execute.action" method="post" enctype="multipart/form-data" name="uploadfile">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabelfile">上传文件</h4>
      </div>
      <div class="modal-body">
          <input type="file" name="my" id="file" value="浏览" style="display: none;"
           onchange="document.uploadfile.filePath.value=this.value"/>
           <input type="text" name="filePath" id="filePath"/>
           <input type="button" value="浏览..." onclick="document.uploadfile.my.click()"/><br>
          <input type="submit" value="上传" id="shangchuan">
      </div>
          <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal -->
  </form>
</div>

您可能感兴趣的稿子:

  • Bootstrap Table
    删除和批量删减
  • Bootstrap
    Table快速完美搭建后台管理类别
  • 集结Bootstrap自定义confirm指暗暗表示义
  • ASP.NET MVC
    使用Bootstrap的方法
  • bootstrap-table组合表头的贯彻格局
  • BootStrap给table表格的每1行增多一个开关事件
  • PHP完结登陆注册之BootStrap表单作用
  • 详解bootstrap用dropdown-menu达成上下文菜单

2.一  批量得到

总结

猎取选取的数目

如上所述是小编给咱们介绍的BootStrap给table表格的每壹行增添一个开关事件,希望对大家全体支持,假设大家有任何疑问请给小编留言,作者会及时苏醒大家的。在此也极度感谢我们对台本之家网址的支撑!

图片 3

发表评论

电子邮件地址不会被公开。 必填项已用*标注