写在前面

今天写一个表格神器,之前我没有用过,是一个博友问我的时候我去看了一下,觉得很不错,今天分享一下,只有写demo,给源码才能得到你们的心,哎,太难了!

bootStrapTableJs介绍

首先这是一款处理表格的js,我们如果写element习惯了会发现其实表格的处理是业务中相对简单的,他没有什么很强的交互,就是拿到数据,按照头部和body对应起来就可以了,更新什么的也是没关系的,因为毕竟可以拿到当前行的数据,调更新接口就可以了,表格能说的就是分页的操作了,很多的js处理这块都不是很友好,分页可以分为客户端分页和服务端分页,一般相对大一点的项目会服务端分页,原因也很简单,每一次拿到的数据都不是很多,都是一页的数据,我们默认一般是5-20条就不少了,这样对页面渲染的压力也不大,但是如果项目或者数据不是很大的情况下还是建议是客户端分页,这样的好处是减少页面的请求次数,提升页面的性能,今天介绍的bootStrapTableJs是一款既可以客户端分页也可以服务端分页的神器,还支持客户端或者服务端模糊搜索等功能

jQuery+bootStrapTableJs

今天要写的是vue怎么使用这个js,所以jQuery的这里简单的说一下,就是我们直接新建一个html文件,里面引入cdn或者自己下载下来的bootStrapTableJs,这里将jqueryjs引入放前面就可以了,按照文档写的就可以了,不写demo了。有什么问题的话,可以左侧联系我

VUE+bootStrapTableJs

首先我们新建一个vue项目,然后安装bootStrapTableJs

  • 安装bootStrapTableJs
npm install bootstrap-table 

配图:
在这里插入图片描述

  • 安装jQuery
npm install jquery

配图:
在这里插入图片描述

  • 安装bootstrap
npm install bootstrap@3 --save--dev

在这里插入图片描述

  • main.js引入js文件
import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import 'bootstrap-table/dist/bootstrap-table.min.css'
import 'bootstrap-table/dist/bootstrap-table.min.js'
import 'bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js'

配图:
在这里插入图片描述

因为我没有接口,没办法直接拿到后端的数据,所以写了一个mockjs文件,模拟请求接口的情况,这是我的JS文件,您如果有后端数据的话,下面的步骤可以不做

  • mockjs文件
let tabelList = [];
for (let i = 0; i < 1000; ++i) {
  tabelList.push({
    name: "小米" + i,
    sex: i % 2 === 0 ? '男' : '女',
    age: Math.floor(Math.random() * 10) + 20,
    school: "武大",
    company: "alibaba",
    address: "杭州市萧山区",
    remark:'这是一段备注'
  })
}
const bootstrapTable = {
  code: 200,
  data: {
    tabelList: tabelList,
    rowStyle: rowStyle,
    columns: [{
      field: 'name',
      title: '姓名',
      align: 'center',
    }, {
      field: 'sex',
      title: '性别',
      align: 'center'
    }, {
      field: 'age',
      title: '年龄',
      align: 'center'
    }, {
      field: 'school',
      title: '学校',
      align: 'center'
    }, {
      field: 'company',
      title: '公司',
      align: 'center'
    }, {
      field: 'address',
      title: '住址',
      align: 'center'
    },{
      field: 'option',
      title: '操作',
      align: 'center'
    }]
  },
  msg: '请求成功'
}


function rowStyle(row, index) {
  console.info(row,index)
  if (index % 2 === 0) {
    return {
      css: {
        'background': '#58aef7'
      }
    }
  }
  return {};
}
export default bootstrapTable;
bootstrapTable.vue 实现
<template>
  <div>
    <common-back :currPage='currPage'>
    </common-back>
    <table id="table" ref="table"></table>
  </div>
</template>

<script>
  export default {
    name: "bootStrapTable",
    data() {
      return {
        currPage: this.$route.params.pageFlag,
      }
    },
    mounted() {
      this.gettableInfo()
    },
    methods: {
      /**
       * @function gettableInfo 获取表格的列和源数据
       */
      gettableInfo() {
        this.$axios.get('api/bootstrapTable.do').then((res) => {
          $('#table').bootstrapTable({
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            pagination: true,  //是否分页
            //toolbar: '#toolbar',
            detailView: true,  //前面的加号,详细数据
            singleSelect: true,
            checkbox: true,
            rowStyle: this.rowStyle,
            cellStyle: this.cellStyle,
            clickToSelect: true,
            sortable: true,    //是否排阻
            sortOrder: 'asc',  //正序或者倒序
            pageSize: 5,       //每夜显示多少条
            striped: true,     //是否斑马纹
            search: true,      //显示搜索
            searchText: '',    //搜索默认文字
            strictSearch: false, //是否模糊搜索
            showRefresh: true,   //显示刷新
            showToggle: true,    //显示表格别的样式
            showPaginationSwitch: true, //显示分页功能
            showFullscreen: true,   //是否全屏
            minimumCountColumns: 5,  //最少几条不显示分页
            paginationPreText: '上一页',  //上一页
            paginationNextText: '下一页', //下一页
            pageList: [5, 10, 15],  //可供选择的每叶条数
            data: res.data.data.tabelList,  //表格数据
            columns: res.data.data.columns  //表格列数据
          })
        }).catch((error) => {
          console.error(error)
        })

      },
      /**
       * @function rowStyle
       * @param row
       * @param index
       * @returns {{css: {background: string}}|{}}
       */
      rowStyle(row, index) {
        console.info(row, index)
        if (index % 2 === 0) {
          return {
            css: {
              'background': '#58aef7'
            }
          }
        } else {
          return {}
        }
      },
      /**
       * @function cellStyle
       * @param row
       * @param index
       * @returns {{css: {background: string}}|{}}
       */
      cellStyle(row, index) {
        if (index % 2 === 0) {
          return {
            css: {
              'background': '#58aef7'
            }
          }
        } else {
          return {}
        }
      }
    },
  }
</script>
<style scoped>
</style>

这里说明一下,就是关于上面的请求的事情,bootStrapTableJs本身自带的就是有请求的,但是他的请求返回的格式如果是JSON的话是可以直接渲染的, 但是我们的一般请求的返回不会直接就是JSON数据的,所以我这里是将返回的格式单独列了出来。

  • 配置webpack.base.conf.js
var webpack = require('webpack');
 plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ]

配图:
在这里插入图片描述
在这里插入图片描述
效果:
在这里插入图片描述

到这里就基本结束了,可以使用了,具体想实现什么功能,可以自己根据配置的字段进行添加就可以了。感谢阅读!
我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=ut6zjitp8kug

Logo

前往低代码交流专区

更多推荐