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陷阱题
Feb 07 Javascript
基于jquery的分页控件(C#)
Jan 06 Javascript
Jquery选中或取消radio示例
Sep 29 Javascript
将数字转换成大写的人民币表达式的js函数
Sep 21 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 Javascript
Vue中this.$router.push参数获取方法
Feb 27 Javascript
vue分页器组件编写方法详解
Jun 28 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 Javascript
在vue中使用Base64转码的案例
Aug 07 Javascript
如何在Express4.x中愉快地使用async的方法
Nov 18 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
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
PHP4实际应用经验篇(7)
2006/10/09 PHP
PHP 模板高级篇总结
2006/12/21 PHP
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
深入php中var_dump方法的使用详解
2013/06/24 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
php树型类实例
2014/12/05 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
鼠标经过的文本框textbox变色
2009/05/21 Javascript
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
[02:30]联想杯DOTA2完美世界全国高校联赛—北京站现场
2015/11/16 DOTA
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
PyMongo安装使用笔记
2015/04/27 Python
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
python实现微信远程控制电脑
2018/02/22 Python
python3实现基于用户的协同过滤
2018/05/31 Python
python读取并写入mat文件的方法
2019/07/12 Python
Django之路由层的实现
2019/09/09 Python
Tensorflow 实现释放内存
2020/02/03 Python
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
贷款承诺书范文
2014/05/19 职场文书
环保标语大全
2014/06/12 职场文书
中药学自荐信
2014/06/15 职场文书
升学宴学生答谢词
2015/01/05 职场文书