本文目录
- JS组件Bootstrap Table布局详解
- 如何来使用bootstrap table
- 在使用bootstrap-table时，怎么获取选择行的内容
- bootstraptable方法怎么使用
- bootstrap table怎么用
- 如何使用bootstrap-table进行后端排序
JS组件Bootstrap Table布局详解
Bootstrap提供了一个清晰的创建表格的布局。下表列出了Bootstrap支持的一些表格元素：表格类下表样式可用于表格中：《tr》,《th》和《td》类下表的类可用于表格的行或者单元格：基本的表格如果您想要一个只带有内边距（padding）和水平分割的基本表，请添加class.table，如下面实例所示：《divclass="row"》《tableclass="table"》《captionclass="text-center"》基本表格布局《/caption》《thead》《tr》《th》编号《/th》《th》城市《/th》《/tr》《/thead》《tbody》《tr》《td》No.1《/td》《td》北京《/td》《/tr》《tr》《td》No.2《/td》《td》上海《/td》《/tr》《/tbody》《/table》《/div》显示效果：可选的表格类除了基本的表格标记和.tableclass，还有一些可以用来为标记定义样式的类。下面将向您介绍这些类。条纹表格通过添加.table-stripedclass，您将在《tbody》内的行上看到条纹，如下面的实例所示：《divclass="row"》《tableclass="tabletable-striped"》《captionclass="text-center"》条纹表格布局《/caption》《thead》《tr》《th》编号《/th》《th》城市《/th》《/tr》《/thead》《tbody》《tr》《td》No.1《/td》《td》北京《/td》《/tr》《tr》《td》No.2《/td》《td》上海《/td》《/tr》《tr》《td》No.3《/td》《td》苏州《/td》《/tr》《tr》《td》No.4《/td》《td》南京《/td》《/tr》《/tbody》《/table》《/div》显示效果：边框表格通过添加.table-borderedclass，您将看到每个元素周围都有边框，且占整个表格是圆角的，如下面的实例所示：《divclass="row"》《tableclass="tabletable-bordered"》《captionclass="text-center"》边框表格布局《/caption》《thead》《tr》《th》编号《/th》《th》城市《/th》《/tr》《/thead》《tbody》《tr》《td》No.1《/td》《td》北京《/td》《/tr》《tr》《td》No.2《/td》《td》上海《/td》《/tr》《tr》《td》No.3《/td》《td》苏州《/td》《/tr》《tr》《td》No.4《/td》《td》南京《/td》《/tr》《/tbody》《/table》《/div》显示效果：悬停表格通过添加.table-hoverclass，当指针悬停在行上时会出现浅灰色背景，如下面的实例所示：《divclass="row"》《tableclass="tabletable-hover"》《captionclass="text-center"》悬停表格布局《/caption》《thead》《tr》《th》编号《/th》《th》城市《/th》《/tr》《/thead》《tbody》《tr》《td》No.1《/td》《td》北京《/td》《/tr》《tr》《td》No.2《/td》《td》上海《/td》《/tr》《tr》《td》No.3《/td》《td》苏州《/td》《/tr》《tr》《td》No.4《/td》《td》南京《/td》《/tr》《/tbody》《/table》《/div》显示效果：精简表格通过添加.table-condensedclass，行内边距（padding）被切为两半，以便让表看起来更紧凑，如下面的实例所示。这在想让信息看起来更紧凑时非常有用。《divclass="row"》《tableclass="tabletable-condensed"》《captionclass="text-center"》精简表格布局《/caption》《thead》《tr》《th》编号《/th》《th》城市《/th》《/tr》《/thead》《tbody》《tr》《td》No.1《/td》《td》北京《/td》《/tr》《tr》《td》No.2《/td》《td》上海《/td》《/tr》《tr》《td》No.3《/td》《td》苏州《/td》《/tr》《tr》《td》No.4《/td》《td》南京《/td》《/tr》《/tbody》《/table》《/div》显示效果：上下文类下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。这些类可以用到《tr》、《td》、《th》中，如下面实例所示：《divclass="row"》《tableclass="table"》《captionclass="text-center"》上下文表格布局《/caption》《thead》《tr》《th》编号《/th》《th》城市《/th》《/tr》《/thead》《tbody》《trclass="active"》《td》No.1《/td》《td》北京《/td》《/tr》《trclass="success"》《td》No.2《/td》《td》上海《/td》《/tr》《trclass="warning"》《td》No.3《/td》《td》苏州《/td》《/tr》《trclass="danger"》《td》No.4《/td》《td》南京《/td》《/tr》《/tbody》《/table》《/div》显示效果：响应式表格通过把任意的.table包在.table-responsiveclass内，您可以让表格水平滚动以适应小型设备（小于768px）。当在大于768px宽的大型设备上查看时，您将看不到任何的差别。《divclass="table-responsive"》《tableclass="table"》《captionclass="text-center"》响应式表格布局《/caption》《thead》《tr》《th》编号《/th》《th》城市《/th》《/tr》《/thead》《tbody》《tr》《td》No.1《/td》《td》北京《/td》《/tr》《tr》《td》No.2《/td》《td》上海《/td》《/tr》《tr》《td》No.3《/td》《td》苏州《/td》《/tr》《tr》《td》No.4《/td》《td》南京《/td》《/tr》《/tbody》《/table》《/div》显示效果：如果还想继续学习的话大家可以点击这里进行学习，再为大家附一个精彩的专题：Bootstrap学习教程以上就是本文的全部内容，希望能够帮助大家更好的学习JS表格组件神器bootstraptable。
如何来使用bootstrap table
使用bootstrap table方法：bootstrap-table是在bootstrap-table的基础上写出来的，专门用于显示数据的表格插件。而bootstrap是来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，具有简便灵活，快速前端开发的优势。对与bootstrap在此就不在叙述。本文将着重讲解自己在项目中使用到bootstrap-table的一些理解和如何学习它。首先交代一下，jquery ，bootstrap ，bootstrap-table 三者之间的关系。bootstrap很多部分代码涉及到了jquery的，也就是说 bootstrap是依赖jquery的，而我们要使用的bootstrap-table则是在bootstrap基础上创造出来的，所以在使用bootstrap-table之前必须引用 jquery 和bootstrap的相关js，css文件。接着说，bootstrap-table的特点:与jquery-ui，jqgrid等表格显示插件而言，bootstrap-table扁平化，轻量级,对于一些轻量级的数据显示，他是绰绰有余，而对父子表等的支持也很好，最主要的是可以与bootstrap的其他标签无缝组合。
在使用bootstrap-table时，怎么获取选择行的内容
bootstrap table 获取选中行数据
var a= $table.bootstrapTable(’getSelections’);
if（a.length==1）{
console.log(a.id);
}else{alert("请选中一行")}
bootstraptable方法怎么使用
首先, 你要知道一个基础table的标签怎么去写, 只有知道这个基础, 你才能更好的用bootstrap中的table. html在这不过多说明. 既然看这篇文章, 肯定都能够理解. 然后现在就把bootstrap中的table来详细说明一下. 基础的table如下: 下面了解一下boots...
bootstrap table怎么用
bootstrap的table是handstable，你需要下载这个样式table的css和js；handsontable的核心方法如下：var hot = new Handsontable(document.getElementById(’example’),{data: data,colHeaders: , // 使用自定义列头rowHeaders: true,editor: false, // 禁用所有单元格colWidths: 150, // 设置所有列宽为150像素contextMenu: false, // 禁用右键菜单mergeCells: });
如何使用bootstrap-table进行后端排序
striped: true, //是否显示行间隔色 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） pagination: true, //是否显示分页（*） sortable: true, //是否启用排序 sortOrder: "desc", //排序方式 queryParams: queryParams,//传递参数（*） sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*） pageNumber:1, //初始化加载第一页，默认第一页 pageSize: 10, //每页的记录行数（*） pageList: , //可供选择的每页的行数（*） search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大 strictSearch: true, showColumns: true, //是否显示所有的列 showRefresh: true, //是否显示刷新按钮 minimumCountColumns: 2, //最少允许的列数 clickToSelect: true, //是否启用点击选中行 uniqueId: "roleNo", //每一行的唯一标识，一般为主键列 showToggle:true, //是否显示详细视图和列表视图的切换按钮 cardView: false, //是否显示详细视图 detailView: false, //是否显示父子表 responseHandler: handel, idField: "roleNo", columns: , silent: true, //刷新事件必须设置 formatLoadingMessage: function () { return "请稍等，正在加载中..."; }, formatNoMatches: function () { //没有匹配的结果 return ’无符合条件的记录’; }, onLoadError: function (data) { $(’#reportTable’).bootstrapTable(’removeAll’); } });
