bootstrap-table入门使用解析

最新推荐文章于 2024-05-23 11:57:15 发布

zhhaitong

最新推荐文章于 2024-05-23 11:57:15 发布

阅读量501

点赞数

分类专栏：前端文章标签： bootstrapTable

本文链接：https://blog.csdn.net/qq_21912927/article/details/100993702

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前段时间在项目中有用到bootstrapTable，特此做一系统和全面的整理，方便以后查阅。

bootstrapTable是基于bootstarp实现的js表格插件，因其完善的功能和良好的扩展性备受广大开发者的青睐。官网地址：https://bootstrap-table.com

基本使用

在html文件中引用以下代码：
css: <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.css">
js: <script src="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.js"></script>
在html的table标签中使用data-toggle="table"属性，将一个普通表格转换为bootstrapTable表格。
完整代码：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, Bootstrap Table!</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.css">
  </head>
  <body>
    <table data-toggle="table">
      <thead>
        <tr>
          <th>Item ID</th>
          <th>Item Name</th>
          <th>Item Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Item 1</td>
          <td>$1</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Item 2</td>
          <td>$2</td>
        </tr>
      </tbody>
    </table>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.js"></script>
  </body>
</html>

效果预览：

进阶使用

bootstrapTable表格的构建方式

bootstrapTable支持我们使用html和js两种方式来完成表格的构建，但boottrapTable官方更加推荐我们使用js。所以后面的例子我们都将采用js进行编写。

配置项解析

$("#table_server").bootstrapTable({
    url: url,//数据地址
    method: 'get',// 请求方式
    dataType: "json",// 数据类型
    striped: true, //是否显示行间隔色
    cache: false,      //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
    toolbar: '#toolbar',    //工具按钮用哪个容器
    undefinedText: "暂无数据",//当数据为 undefined 时显示的字符
    pagination: true, //是否开启分页
    pageNumber: 1,//如果设置了分页，首页页码
    pageSize: 100,//如果设置了分页，页面数据条数
    pageList: [50, 100],  //如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
    paginationPreText: '<',//指定分页条中上一页按钮的图标或文字,这里是<
    paginationNextText: '>',//指定分页条中下一页按钮的图标或文字,这里是>
    paginationLoop: false,// 页码循环跳转（即最后一页的下一页是第一页）
    showToggle: false,//是否显示 切换试图（table/card）按钮
    showColumns: false,//是否显示 内容列下拉框
    showRefresh: true, //是否显示刷新按钮
    search: false, //显示搜索框
    data_local: "zh-US",//表格汉化
    height:'600',
    clickToSelect: true,    //是否启用点击选中行
    sortable: true, //是否启用排序
    sortOrder: "ID asc", //排序方式
    sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
    queryParamsType: '', //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset, limit, sort
    // 设置为 '' 则传给服务器的参数为：pageSize, pageNumber
    queryParams: function (params) {
        //前端调用服务时，会默认传递上边提到的参数，如果需要添加自定义参数，可以自定义一个函数返回请求参数
        return {
             //这里的params是table提供的
             pageNumber: params.offset,//从数据库第几条记录开始
             pageSize: params.limit,//找多少条
             type:"2" // 自定义的参数，后台需要的
        };
     },
     // 对响应数据的处理
     // 比较常见的应用场景是服务器返回的数据格式和bootstrapTable要求的数据格式不一致时对其进行处理返回
     responseHandler: function (res) {
                    return res['data'];
     },
     onLoadSuccess: function(data){ 
         //加载成功时执行,data为服务器返回数据
    },
   idField: "key",//指定主键列
   columns: [{
      title: 'title',//表的列名
      field: 'field',//json数据中rows数组中的属性名
      align: 'center',//水平居中,
      valign: 'middle',//垂直居中
      formatter:function(value, row, index){
          return ('<a href='+value+'style="display:block">'+value+'</a>')
        }
   }]
});

zhhaitong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap-table入门使用解析

前段时间在项目中有用到bootstrapTable，特此做一系统和全面的整理，方便以后查阅。bootstrapTable是基于bootstarp实现的表格js插件。官网地址：https://bootstrap-table.com基本使用在html文件中引用以下代码：css: <link rel="stylesheet" href="https://unpkg.com/bootstr...
复制链接

扫一扫