Bootstrap-Table

调用方法语法示例 $('#table').bootstrapTable('method', parameter)调用事件方式一 $('#table').bootstrapTable({ onEventName: function (arg1, arg2, ...) { // ... }})方式二 $('#table').on('event-name.bs.table', function (e, arg1, arg2, ...) { // ...})列的事件上面的事件都是表的事件，列的事件有自己的写法 <th .. data-events="operateEvent">var operateEvents = { 'click .like': function (e, value, row, index) {}}

更多 JS 插件：JS 插件文档及在线演示简单介绍官方地址：Bootstrap Table · An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation)bootstrap table 是一款基于 Bootstrap 的 jQuery 表格插件，功能比较完备，能够实现数据异步获取，编辑，排序等一系列功能，最可贵的是，只需要一些简单的配置就可以实现一个功能完备的在线表格。HTML 部分bootstrap-table 具备异步获取数据功能，然后在前台渲染出表格。所以，前台只需要一句代码就解决了：<table id=“table”></table>虽然它也支持将参数写在 HTML 页面中，但是我建议直接写在 JS 文件里，便于管理。引入文件由于 bootstrap-table 除了自身提供的功能外，还支持很多第三方的插件，所以，引入文件的部分就显得尤其重要了，没准你调试半天的 Bug，只是因为忘了引入某个库文件。首先关注 3 个文件，dist 目录下的 bootstrap-table.css、bootstrap-table.js，如果使用中文，还要引用 locale/bootstrap-table-zh-CN.js，注意每个文件均提供了min版本以及正常版本，建议在开发测试阶段引入正常版本，便于调试。当然最后不要忘了引入 bootstrap 以及 jQuery，最终效果如下：<!– CSS 部分 –><!– Bootstrap 3.3.7 –><link rel=“stylesheet” href="/bootstrap/dist/css/bootstrap.min.css"><!– Bootstrap table –><link rel=“stylesheet” href="/bootstrap-table/dist/css/booststrap-table.min.css">js 文件建议放到页面最底下，在 </body> 之前引入即可，如下所示：<!– JS 部分 –><!– jQuery 3 –><script src="/jquery/dist/jquery.min.js"></script><!– Bootstrap 3.3.7 –><script src="/bootstrap/dist/js/bootstrap.min.js"></script><!– bootstrap-table –><script src="/bootstrap-table/dist/bootstrap-table.js"></script><script src="/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>注意：1. 顺序不要乱；2. 根目录依据自己项目而定JS 调用前台放一个 table 标签即可，表格的结构，甚至于表格的操作都放到JS中实现，如下代码即可生成一个表格：$(’#table’).bootstrapTable({ url: ‘/bootstrap-table/data’, // 表格数据来源 columns: [{ field: ‘id’, title: ‘Item ID’ }, { field: ’name’, title: ‘Item Name’ }, { field: ‘price’, title: ‘Item Price’ },{ field: ‘column1’, title: ‘列1’ },{ field: ‘column2’, title: ‘列2’ },{ field: ‘column3’, title: ‘列3’ },{ field: ‘column4’, title: ‘列4’ } ]});url 中定义了表格的数据来源，返回数据的格式依然是包含数据对象的数组。由于该框架提供的参数比较多，而实际项目并用不着这么多配置，这里给出，我建议的一个方案，供参考。右上角的一些功能，通过配置一些参数即可实现，无需多余的代码。这个查看官方文档，基本没有什么问题，这里不多介绍了。左上角是一些自定义的一些功能，这里有添加数据，筛选数据（本地&异步），再加上编辑数据，基本就完成了表格的增删改查需求，这个我在后面会一一介绍。添加功能根据一些实际项目的经验，采用弹出模态框的方式，是最优雅的添加方式。如下图所示：这个是bootstrap自带的一个插件，直接引入页面中即可，至于表单的提交方式是采用form原生提交，还是使用ajax异步提交，就取决于你的喜好了。这块内容不在文章范围内，就不多介绍了。需要注意的是：假如你采用的是ajax异步提交表单，那么就需要调用bootstrap-table的refresh方法，用来更新表格数据。$(’#table’).bootstrapTable(‘refresh’);导入功能每次在做信息化类项目的时候，导出功能是我最不愿意去做，但也必须要实现的功能。不愿做并不是因为很难实现，这是一个原则问题，信息化就是为了减少或是废除线下操作，然而在传统企业却根本行不通，因为不管你的用户体验做得有多好，也改变不了用户「不愿尝试改变」的劣根性。bootstrap-table提供了导出扩展模块，简单配置就可以轻松实现导出功能。首先需要引入两个文件，一个是bootstrap-table中extensions中的bootstrap-table-export扩展；另一个是tableExport的插件。效果如下：<!– bootstrap-table export –><script src="/bootstrap-table/dist/extensions/export/bootstrap-table-export.min.js"></script><script src="/tableexport.jquery.plugin/tableExport.min.js"></script>引入扩展文件后，在表格参数中加入如下一句配置即可：showExport: true筛选功能这个是在线表格最重要的功能之一。因为我们不可能一次性将后台所有数据都拉到前台展示。如果你之前使用过bootstrap-table，你可能知道它提供了一个sidePagination的参数，这个参数是定义在哪里进行分页，可选值为 client 或者 server。默认为client，当你设置为 server时，每次请求后台服务器，都会加上limit, offset, search, sort, order这几个参数，传到后台让你去处理数据分页。这里我想告诉你，完全没有必要这么麻烦，实际项目中，我们都是通过参数条件，筛选一部分数据展示到前台。所以你定义好默认的参数就可以了，分页的事就交给前端处理即可。那么参数如何自定义呢？使用queryParams表格参数即可。举个例子：queryParams: function(params){ return { startDate: ‘2018/09/01’, endDate: ‘2019/09/01’ };},查看Chrome Network请求，可以看出传递参数情况。通过上述自定义参数方式，就可以筛选部分数据到前台，然后通过配置分页参数就可以实现筛选功能了。那么一般设置什么参数筛选呢？其实就是想问一次性筛选多少条数据最合适呢？我的建议是在500以内，这样既方便处理数据，也不会太影响性能。前台分页的好处，主要体现在搜索这块，完全不用自己去实现代码，简单配置搜索框即可，而且提供的是全局搜索，很强大了。如果想配置个本地筛选也是很方便的，使用resetSearch方法即可。// 本地筛选$(’#localFilter li a’).click(function(e){ e.preventDefault(); var filter = $(this).data(‘filter’); $table.bootstrapTable(‘resetSearch’, filter);});有时候，我还是想要从后台筛选部分数据，通过前台表单，使用 refresh方法即可。// 异步筛选$(’#Filter’).submit(function(e){ e.preventDefault(); var filter = $(‘input[name=filter]’).val(); $table.bootstrapTable(‘refresh’,{ query: { startDate: ‘2001/09/01’, endDate: ‘2008/09/01’, filter: filter } });});筛选功能就到这，这里只是介绍了参数传递的方法，具体筛选，还需要结合后台代码去实现。搜索功能搜索分为前台搜索以及后台搜索。前台搜索：学会使用5个表格参数（search、searchOnEnterKey、searchText、trimOnSearch、customSearch（自定义搜索）），2个列参数（searchable、searchFormatter），1个方法（resetSearch）即可后台搜索，就类似于筛选功能的传参了，在后台处理字符串，返回表格数据，此不在本文范围内，不多赘述。编辑功能在线表格的编辑，其实是最不好处理的一个功能。一方面，添加编辑功能需要增加很多额外的代码量；另一方面，从业务上来讲，编辑并不是一个好的用户体验。在做编辑功能之前，我总是问自己，这块功能真的需要编辑吗？删除了重新添加行不行？bootstrap-table 提供了 editable 编辑模块，简单配置即可实现表格的编辑，但是我还是想要提醒，使用编辑功能需要有节制，越自由并不代表用户体验越好。还是老套路，引入3个文件（其中：1个css，2个js）：<!– X-editable –><link rel=“stylesheet” href="/X-editable/dist/bootstrap3-editable/css/bootstrap-editable.css"><!– booststrap-table editable –><script src="/bootstrap-table/dist/extensions/editable/bootstrap-table-editable.js"></script><script src="/X-editable/dist/bootstrap3-editable/js/bootstrap-editable.min.js"></script>引入之后，直接在列参数上加上editable: true，即可启用该字段的标记功能，效果图如下：样式没有问题后，接下来看看如何使用，使用方法完全沿用了X-editable插件，bootstrap-table-editable仅仅只是做了嵌入的工作，所以你需要查看X-editable的文档，这里我举个简单的例子介绍一下，如下为其中一列的参数设置：{ field: ‘column2’, title: ‘列2’, editable: { url: ‘/test’, },}url参数用来异步访问后台，那么传递的参数有哪些呢？pk在X-editable中定义为主键，在bootstrap-table中，通过设置表格参数idField: ‘id’，可以定义行数据的主键。若改成idField: ’name’，再来看下：明白了如何传参数，相信你就知道后面如何处理了。删除功能介绍完编辑功能，不知道你有没有发现，假如我们要编辑的字段非常多，这种处理方式会给后台造成很大的工作量，能不能一个表单就解决编辑需求呢？当然是可以的。我们在每一行的最后加上一列，放上一些功能按钮，如下图：在columns表格参数中，加上一列如下：{ field: ‘operator’, title: ‘操作’, align: ‘center’, valign: ‘middle’, width: ‘10%’, // visible: false, formatter: function (value, row, index) { // var sid_code = base64encode(row.sid + ‘’); // sid 加密处理 // alert(sid_code); return ‘<a href="#">’ + ‘<i class=“glyphicon glyphicon-eye-open” title=“显示”></i> ’ + ‘</a>’+ ‘<a href="#editProject" data-toggle=“modal” title=“修改”>’ + ‘<i class=“glyphicon glyphicon-pencil”></i> ’ + ‘</a>’+ ‘<a href=“javascript:void(0)” title=“删除”>’ + ‘<i class=“glyphicon glyphicon-trash text-danger”></i> ’ + ‘</a>’; }, events: { ‘click a[title=删除]’: function (e, value, row, index) { if(confirm(‘此操作不可逆，请确认是否删除？’)){ $.ajax(); } }, ‘click a[title=修改]’: function (e, value, row, index) { // e.preventDefault(); alert(‘click change button’); }, }}4个参数分别是：event: the jQuery event.value: the field value.row: the row record data.index: the row index.相信看完这个示例，就能一并解决「查看」「编辑」「删除」等功能。bootstrap-table的使用就介绍到这里了，官方文档里还有好多参数以及方法没有介绍到，篇幅有限就不再介绍了，需自行查看文档学习。后台返回数据对象数组，每一行数据为一个对象 ...

之前使用bootstrap写了一个报表表格，最近突然找到我，说让我看看能不能将表格的表头和第一列进行固定，这样的话方便查看数据，于是，我开始了苦逼的研究起来，毕竟我是个后端啊，对于前端的样式问题，特别是小功能，烦的一批这里就记录下我的研究成果一：引入js和css<!– 引入jquery –><script type=“text/javascript” src="./js/jquery-3.3.1.min.js"></script><!– 引入bootstrap的js和css文件 –><link rel=“stylesheet” href="./css/bootstrap.min.css" ><script src="./js/bootstrap.min.js" ></script><!– 固定表头所需的js和css(bootstrap-table) –><link rel=“stylesheet” type=“text/css” href="./css/bootstrap-table.min.css"><script src="./js/bootstrap-table.min.js"></script><!– 固定列所需的js和css(bootstrap-table-fixed-columns) –><link rel=“stylesheet” type=“text/css” href="./css/bootstrap-table-fixed-columns.css"><script src="./js/bootstrap-table-fixed-columns.js"></script>query下载地址：http://www.jq22.com/jquery-in…bootstrap下载地址：http://www.bootcss.com/bootstrap-table下载地址：https://bootstrap-table.com/bootstrap-table-fixed-columns下载地址：https://github.com/wenzhixin/…这里注意：引入jquery时，不要引入jquery2.0.0(包括2.0.0)版本以下，如果你引入了2.0.0版本以下的jquery的话，当你编写完代码之后，在控制台会出现如下错误：二：编写table表格(固定表头)<table class=“table table-bordered” id=“table” data-toggle=“table” data-height=“200”><thead><tr> <th>表头一</th> <th>表头二</th> <th>表头三</th> <th>表头四</th> </tr></thead><tbody><tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td> </tr></tbody></table>上面代码中的table标签中的data-toggle=“table"表示的是启用bootstrap表格，data-height=“200"表示设置表格的高度，用于配置固定表头由于我这里编写的表格数据较少，所以展示出来的数据可能不会出现滑轮，看不出来固定表头现象，你可以向表格中添加多一点数据就可以了三：固定列<script>$(function(){ //#table表示的是上面table表格中的id $("#table”).bootstrapTable(‘destroy’).bootstrapTable({ fixedColumns: true, fixedNumber: 1 //固定列数 });})</script>四：当浏览器窗口变化时，表头与表格不对齐解决：<script>$(function(){$(’#table’).bootstrapTable(); $(window).resize(function () { $(’#table’).bootstrapTable(‘resetView’); });})</script>五：初次展示时表头和表格数据不对齐解决(个人使用的方法，方法有点傻)进过上面的过程我们已经实现了表格的表格和列固定功能了，于是我便开始将报表修改起来，开始修改起来十分的轻松，没有问题，但是，当我修改到一个报表的时候发现，开始的时候，表头和数据之间就发生了不对齐现象：于是我开始在网上搜索起来，但是网上搜索的答案根本解决不了，例如：找到bootstrap-table的源码中if (this.options.showHeader && this.options.height) { this.$tableHeader.show(); //注释掉下面两行 取消表头初始化解决表头和内容不对齐问题 //this.resetHeader(); //padding += this.$header.outerHeight();}不知道写这个的兄弟有没有自己测试过，反正我注释了之后，确实表头和数据对齐了，但是表头固定功能消失了，表头和数据不对齐的原因就是因为你设置了固定表头影响的，你这样将表头固定功能去掉了，那么我直接将table标签中的data-height=“200"去掉不久行了吗，为什么还要改源码呢？于是我自己开始研究起来最后我使用审查元素找到错位的表头位置，发现这样一段代码<div class=“fht-cell” style=“width: 146px;"></div>这里将宽度设置为了146但是我的数据宽度只有120,这才造成了错位，然后我找到bootstrap-table源码设置div的class为fht-cell宽度的代码位置虽然我找到了问题所在，但是源码哪里出问题了，我还是不清楚，有知道的伙伴，欢迎告诉我答案既然我不知道源码出问题出在哪，那么我就使用十分傻的方法，直接设置class为fht-cell的宽度，将之前宽度为146的覆盖.fht-cell{width:120px!important;}然后打开观看，错误问题解决了！！！

1、解决bootstrap-table中表头和内容宽度不一致, 列内容错位问题在进行bootstrap分页处理的时候，使用bootstrap-table出现表头与内容宽度不一致的情况。如下图：解决方法：修改bootstrap-table.js源码，将BootstrapTable.prototype.resetView函数体中的this.resetHeader();padding += this.$header.outerHeight();注释掉，下图：

俗话说，纸上学来终觉浅，绝知此事要躬行，最近两天学习了下Vue2.0,想做个项目练下手，顺便写个文章方便复习回顾~1.使用cue-cli创建vue项目进入指定目录，右击Git Bash Here打开git命令行，vue init webpack 项目名称，创建基于webpack的vue项目根据命令行的提示，选择是否安装vue-router,是否添加单元测试等，此处均选择"n",创建一个最基本的项目项目创建完成后使用webstorm打开（楼主的webstorm中没法创建vue项目，其实上面两步也可以再webstorm中进行操作），在webstorm命令行中运行npm install或cnpm install安装依赖包在webstorm中运行npm run dev 运行之后在浏览打开http://localhost:8081，显示如下页面则表示创建成功2.在vue项目中引入bootstrap和jQuery在项目根目录下的package.json文件中添加bootstrap和jquery依赖,行在webstorm命令行中运行npm install或cnpm install安装依赖包在main.js中导入jquery和bootstrap 此时刷新浏览器显示jQuery还未引入成功，还需要使用内置插件ProvidePlugin自动加载模块需在build/webpack.base.conf.js中增加插件配置 再在配置中添加： 此时项目中就可以使用jQuery和Bootstrap了3. 使用bootstrap创建表格组件在components文件夹下新建.vue文件，文件的基本结构如下，也可以以此作为.vue文件的模板<template> </template><script> export default { name: “${NAME}” }</script><style scoped></style>在script标签中预先定义要显示在表格中的数据data() { return { books: [ {id: 1, name: ‘红楼梦’, author: ‘曹雪芹’, price: 32}, {id: 2, name: ‘水浒传’, author: ‘施耐庵’, price: 30}, {id: 3, name: ‘三国演义’, author: ‘罗贯中’, price: 24}, {id: 4, name: ‘西游记’, author: ‘吴承恩’, price: 20} ] } }2.在template标签中引用bootstrap和数据定义表格 <div id=“table”> <table class=“table table-striped table-bordered”> <thead> <tr> <td>序号</td> <td>书名</td> <td>作者</td> <td>价格</td> </tr> </thead> <tbody> <tr v-for=“book in books”> <td>{{ book.id }}</td> <td>{{ book.name }}</td> <td>{{ book.author }}</td> <td>{{ book.price }}</td> </tr> </tbody> </table> </div>3.在main.js中引入组件，并将组件填充到Vue实例中// The Vue build version to load with the import command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from ‘vue’import App from ‘./App’//导入jquery和bootstrapimport ‘jquery/dist/jquery.min’import ‘bootstrap/dist/js/bootstrap.min.js’import ‘bootstrap/dist/css/bootstrap.min.css’import myTable from ‘./components/MyTable’Vue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: ‘#app’, components: { App,myTable }, template: ‘<myTable/>’})4.稍微调整样式后，浏览器显示结果如图： ...