Bootstrap Table 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
Bootstrap Table 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
Bootstrap Table 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
所属分类 Web应用开发网页组件
开源组织
地区 国产
投 递 者 沃德天拉莫帅
适用人群 未知
收录时间 2015-03-28

软件简介

bootstrap-table 被设计来减少开发时间,开发人员不需要特定的知识就可以做出很美妙的table。非常轻量级的和功能丰富的。满足企业开发需求。

在线演示:http://bstables.oschina.mopaas.com/invited_record.html

支持bootstrap2,3
响应网页设计
可滚动表固定头部
完全可配置
数据属性
显示/隐藏列
显示/隐藏标题
使用AJAX获取JSON格式的数据
简单的点击列排序
格式化列
选择单个或多个行
强大的分页
卡片视图
国际化
容易扩展

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (28)

加载中
该评论暂时无法显示,详情咨询 QQ 群:912889742
该评论暂时无法显示,详情咨询 QQ 群:912889742
该评论暂时无法显示,详情咨询 QQ 群:912889742
表格右上方的刷新和列的那两个按钮,为什么不一样的大小
2017/08/18 17:11
回复
举报
间隔行颜色后在弹出窗口中,白色行会有横线,改css中无背景行为白色或其他颜色;翻页参数接口写死在代码中的,如果对不上需要改源码limit下边的参数.....
2017/08/04 10:00
回复
举报
打分: 还行
好是好 就是没有像样的文档 每次找资料找的蛋疼
2017/07/18 14:57
回复
举报
打分: 力荐
以前使用Jquery datatable需要写一大堆表单操作的JS,现在使用bootstrap-table现在只需要写一些特殊处理的JS了。方便很多。。。后面项目基本都转向bootstrap-table了。
2017/07/18 14:53
回复
举报
打分: 力荐
@作者 强烈要求添上tabletree的样式 tabletre tabletree tabletree 重要的事情说三遍
2017/06/22 23:15
回复
举报
定了height以后,标题头和内容还会不会错位啊?
2017/06/05 16:25
回复
举报
打分: 推荐
不错,减少了我不少时间,感觉比datatable好用
2017/05/20 07:56
回复
举报
更多评论
暂无内容
发表了博客
2017/04/28 15:48

bootstrap-table

学习地址:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ bootstrap-table: 注意表格配置: // 载入所需模块 define([     'http',     'config',     'util',     'extension'   ],   function(http, config, util, $$) {     return {       name: 'commission',       init: function() {         var _this = this;         _this.pagesInit();         _this.bindEvent();       },       pagesInit: function() {         var _this = this;         // 分页配置,...

0
0
发表于大前端专区
2018/06/27 10:15

Bootstrap table

Bootstrap table 根据国际化来修改页面显示         { field: 'gender', title: '<s:text name="person.gender"/>' , sortable: true , formatter: function(value ,row , idnex){ var type = null;             if (value == 'male') {               type='<s:text name="common.male"/>';             }             else if (value == '1'){               type='<s:text name="common.female"/>';          ...

0
0
发表了博客
2019/03/31 21:51

Bootstrap table

Bootstrap table学习 一、在页面中引入相关文件。 Jquery.js bootstrap.js bootstrap.css Bootstrap-table.js bootstrap-table.css 二、编写页面 1.准备一个空表格 <div> <table id=”table”></table> </div> 2.编写js $('#table').bootstrapTable({ url: '/Home/GetDepartment', //请求后台的URL(*) method: 'get', //请求方式(*) toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache:...

0
0
发表于大前端专区
2017/10/30 20:06

bootstrap -table

使用bootstrap-table插件时,会用到表格的点击事件,事件如下: BootstrapTable.DEFAULTS = { classes: ‘table table-hover’, locale: undefined, height: undefined, undefinedText: ‘-‘, sortName: undefined, sortOrder: ‘asc’, sortStable: false, striped: false, columns: [[]], data: [], dataField: ‘rows’, method: ‘get’, url: undefined, ajax: undefined, cache: true, contentType: ‘application/json;...

0
2
发表了博客
2019/03/22 17:20

Bootstrap table方法,Bootstrap table事件,配置

调用 BootStrap Table 方法的语法: $('#table').bootstrapTable('method', parameter); 例如: $('#my_table').bootstrapTable('refreshOptions', { data: tabledata });   //刷新表格 tabledata 为数据 $("#my_table").bootstrapTable('removeAll');  //清空表格数据 $('#my_table').bootstrapTable('destroy'); //销毁表格数据 $("#my_table").bootstrapTable('refresh')    //刷新表格 $("#my_table").bootstrapTabl...

0
0
发表了博客
2018/07/17 17:48

bootstrap Table的使用方法

1.官网   url:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/  文档包含了表格属性、列属性、事件、方法等等. 2.引入库   只要引入 jquery、bootstrap 、bootstrap-table的包,不用在js里面定义就可以使用默认有写data-toggle=”table”,data-toggle应该知道吧,常用的有”tooltip、popover等等”,这边就不说了. 3.定义住表单 1 <!-- 主表单 --> 2 <table id="datatable"></table> 3 <!-- /主表单...

0
0
发表于大前端专区
2016/03/16 16:30

bootstrap table 实例

bootstrap table 封装了一套完善的数据表格组件,把下面的代码复制一下估计你需要的基本功能都有了,没有的再看看手册对比着我给的实例也能很快的熟悉了 客户端 <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>Bootstrap-Table</title>     <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"/>     <link rel="stylesheet" href=...

11
28
发表于大前端专区
2014/12/22 16:15

Bootstrap Table使用

今天无意间结识了Bootstrap Table,试用了一下!效果非常棒! 直接牛刀小试 1.首先从http://www.html580.com/?Ou4SZy5J下载需要的文件 2.接着创建一个html文件 3.引入css支持 <link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="bootstrap-table.css"> 4.引入js支持 <script src="jquery.min.js"></script> <script src="bootstrap.min.js"></script> <script src="bootstrap-table.js"></script...

1
1
发表于大前端专区
2017/11/03 10:00

Bootstrap Table Examples

Bootstrap Table 是一款基于bootstrap封装的表格组件,使用起来比较方便。官方文档对服务器端分页表述不是很清楚,查了它的demo,看到接口返回的数据,可以参考一下他的网页源码。此网页源码定制性比较强,基本的使用不需要这么复杂,可以参考下面的例子进行使用,如果有必要再看官网demo的源码再深入使用。 前端的基本设置 <table id="exampleTableEvents" data-mobile-responsive="true" ...

0
0
发表于大前端专区
2018/12/28 14:32

bootstrap table 使用

bootstrap table 获取选中行数据 var a= $table.bootstrapTable('getSelections'); if(a.length==1){ console.log(a[0].id); }else{ alert("请选中一行") }

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表于大前端专区
2018/11/27 15:51

bootstrap-table remove不生效是怎么个情况?

已经确认过了,field="layout_actname"没有错。可是就是不能删掉这一行,这是怎么回事呢?是我写的不对么???

1
0
发表了问答
2015/12/23 11:41

Bootstrap table不加载数据

{ "content":[{"modelObj":{"seqId":2300,"bidCode":"222222222","allowBid":null,"signupNo":"202032271300","bidTel":null,"uploadTime":1450316045000,"paymentTime":null,"paymentBank":null,"createTime":1450316045000,"paymentMoney":null,"createUserId":2300,"createUserName":"tb2","updateTime":null,"updateUserId":null,"updateUserName":null,"isDel":1,"dataOrder":1,"remark":null,"sectionId":1751,"fileCode"...

6
0
发表了问答
2016/07/14 18:10

bootstrap table父子表 子表取不出数据

用bootstrap table做一个父子表 现在子表取不出数据,取数据方法用的和夫表的一样。后台返回的json数据数据也正常,就是前台显示不出 前台代码如下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.g...

1
0
发表了问答
2016/01/27 11:34

bootstrap table 怎么取到点击事件里的 index

@wenzhixin 你好,想跟你请教个问题: 用这个index 好不方便, 有什么办法能取到点击事件的index吗?

4
0
发表了问答
2016/12/17 15:22

关于 bootstrap table的 getselecttions

用bootstrap的 table 使用了 getSelecttions 为什么会出现这玩意? 源代码如下 : var row=JSON.stringify($('#test_table').bootstrapTable('getSelections')); alert(row); $.ajax({ url:'/zsManage/countadmin/testjson.action', data:'row='+row, dataType:"html", type:"post", success:function() { alert('success'); }, error:function() { alert('error'); } });...

5
0
发表了问答
2016/10/23 19:27

bootstrap table 根据单元格数据,控制其他单元格展现

1
0
发表了问答
2016/05/25 13:53

关于BootstapTable插件中加载从服务器返回的数据格式问题

bootstrap table 插件中要求从服务器返回的数据格式标准是这样的数据机构 [{"username":"邓肯","sex":"男","age":22},{"username":"灰太狼","sex":"男","age":23}] 如果现在返回的JSON数据的结构如下 {"success":true,"msg":"","data":null,"rows":[{"systemId":"XXXXX","systemName":"XXXXXXXX","systemKey":"8282A2061BDB11E6BD1EF07959E054A4","remark":null,"id":"XXXXX"},{"systemId":"XXXXX","systemName":"XXXXX","syst...

1
0
发表了问答
2016/02/19 11:11

删除时出错,请问下,我该怎么找问题所在

@wenzhixin 你好,想跟你请教个问题: 首先,我向table里添加数据 添加了两条数据 一条是123 一条是23423423 显示两条数据 删除第一条,名称为123 剩余一条234123423 继续删除 入口传进来的数据,还是原来的123数据. 这是怎么回事呢?

2
0
发表了问答
2016/01/10 21:25

父子表getSelections问题

@wenzhixin 你好,想跟你请教个问题:父子表的时候,getSelections和getAllSelections都取不到子表的行,有没有方法是能够取到父表和子表的值的?

2
0
发表了问答
2015/12/28 15:29

Bootstrap Table search

@wenzhixin 你好,想跟你请教个问题:这个search:true,不是可以查客户端的么,怎么我输入值会没有找到匹配记录

2
0
发表了问答
2015/12/10 17:22

样式出问题了,有冲突怎么解决

@wenzhixin 你好,想跟你请教个问题:我又有新问题了,最近有基于该组件的大量应用,目前出现了样式冲突,不知如何解决,我的layout页面有fix top bar,这时table就出问题了,截图如下: 我样式是菜鸟,可有解决思路?

3
0
发表了问答
2015/12/04 08:28

父子表中的子表隐藏列名

@wenzhixin 你好,想跟你请教个问题:我用的父子表,子表的列头和父表是一致的,所以我想隐藏字表的列名,应该怎么设置?

2
0
发表了问答
2015/03/29 16:50

Bootstrap Table 还不错,不知道后期是否有人维护

不是响应式的,小分辨率,表格都对不齐。

2
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
28 评论
672 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部