在vue2.0中使用bootstarp-table(jquery+bootstarp+bootstarpTable)

14 篇文章 0 订阅

要想使用bootstarp-table就需要按顺序引入

jquery > bootstarp > bootstarp-table

//路径可能会有变动 最好在node_modules 中看看

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'

mian.js 入口文件引用前,当然要有依赖啦!

注意事项:要在当前项目文件夹下下载安装

npm install  jquery --save--dev
npm install bootstrap@3 --save--dev
npm install bootstrap-table@1.11.1 --save--dev
npm install --save popper.js      //这个为第三方依赖

修改webpack.base.conf.js文件配置

1.加入

var webpack = require('webpack');

2.在module.exports里输入:

plugins: [
		    new webpack.ProvidePlugin({
		      $: "jquery",
		      jQuery: "jquery"
		    })
		   ]

最后

运行 npm run dev 就可以正常启动了

推荐检测方法

一. 检测jquery

$(function () {  
			    alert(123);  
			 });

页面弹出123,就说明第一步是没有问题的

二.检测 bootstrap

    <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-primary">(首选项)Primary</button>
      <button type="button" class="btn btn-success">(成功)Success</button>
    </div>

按钮拥有样式,就说明这步也是没有问题的

三.检测bootstarp-table

  export default {
    data(){
      return {

      }
    },
    mounted(){
      $("#test").text("This is only a test!");

      $('#table').bootstrapTable('destroy').bootstrapTable({
        url: '',
        method: 'GET',
        uniqueId: 'id',                        // 绑定ID,不显示
        striped: false,                         //是否显示行间隔色
        cache: false,                          //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
        sortable: true,                        //是否启用排序
        sortOrder: "asc",                      //排序方式
        sidePagination: "client",              //分页方式:client客户端分页,server服务端分页(*)
        undefinedText: '--',
        //singleSelect: true,                  // 单选checkbox,默认为复选
        showRefresh   : true,                  // 显示刷新按钮
        showColumns   : true,                  // 选择显示的列
        toolbar: '#item_info_toolbar',         // 搜索框位置
        search: true,                          // 搜索开启,
        strictSearch: true,
        clickToSelect: true,                   // 点击选中行
        pagination: true,                      //是否显示分页
        pageNumber:1,                          //初始化加载第一页,默认第一页,并记录
        pageSize:5,//每页显示的数量
        pageList: [5, 10, 20, 50, 100],//设置每页显示的数量
        paginationPreText:"上一页",
        paginationNextText:"下一页",
        paginationLoop:false,
        //showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
        //cardView: false,                    //是否显示详细视图
        //detailView: false,                  //是否显示父子表
        //showPaginationSwitch: true,
        //得到查询的参数
        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
          },{
            field: 'username',
            title:'用户名',
            valign: 'middle',
            width: '16%',
            sortable: true
          },{
            field: 'fullname',
            title:'姓名',
            width: '16%'
          },{
            field: 'status',
            title:'密码认证',
            width: '16%'
          },{
            field: 'availableSpace',
            title:'智能卡认证',
            valign: 'middle',
            width: '16%'
          },{
            field: 'totalSpace',
            title:'个人空间配额',
            width: '16%'
          },{
            field: 'storageServer',
            title:'私密空间配额',
            formatter: operateFormatter
          }
        ],
        onLoadSuccess: function () {
          alert('表格加载成功!');
        },
        onLoadError: function () {
          showTips("数据加载失败!");
        },
        onDblClickRow: function (row, $element) {
          var id = row.ID;
          //EditViewById(id, 'view');
        },
        rowStyle: function (row, index) { //设置行的特殊样式
          //这里有5个取值颜色['active', 'success', 'info', 'warning', 'danger'];
          var strclass = "";
          if (index == 1) {
            strclass = "warning";
            console.log(row);
          }
          return { classes: strclass }
        }
      });

      function getSelectValue(){
        var a = $table.bootstrapTable('getSelections');//获取选中行的数据
        if(a.length > 0){
          console.log(a);
        }
      }

      function operateFormatter (value, row, index) {
        var result = '<button class="btn  btn-action" title="激活USBKEY认证" onclick=""><i class="glyphicon glyphicon-pencil"></i></button>'
        return result;
      }

    }
  }

最后的效果如下:

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用bootstrap-table-vue.js在浏览器创建一个表格,你需要按照以下步骤进行操作: 步骤1:引入相关的依赖文件 在HTML文件,需要引入bootstrap、jQuerybootstrap-table的CSS和JavaScript文件。你可以通过以下方式引入它们: ```html <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table-vue@1.4.2/dist/bootstrap-table.min.css"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap-table-vue@1.4.2/dist/bootstrap-table.min.js"></script> ``` 步骤2:创建HTML元素 在HTML文件,创建一个包含表格的元素。例如: ```html <div id="table-container"> <table id="my-table"></table> </div> ``` 步骤3:初始化表格 在JavaScript使用bootstrap-table-vue.js初始化表格。例如: ```javascript $(document).ready(function() { $('#my-table').bootstrapTable({ data: [ {id: 1, name: 'John Doe', age: 25}, {id: 2, name: 'Jane Smith', age: 30}, {id: 3, name: 'Bob Johnson', age: 40} ], columns: [ {field: 'id', title: 'ID'}, {field: 'name', title: 'Name'}, {field: 'age', title: 'Age'} ] }); }); ``` 在这个例子,我们通过`data`属性提供了表格的数据,通过`columns`属性定义了表格的列。 步骤4:运行代码 保存HTML文件,并在浏览器打开它,你将看到一个使用bootstrap-table-vue.js创建的表格。 请注意,以上代码是一个简单的示例,你可以根据自己的需求进行更多的定制和配置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值