bootstraptable表格可编辑，添加下拉列表，添加行，删除当前行

另一种写法

如果添加行数据的时候，前面编辑清空，记得在添加的formatter的input里给value绑定值， value="' + value + '"

博客参考链接

Bootstrap

提供了一个清晰的创建表格的布局。下表列出了

Bootstrap

支持的一些表格元素：

表格类

下表样式可用于表格中：

<tr>,

<th>

和

<td>

类

下表的类可用于表格的行或者单元格：

基本的表格

如果您想要一个只带有内边距（padding）和水平分割的基本表，请添加

class

table，如下面实例所示：

<div

class="row">

<table

class="table">

<caption

class="text-center">基本表格布局</caption>

<thead>

<tr>

<th>编号</th>

<th>城市</th>

</tr>

</thead>

<tbody>

<tr>

<td>No1</td>

<td>北京</td>

</tr>

<tr>

<td>No2</td>

<td>上海</td>

</tr>

</tbody>

</table>

</div>

显示效果：

可选的表格类

除了基本的表格标记和

table

class，还有一些可以用来为标记定义样式的类。下面将向您介绍这些类。

条纹表格

通过添加

table-striped

class，您将在

<tbody>

内的行上看到条纹，如下面的实例所示：

<div

class="row">

<table

class="table

table-striped">

<caption

class="text-center">条纹表格布局</caption>

<thead>

<tr>

<th>编号</th>

<th>城市</th>

</tr>

</thead>

<tbody>

<tr>

<td>No1</td>

<td>北京</td>

</tr>

<tr>

<td>No2</td>

<td>上海</td>

</tr>

<tr>

<td>No3</td>

<td>苏州</td>

</tr>

<tr>

<td>No4</td>

<td>南京</td>

</tr>

</tbody>

</table>

</div>

显示效果：

边框表格

通过添加

table-bordered

class，您将看到每个元素周围都有边框，且占整个表格是圆角的，如下面的实例所示：

<div

class="row">

<table

class="table

table-bordered">

<caption

class="text-center">边框表格布局</caption>

<thead>

<tr>

<th>编号</th>

<th>城市</th>

</tr>

</thead>

<tbody>

<tr>

<td>No1</td>

<td>北京</td>

</tr>

<tr>

<td>No2</td>

<td>上海</td>

</tr>

<tr>

<td>No3</td>

<td>苏州</td>

</tr>

<tr>

<td>No4</td>

<td>南京</td>

</tr>

</tbody>

</table>

</div>

显示效果：

悬停表格

通过添加

table-hover

class，当指针悬停在行上时会出现浅灰色背景，如下面的实例所示：

<div

class="row">

<table

class="table

table-hover">

<caption

class="text-center">悬停表格布局</caption>

<thead>

<tr>

<th>编号</th>

<th>城市</th>

</tr>

</thead>

<tbody>

<tr>

<td>No1</td>

<td>北京</td>

</tr>

<tr>

<td>No2</td>

<td>上海</td>

</tr>

<tr>

<td>No3</td>

<td>苏州</td>

</tr>

<tr>

<td>No4</td>

<td>南京</td>

</tr>

</tbody>

</table>

</div>

显示效果：

精简表格

通过添加

table-condensed

class，行内边距（padding）被切为两半，以便让表看起来更紧凑，如下面的实例所示。这在想让信息看起来更紧凑时非常有用。

<div

class="row">

<table

class="table

table-condensed">

<caption

class="text-center">精简表格布局</caption>

<thead>

<tr>

<th>编号</th>

<th>城市</th>

</tr>

</thead>

<tbody>

<tr>

<td>No1</td>

<td>北京</td>

</tr>

<tr>

<td>No2</td>

<td>上海</td>

</tr>

<tr>

<td>No3</td>

<td>苏州</td>

</tr>

<tr>

<td>No4</td>

<td>南京</td>

</tr>

</tbody>

</table>

</div>

显示效果：

上下文类

下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。

这些类可以用到<tr>、<td>、<th>中，如下面实例所示：

<div

class="row">

<table

class="table">

<caption

class="text-center">上下文表格布局</caption>

<thead>

<tr>

<th>编号</th>

<th>城市</th>

</tr>

</thead>

<tbody>

<tr

class="active">

<td>No1</td>

<td>北京</td>

</tr>

<tr

class="success">

<td>No2</td>

<td>上海</td>

</tr>

<tr

class="warning">

<td>No3</td>

<td>苏州</td>

</tr>

<tr

class="danger">

<td>No4</td>

<td>南京</td>

</tr>

</tbody>

</table>

</div>

显示效果：

响应式表格

通过把任意的

table

包在

table-responsive

class

内，您可以让表格水平滚动以适应小型设备（小于

768px）。当在大于

768px

宽的大型设备上查看时，您将看不到任何的差别。

<div

class="table-responsive">

<table

class="table">

<caption

class="text-center">响应式表格布局</caption>

<thead>

<tr>

<th>编号</th>

<th>城市</th>

</tr>

</thead>

<tbody>

<tr>

<td>No1</td>

<td>北京</td>

</tr>

<tr>

<td>No2</td>

<td>上海</td>

</tr>

<tr>

<td>No3</td>

<td>苏州</td>

</tr>

<tr>

<td>No4</td>

<td>南京</td>

</tr>

</tbody>

</table>

</div>

显示效果：

如果还想继续学习的话大家可以点击这里进行学习，再为大家附一个精彩的专题：Bootstrap学习教程

以上就是本文的全部内容，希望能够帮助大家更好的学习JS表格组件神器bootstrap

table。

前端代码块

<table id="test-table" class="col-xs-12" data-toolbar="#toolbar">

function initTable(){

$('#test-table')bootstrapTable({

method: 'get',

toolbar: '#toolbar', //工具按钮用哪个容器

striped: true, //是否显示行间隔色

cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（）

pagination: true, //是否显示分页（）

sortable: false, //是否启用排序

sortOrder: "asc", //排序方式

pageNumber:1, //初始化加载第一页，默认第一页

pageSize: 10, //每页的记录行数（）

pageList: [10, 25, 50, 100], //可供选择的每页的行数（）

url: "/testProject/page4listjson",//这个接口需要处理bootstrap table传递的固定参数

queryParamsType:'', //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort

// 设置为 '' 在这种情况下传给服务器的参数为：pageSize,pageNumber

//queryParams: queryParams,//前端调用服务时，会默认传递上边提到的参数，如果需要添加自定义参数，可以自定义一个函数返回请求参数

sidePagination: "server", //分页方式：client客户端分页，server服务端分页（）

//search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大

strictSearch: true,

//showColumns: true, //是否显示所有的列

//showRefresh: true, //是否显示刷新按钮

minimumCountColumns: 2, //最少允许的列数

clickToSelect: true, //是否启用点击选中行

searchOnEnterKey: true,

columns: [{

field: 'id',

title: 'id',

align: 'center'

}, {

field: 'testkey',

title: '测试标识',

align: 'center'

}, {

field: 'testname',

title: '测试名字',

align: 'center'

},{

field: 'id',

title: ' *** 作',

align: 'center',

formatter:function(value,row,index){

//通过formatter可以自定义列显示的内容

//value：当前field的值，即id

//row：当前行的数据

var a = '<a href="" >测试</a>';

}

}],

pagination:true

});

}

在前端通过请求获取table数据时，bootstrap table会默认拼一个 searchText的参数，来支持查询功能。

服务端代码

@RequestMapping(value = "/page4listjson")

public void page4list(Integer pageSize, Integer pageNumber, String searchText, >

以上就是关于bootstraptable表格可编辑，添加下拉列表，添加行，删除当前行全部的内容，包括:bootstraptable表格可编辑，添加下拉列表，添加行，删除当前行、JS组件Bootstrap Table布局详解、bootstrap table服务器分页的问题（PHP）等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！