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


Posted in Javascript onMay 09, 2019

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组件的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery uaMatch源代码
Feb 14 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
Sep 04 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
JS实现页面打印功能
Mar 16 Javascript
Vue全局分页组件的实现代码
Aug 10 Javascript
Vue-component全局注册实例
Sep 06 Javascript
JavaScript模板引擎应用场景及实现原理详解
Dec 14 Javascript
JavaScript解析JSON数据示例
Jul 16 Javascript
JavaScript监听一个DOM元素大小变化
Apr 26 Javascript
jquery实现简单拖拽效果
Jul 20 jQuery
Vue axios获取token临时令牌封装案例
Sep 11 Javascript
详解es6新增数组方法简便了哪些操作
May 09 #Javascript
Vue函数式组件-你值得拥有
May 09 #Javascript
12个提高JavaScript技能的概念(小结)
May 09 #Javascript
Vue 处理表单input单行文本框的实例代码
May 09 #Javascript
使用vuex解决刷新页面state数据消失的问题记录
May 08 #Javascript
微信小程序网络层封装的实现(promise, 登录锁)
May 08 #Javascript
详解微信小程序的不同函数调用的几种方法
May 08 #Javascript
You might like
PHP&amp;MYSQL服务器配置说明
2006/10/09 PHP
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
jQuery的链式调用浅析
2010/12/03 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
在JavaScript中正确引用bind方法的应用
2015/05/11 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
从请求到响应过程中django都做了哪些处理
2018/08/01 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
python+selenium+chromedriver实现爬虫示例代码
2020/04/10 Python
python多线程实现同时执行两个while循环的操作
2020/05/02 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
python 制作本地应用搜索工具
2021/02/27 Python
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
北京SQL新华信咨询
2016/09/30 面试题
四年级数学教学反思
2014/02/02 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
2014年安全生产目标责任书
2014/07/23 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
党员带头倡议书
2015/04/29 职场文书