bootstrap-table簡介
•1.1、bootstrap table簡介及特征：
Bootstrap table是國人開發的一款基于 Bootstrap 的 jQuery 表格插件，通過簡單的設置，就可以擁有強大的單選、多選、排序、分頁，以及編輯、導出、過濾（擴展）等等的功能。目前在github上已經有2600多個Star，可見其受歡迎程度。其官方網站地址 為：http://bootstrap-table.wenzhixin.net.cn/。里面可以下載使用所需的JS和CSS文件，以及參考文檔和例子。
•支持 Bootstrap 3 和 Bootstrap 2
•自適應界面
•固定表頭
•非常豐富的配置參數
•直接通過標簽使用
•顯示/隱藏列
•顯示/隱藏表頭
•通過 AJAX 獲取 JSON 格式的數據
•支持排序
•格式化表格
•支持單選或者多選
•強大的分頁功能
•支持卡片視圖
•支持多語言
•支持插件
下面通過實例代碼給大家介紹bootstrap-table formatter 使用vue組件的方法，具體代碼如下所示：
import { Subject } from "rxjs";import Vue from "vue";export const BtEventHub = new Subject();const VueComList = [];let VueComId = 0;BtEventHub.debounceTime(10) .filter(() => VueComList.length > 0) .delay(10) .subscribe(function() { const len = VueComList.length - 1; for (let i = len; i >= 0; i--) { const item = VueComList[i]; const dom = document.getElementById(item.name); if (dom != null) { new Vue(item); VueComList.splice(i, 1); } } if (VueComList.length === 0) { VueComId = 0; } });export function BtAddVueCom(obj: object) { const id = `_vue_com_${VueComId++}`; VueComList.push({ el: "#" + id, name: id, ...obj }); setTimeout(() => { BtEventHub.next(); }, 0); return id;}window["BtAddVueCom"] = BtAddVueCom;function ColFormatter1(value, row) { const id = window.BtAddVueCom({ template: '<el-switch v-model="row.IsShow"></el-switch>', data: function () { return { row } } }); return `<div id="${id}"></div>`;}ps：Vue 結合bootstrap table插件使用
bootstrap Table插件可以很方便的搜索排序，方便快捷，下面是結合vue的完整的例子。
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Vue Bootstrap Table Demo</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" rel="external nofollow" > <link rel="stylesheet" href="../plugins/bootstrap-table-develop/src/bootstrap-table.css" rel="external nofollow" ></head><body class=""> <div> <table class="table table-bordered table-striped" id="tableTest1"> </table> </div> <script src="../jQuery/jQuery-2.1.4.min.js"></script> <script src="../dist/vue.js"></script> <script src="../plugins/bootstrap-table-develop/src/bootstrap-table.js"></script> <script src="../plugins/bootstrap-table-develop/src/locale/bootstrap-table-zh-CN.js"></script> <script> var app7 = new Vue({ el: '#tableTest1', data: { //message: [], message: [], columns: [{ title: 'Id', field: 'id' }, { field: 'name', title: 'Item Name' }, { field: 'url', title: 'url' }, { field: 'alex', title: 'alex' }, { field: 'country', title: 'country' } ], }, created() { //console.log(this.message) this.getData(); this.intervalGetData(); //console.log(this.message) }, methods: { intervalGetData() { setInterval(() => { // $.get("selectBtTable.php?action=init_data_list", data => { // var data = JSON.parse(data); // this.message = data; // $('#tableTest1').bootstrapTable('load', this.message); // //console.log(JSON.parse(data)) // console.log("get data") // }) this.getData(); }, 3000) }, getData() { //es6 箭頭函數的寫法 // $.get("selectBtTable.php?action=init_data_list", data => { // var data = JSON.parse(data); // this.message = data; // $('#tableTest1').bootstrapTable('load', this.message); // console.log("init data") // }) var that = this; $.get("selectBtTable.php?action=init_data_list", function(data) { var data = JSON.parse(data); that.message = data; $('#tableTest1').bootstrapTable('load', that.message); console.log("init data") }) } }, mounted() { console.log(this.message + "mounted") $('#tableTest1').bootstrapTable({ columns: this.columns, height: 500, search: true }); } }) </script></body></html>
新聞熱點
疑難解答
圖片精選
