bootstrap-table（一）

最新推荐文章于 2023-04-27 14:00:22 发布
原创 最新推荐文章于 2023-04-27 14:00:22 发布 · 1.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#bootstrap #javascript

BootstrapTable是一款基于Bootstrap的轻量级表格插件，版本1.3.0。它支持固定表头、单/复选、排序、分页、搜索等功能，并且完全可配置。此插件可以使用AJAX获取JSON数据，并支持多语言。

一、参考：

1、开源中国 http://www.oschina.net/p/bootstrap-table

2、中文版参考 http://wenzhixin.net.cn/p/bootstrap-table/docs/?locale=zh

3、英文版参考 http://bootstrap-table.wenzhixin.net.cn/getting-started/


二、概念：

bootstrap table 【版本1.3.0】

为了能更好的提高开发效率和减少开发时间，基于Bootstrap的轻量级表格插件Bootstrap Table新鲜出炉啦。只需简单的配置，就可以拥有强大的支持固定表头、单/复选、排序、分页、搜索及自定义表头等功能。


三、特点：

基于Bootstrap 3开发（同时支持 Bootstrap 2）
响应式界面
固定表头
完全可配置
支持data属性
显示/隐藏列
显示/隐藏表头
使用AJAX获取JSON数据
点击表头可简单的进行排序
支持自定义列显示
支持单/复选
强大的分页功能
支持名片布局
支持多语言



bootstrap控制table列的显示隐藏
03-30
用js控制table列的显示隐藏 用js控制table列的显示隐藏
bootstrap-table可编辑下拉框editable js及css及bootstrap-table-editable.js以及使用实例
12-06
在本话题中，我们聚焦于Bootstrap Table的一个扩展功能——可编辑下拉框，这得益于`bootstrap-table-editable`插件的使用。这个插件允许用户在表格的单元格内直接进行编辑，包括选择下拉框中的值。 `bootstrap-...
bootstraptable查看详情_bootstrap table简洁扁平的表格
weixin_30430333的博客
01-12 211
插件描述：为了能更好的提高开发效率和减少开发时间，基于Bootstrap的轻量级表格插件Bootstrap Table新鲜出炉啦。只需简单的配置，就可以拥有强大的支持固定表头、单/复选、排序、分页、搜索及自定义表头等功能。特点基于Bootstrap 3开发(同时支持 Bootstrap 2)响应式界面固定表头完全可配置支持data属性显示/隐藏列显示/隐藏表头使用AJAX获取JSON数据点击表头可...
bootstrap table使用总结
PKyourself的博客
12-23 3222
官网介绍： 基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。   主要功能 支持 Bootstrap 3 和 Bootstrap 2 自适应界面 固定表头 非常丰富的配置参数 直接通过标签使用 显示/隐藏列 显示/隐藏表头 通过 AJAX 获取 JSON 格式的数据 支持...
BootStrapTable
Dzq_Boyka的博客
03-28 653
原文：https://blog.youkuaiyun.com/javahighness/article/details/73929108官网地址： http://bootstrap-table.wenzhixin.net.cn/zh-cn/Github地址： https://github.com/wenzhixin/bootstrap-table官网介绍： 基于 Bootstrap 的 jQuery 表格插件...
Bootstrap table 单击列标题或表头事件 控制多列的显示隐藏
诗语待马
07-15 4875
众所周知，bootstrap table 的现有api中，对列表的单击事件仅支持对`行的单击`和对`单元格`的单击。而对表头的操作也只有`点击列标题排序`。并没有开放对某列标题的单击事件，即列标题是不可点击状态。
BootStrap-table 表格固定列，固定左侧列以及右侧列，可以固定特定的列
08-15
BootStrap-table 是一个基于Bootstrap框架的表格插件，它通过提供丰富的API和一系列可配置的选项来增强标准的HTML表格。在这个特定的上下文中，我们关注的是BootStrap-table的功能，即表格固定列、固定左侧列以及...
将bootstrap-table表格翻译为中文
03-04
$('#myTable').bootstrapTable(); ``` `data-toggle="table"`属性用于激活Bootstrap-table功能，`data-field`用于指定列的字段名。 3. **设置语言**：为了确保表格使用中文语言包，需要在初始化表格时指定`...
精选资源
bootstrap-table-fixed-columns.js
03-25
"bootstrap-table-fixed-columns.js" 是这个库的一个扩展插件，专门用于处理表格的固定列问题。 在网页设计中，尤其是数据密集型应用，固定列是非常实用的功能。它允许用户在滚动查看长表格时始终保持某些列（通常...
BootStrap table表格插件自适应固定表头(超好用)
11-22
首先是简单的页面形式，大家可以按照平常画表格的方式来创建html表格，然后通过js控制特殊的样式等操作（优点是表格更加直观，方便调整表格样式等，速度快） 当然，也可以只在页面上放一个table标签，之后的所有数据和样式都通过js控制也是可以的，后面会说（优点方便控制修改数据，尤其是ajax方式获取的json格式，但是调整样式比较麻烦） ps：这个是插件的官网，里面有英文api和例子：http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 还有，使用前请引入bootstrap的相关css，js，jQuery，以及bootstrap-table的css，
精选资源
基于bootstrap-table 实现 右侧列固定
08-14
基于bootstrap-table 实现 右侧列固定，也可以针对左侧列固定，针对操作列使用起来非常方便，引用jquery、bootstrap-table-fixed 样式和js文件后，可以随意设置，灵活。 fixedColumns: true,//fixedtNumber:2, //...
表格插件bootstrapTable中隐藏和显示某列及一些小注意点
热门推荐
nb7474的博客
02-09 7万+
html代码：<table id="docDateTable" class="table table-hover table-bordered" style="color: #000000"> <thead style="background-color: white"> <tr> <th data-field="name" data-valign="
bootstrap-table：列的显示与隐藏以及动态加载列(自定义加载表头)
xu_xu_0924的博客
09-23 4324
var head_data = [] // 初始化表格 getColumns() function getColumns() { // 加载动态表格 $.ajax({ url: "json/head.json", type: 'get', dataType: "json", async: false, success: function(data) { head_data = data var options = { ...
Bootstrap Table踩坑——设置多级表头后只显示第一级表头问题解决办法
imherer的博客
08-12 658
今天设置了Bootstrap Table的复杂表头，设置了多级表头（两行列名），但是只能显示第一级表头（第一行的列名），第二级的表头被第一级的表头覆盖。但是我仿照其他网上的其他设置复杂表头例子都能正常显示，我的设置了多级表头怎么就不能正常展示呢？我真的十分郁闷，后经过思考和查找资料,需要在页面加上这么一段全局样式就好了。 <style type="text/css"> .fixed-table-header{ height: auto; } &lt...
BootstrapTable前台数据不显示问题
qq_38159458的博客
04-05 1万+
BootstrapTable前台数据不显示问题一、可能你后台有问题，没返回数据二、名称没对应上，js区分大小写。三、返回的数据格式有问题。 一、可能你后台有问题，没返回数据 按下f12看下你的请求是不是有数据返回 二、名称没对应上，js区分大小写。 columns里面要与实体类对应好 三、返回的数据格式有问题。 当你pagination设为false的时候要返回count，data这种格式的数据...
bootstrap table显示隐藏列
weixin_43447266的博客
04-27 4922
最近做项目用到了bootstrap table插件，但需要隐藏id的列，但是如果用bootstrap隐藏就获取不到这个id去传给后端了。然后就使用css来进行隐藏。
bootstrap 取消_bootstrap-table实现表头固定以及列固定
weixin_32461163的博客
02-01 883
之前使用bootstrap写了一个报表表格，最近突然找到我，说让我看看能不能将表格的表头和第一列进行固定，这样的话方便查看数据，于是，我开始了苦逼的研究起来，毕竟我是个后端啊，对于前端的样式问题，特别是小功能，烦的一批这里就记录下我的研究成果一：引入js和css<!-- 引入jquery --> <script type="text/javascript" src="./js/j...
bootstrap-table一列有两个td
最新发布
12-14
提供的引用中未提及关于“bootstrap - table 一列中有两个 td”的相关内容。不过在常规的 HTML 表格逻辑里，一列通常对应一个 td 元素。若要在一列里呈现类似两个 td 的效果，可通过以下思路解决： ### 问题分析 在正常的表格结构中，一列对应一个 td 元素，每个 td 代表表格中的一个单元格。若需要在一列中呈现类似两个 td 的内容，可能是想要在一个单元格中展示两块不同的内容。 ### 解决办法 #### 1. 使用嵌套表格 可以在一个 td 内嵌套一个新的表格，以此模拟两个 td 的效果。 ```html <table class="table"> <thead> <tr> <th>列 1</th> <th>列 2</th> </tr> </thead> <tbody> <tr> <td> <table> <tr> <td>内容 1</td> <td>内容 2</td> </tr> </table> </td> <td>列 2 的内容</td> </tr> </tbody> </table> ``` #### 2. 使用 div 布局 在 td 内使用 div 元素进行布局，将内容分成两部分。 ```html <table class="table"> <thead> <tr> <th>列 1</th> <th>列 2</th> </tr> </thead> <tbody> <tr> <td> <div style="float: left;">内容 1</div> <div style="float: left;">内容 2</div> </td> <td>列 2 的内容</td> </tr> </tbody> </table> ``` #### 3. 使用 flexbox 布局 利用 CSS 的 flexbox 布局来实现内容的分割。 ```html <table class="table"> <thead> <tr> <th>列 1</th> <th>列 2</th> </tr> </thead> <tbody> <tr> <td style="display: flex;"> <div>内容 1</div> <div>内容 2</div> </td> <td>列 2 的内容</td> </tr> </tbody> </table> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值