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 相关文章推荐
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
Jquery解析Json格式数据过程代码
Oct 17 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
浅析Node.js中的内存泄漏问题
Jun 23 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
静态页面html中跳转传值的JS处理技巧
Jun 22 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 Javascript
浅谈Vue 初始化性能优化
Aug 31 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
7个超级实用的PHP代码片段
2011/07/11 PHP
完美实现wordpress禁止文章修订和自动保存的方法
2014/11/03 PHP
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
javascript定义变量时有var和没有var的区别探讨
2014/07/21 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
JavaScript时间转换处理函数
2015/04/14 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
对Vue- 动态元素属性及v-bind和v-model的区别详解
2018/08/27 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
python获取各操作系统硬件信息的方法
2015/06/03 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
python实现AES加密解密
2019/03/28 Python
django 单表操作实例详解
2019/07/30 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
python装饰器原理与用法深入详解
2019/12/19 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
python3实现将json对象存入Redis以及数据的导入导出
2020/07/16 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
精灵市场:Pixie Market
2019/06/18 全球购物
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
2013年入党人员的自我鉴定
2013/10/25 职场文书
安全保证书范文
2014/04/29 职场文书
物理教育专业求职信
2014/06/25 职场文书
法学专业求职信范文
2015/03/19 职场文书
结婚十年感言
2015/07/31 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
MySQL去除密码登录告警的方法
2022/04/20 MySQL
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL