bootstrap-table formatter 使用vue组件的方法
作者:Chobits 发布时间:2024-04-29 13:12:37
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


猜你喜欢
- Web_THBC 为表示层也就是页面(.aspx) BLL_THBC 为业务逻辑层 DAL_THBC 为数据库交互层 (向数据库执行SQL语
- pycharm全局修改pycharm 全局改函数方法1ctrl shift r全局替换方法2点击函数,右键 Refactor Ch
- 1,检查默认安装的mysql的字符集mysql> show variables like '%char%';+----
- MongoDB简介MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统。在高负载的情况下,添加更多的节点,可以保证
- 一、使用NumPy读写文本文件在数据分析中,经常需要从文件中读取数据或将数据写入文件,常用的存储文件的格式有文本文件、CSV格式文件、二进制
- 前言有时候字符串匹配解决不了问题,这个时候就需要正则表达式来处理。因为每一次匹配(比如找以什么开头的,以什么结尾的字符串要写好多个函数)都要
- 本文实例讲述了Python使用CMD模块更优雅的运行脚本的方法。分享给大家供大家参考。具体分析如下:平时由于经常给测试人员调试一些东西,虽然
- 随着互联网产业的飞速发展和电子产业的飞速发展,人们的社交似乎离不开网络,这就应运了SNS的飞速发展。从打开QQ空间关注朋友们的动态,最近心情
- WebSocket - 开启通往新世界的大门WebSocket是什么?WebSocket是一种在单个TCP连接上进行全双工通讯的协议。Web
- Linux下MySQL数据库的主从同步配置的好处是可以把这个方式当做是一个备份的方法,用来实现读写分离,缓解一个数据库的压力。让运行海量数据
- 在使用Dreamweaver制作主页的时候往往需要改变表格的高度。然而有时当我们拖动表格的边框,无论怎样拖动,等到放下鼠标,表格却又恢复到原
- 这篇文章主要介绍了Python OrderedDict的使用案例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值
- 从控制器中获取URL的值有三种方式:1、使用Request.QueryString[]例如:string value = Request.Q
- 注:本文只讨论技术不涉及商业,如有侵权请告知,未经本人同意转载后果自负!本文是通过浏览器端ajax,node端request-json进行爬
- 解决此问题的几个关键点如下:1、该现象只会出现在NTFS文件系统中。2、由NTFS文件系统的访问权限导致。 一般手工操作的解决方案
- 本文实例讲述了Python输出PowerPoint(ppt)文件中全部文字信息的方法。分享给大家供大家参考。具体分析如下:下面的代码依赖于w
- 原来字母还可以组合成各种动物图案,真是佩服设计师的奇思妙想,很可爱,超级有趣的组合!Bembo's Zoo 猴子:羊是牛吗,勤劳的水
- 多表关系在进行数据库表结构的设计时,会根据业务的需求和业务模块之间的关系,分析设计表结构,由于业务之间相互关联,所以各个表结构之间也存在各种
- 前言subprocess库提供了一个API创建子进程并与之通信。这对于运行生产或消费文本的程序尤其有好处,因为这个API支持通过新进行的标准
- 1.首先读取Excel文件数据代表了各个城市店铺的装修和配置费用,要统计出装修和配置项的总费用并进行加和计算;2.pandas实现过程imp