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 相关文章推荐
键盘 keycode的值 javascript时触发事件时很有用的要素
Nov 02 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
javascript如何实现暂停功能
Nov 06 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
Jul 14 Javascript
js enter键激发事件实例代码
Aug 17 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
玩转vue的slot内容分发
Sep 22 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
基于JavaScript获取base64图片大小
Oct 18 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 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
15种PHP Encoder的比较
2007/04/17 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
JQuery 文本框使用小结
2010/05/22 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
微信小程序 JS动态修改样式的实现方法
2018/12/16 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
跟老齐学Python之有点简约的元组
2014/09/24 Python
python爬虫入门教程--优雅的HTTP库requests(二)
2017/05/25 Python
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
Python使用type动态创建类操作示例
2020/02/29 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
香港礼品网站:GiftU eshop
2017/09/01 全球购物
联想德国官网:Lenovo Germany
2018/07/04 全球购物
French Connection官网:女装、男装及家居用品
2019/03/18 全球购物
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
中专毕业生个人职业生涯规划
2014/02/19 职场文书
一年级小学生评语
2014/04/22 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
场地使用证明模板
2014/10/25 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
护士个人总结范文
2015/02/13 职场文书
交通事故调解协议书
2015/05/20 职场文书
2015年妇委会工作总结
2015/05/22 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript