• apiopen in new window

  • Bootstrap-table是基于Boostrap开发的插件,因此使用的时候,需要引入Bootstrap的脚本和样式。

  • bootstrap-table在页面中的使用,可以分为两种,

    • 一种是纯粹用HTML5的写法,通过data-*的方式指定各种属性设置
    • 一种是HTML+JS方式实现弹性设置。

table

<link href="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.css" rel="stylesheet">

<script src="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.js"></script>

<table
  id="table"
  data-toggle="table"
  data-height="460"
  data-ajax="ajaxRequest"
  data-search="true"
  data-side-pagination="server"
  data-pagination="true">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>
</table>

<script>
  // your custom ajax request here
  function ajaxRequest(params) {
    var url = 'https://examples.wenzhixin.net.cn/examples/bootstrap_table/data'
    $.get(url + '?' + $.param(params.data)).then(function (res) {
      params.success(res)
    })
  }
</script>

config

  • ajax 接收返回值 {total:22,rows:{}}
  • 当接口返回的数据格式,不是固定的“total”,"rows"时,我们需要用到一个转换函数responseHandler,将数据指引到“total”,"rows"上去
    • responseHandler:responseHandler
function responseHandler(res){

    return {
            'total': res.count,
            'rows': res.data
        }
}



  //得到查询的参数
                  queryParams : function (params) {
                      //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
                      var temp = {   
                          rows: params.limit,                         //页面大小
                          page: (params.offset / params.limit) + 1,   //页码
                          sort: params.sort,      //排序列名  
                          sortOrder: params.order //排位命令(desc,asc) 
                      };
                     return temp;
                 },


                 //操作栏的格式化
                 /**
                  * row button
                  */
          function actionFormatter(value, row, index) {
              var id = value;
              var result = "";
              result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
              result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
              result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
  
              return result;
         }





var $table;
          //初始化bootstrap-table的内容
          function InitMainTable () {
              //记录页面bootstrap-table全局变量$table,方便应用
              var queryUrl = '/TestUser/FindWithPager?rnd=' + Math.random()
              $table = $('#grid').bootstrapTable({
                rowStyle:rowStyle,                     // 自定义每一行颜色或样式 
                  url: queryUrl,                      //请求后台的URL(*)
                  method: 'GET',                      //请求方式(*)
                  //toolbar: '#toolbar',              //工具按钮用哪个容器
                 striped: true,                      //是否显示行间隔色
                 cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
                pagination: true,                   //是否显示分页(*)
                 sortable: true,                     //是否启用排序
                 sortOrder: "asc",                   //排序方式
                 sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
                 pageNumber: 1,                      //初始化加载第一页,默认第一页,并记录
                 pageSize: rows,                     //每页的记录行数(*)
                 pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
                 search: false,                      //是否显示表格搜索
                 strictSearch: true,
                 showColumns: true,                  //是否显示所有的列(选择显示的列)
                 showRefresh: true,                  //是否显示刷新按钮
                 minimumCountColumns: 2,             //最少允许的列数
                 clickToSelect: true,                //是否启用点击选中行
                 //height: 500,                      //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
                 uniqueId: "ID",                     //每一行的唯一标识,一般为主键列
                 showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
                 cardView: false,                    //是否显示详细视图
                 detailView: false,                  //是否显示父子表
                 //得到查询的参数
                 queryParams : function (params) {
                     //这里的键的名字和控制器的变量名必须一致,这边改动,控制器也需要改成一样的
                     var temp = {   
                         rows: params.limit,                         //页面大小
                         page: (params.offset / params.limit) + 1,   //页码
                         sort: params.sort,      //排序列名  
                         sortOrder: params.order //排位命令(desc,asc) 
                     };
                     return temp;
                 },
                 columns: [{
                     checkbox: true,  
                     visible: true                  //是否显示复选框  
                 }, {
                     field: 'BirthDate',
                     title: '出生日期',
                     formatter: dateFormatter
                 },   {
                     field:'ID',
                     title: '操作',
                     width: 120,
                     align: 'center',
                     valign: 'middle',
                     formatter: actionFormatter
                 }, ],
                 onLoadSuccess: function () {
                 },
                 onLoadError: function () {
                     showTips("数据加载失败!");
                 },
                 onDblClickRow: function (row, $element) {
                     var id = row.ID;
                     EditViewById(id, 'view');
                 },
             });
         };
                
  • 我们需要设置行的不同的样式展示,可以通过增加rowStyle的JS处理函数
 rowStyle: function (row, index) { //设置行的特殊样式
                     //这里有5个取值颜色['active', 'success', 'info', 'warning', 'danger'];
                     var strclass = "";
                     if (index == 0) {
                         strclass = "warning";
                     }
                     return { classes: strclass }
}


var rowStyle = function (row, index) {
    var classesArr = ['success', 'info'];
    if (index % 2 === 0) {//偶数行
        return { classes: classesArr[0] };
    } else {//奇数行
        return { classes: classesArr[1] };
    }
}

  • 需要双击弹出编辑界面的层,我们可以处理表格的双击事件
 onDblClickRow: function (row, $element) {
                     var id = row.ID;
                     EditViewById(id, 'view');
                 }
  • 表格记录的获取,我们可以通过下面的代码进行获取
$table.bootstrapTable('getSelections')
   var rows = $table.bootstrapTable('getSelections');
             if (rows.length > 0) {
                 ID = rows[0].ID;
             }
  • 设置显示列显示 行转列
const config = 
{
    sortable: true,                     //是否启用排序
    sortOrder: "asc",                   //排序方式
    sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
    showColumns: true,                  //是否显示所有的列(选择显示的列)
    showRefresh: true,                  //是否显示刷新按钮

}
添加删除数据之后表格自动刷新加载

默认选中


    function exportSelected(tableId) {
        let idList = [];
        debugger
        var dataa = $("#table").bootstrapTable("getSelections");
        for (let i = 0; i < dataa.length; i++) {
            const ids = dataa[i].id;
            idList.push(ids)
        }

        // 默认选中行,注意:需要在表数据加载完成之后使用。
        $('#score-table').bootstrapTable("checkBy", {
                    field: 'id',
                    values: idList
        });
        //field:列数据名,比如后台传过的code,id,不用配置在表中,但是列表中应该有这个字段数据。
        // values:要设置的默认值数组,字段id的list数组


        $("#" + tableId).bootstrapTable("checkBy", {
            field: 'id',
            values: idList
        });


        var dataa = $("#" + tableId).bootstrapTable("getSelections");



        var data = $("#" + tableId).bootstrapTable("getData");
        //exportDataSelected('tablee','问题信息','0')

        if (data != null && data.length > 0) {
            $("#" + tableId).bootstrapTable("exportExcel", {
                type: 'selected',
                fileName: 'excelName',
                ignoreColumnIndex: 0
            });
        } else {
            DialogTool.alert({
                type: BootstrapDialog.TYPE_WARNING,
                title: '提示',
                message: '当前没有要导出的数据!'
            });
        }

    }

    $('#table').bootstrapTable("check", 0);