网络编程
位置:首页>> 网络编程>> JavaScript>> bootstrap-table formatter 使用vue组件的方法

bootstrap-table formatter 使用vue组件的方法

作者:Chobits  发布时间:2024-04-29 13:12:37 

标签:bootstrap,table,vue

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>

     (adsbygoogle = window.adsbygoogle || []).push({}); 

总结

以上所述是小编给大家介绍的bootstrap-table formatter 使用vue组件的方法,网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

来源:https://segmentfault.com/a/1190000019115038

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com