bootstraptable bootstrap

编程之家2026-07-01927次浏览

大家好，感谢邀请，今天来为大家分享一下bootstraptable的问题，以及和bootstrap的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！

在Bootstrap里怎么操作table

这次给大家带来在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的其他标签无缝组合。

1、引入js、css

2、table数据填充

bootStrap table获取数据有两种方式，一是通过table的data-url属性指定数据源，二是通过JavaScript初始化表格时指定url来获取数据

<thead>

...

</thead>

</table>

...$('#table').bootstrapTable({

url:'data.json'

});

第二种方式较第一种而言在处理复杂数据时更为灵活，一般使用第二种方式来进行table数据填充。

$(function(){

//1.初始化Table

var oTable= new TableInit();

oTable.Init();

//2.初始化Button的点击事件

/* var oButtonInit= new ButtonInit();

oButtonInit.Init();*/

});

var TableInit= function(){

var oTableInit= new Object();

//初始化Table

oTableInit.Init= function(){

$('#tradeList').bootstrapTable({

url:'/VenderManager/TradeList',//请求后台的URL（*）

method:'post',//请求方式（*）

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

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

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

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

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

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

queryParams: oTableInit.queryParams,//传递参数（*）

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

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

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

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

strictSearch: true,

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

height: 460,//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度

uniqueId:"id",//每一行的唯一标识，一般为主键列

cardView: false,//是否显示详细视图

detailView: false,//是否显示父子表

columns: [{

field:'id',

title:'序号'

},{

field:'liushuiid',

title:'交易编号'

},{

field:'orderid',

title:'订单号'

},{

field:'receivetime',

title:'交易时间'

},{

field:'price',

title:'金额'

},{

field:'coin_credit',

title:'投入硬币'

},{

field:'bill_credit',

title:'投入纸币'

},{

field:'changes',

title:'找零'

},{

field:'tradetype',

title:'交易类型'

},{

field:'goodmachineid',

title:'货机号'

},{

field:'inneridname',

title:'货道号'

},{

field:'goodsName',

title:'商品名称'

},{

field:'changestatus',

title:'支付'

},{

field:'sendstatus',

title:'出货'

},]

});

};

//得到查询的参数

oTableInit.queryParams= function(params){

var temp={//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的

limit: params.limit,//页面大小

offset: params.offset,//页码

sdate:$("#stratTime").val(),

edate:$("#endTime").val(),

sellerid:$("#sellerid").val(),

orderid:$("#orderid").val(),

CardNumber:$("#CardNumber").val(),

maxrows: params.limit,

pageindex:params.pageNumber,

portid:$("#portid").val(),

CardNumber:$("#CardNumber").val(),

tradetype:$('input:radio[name="tradetype"]:checked').val(),

success:$('input:radio[name="success"]:checked').val(),

};

return temp;

};

return oTableInit;

};

field字段必须与服务器端返回的字段对应才会显示出数据。

3、后台获取数据

a、servlet获取数据

BufferedReader bufr= new BufferedReader(

new InputStreamReader(request.getInputStream(),"UTF-8"));

StringBuilder sBuilder= new StringBuilder("");

String temp="";

while((temp= bufr.readLine())!= null){

sBuilder.append(temp);

}

bufr.close();

String json= sBuilder.toString();

JSONObject json1= JSONObject.fromObject(json);

String sdate= json1.getString("sdate");//通过此方法获取前端数据

...

b、springMvc Controller里面对应的方法获取数据

public JsonResult GetDepartment(int limit, int offset, string orderId, string SellerId，PortId，CardNumber，Success，maxrows，tradetype)

{

...

}相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

bootstrap table 子表使用

要实现Bootstrap Table的子表功能，必须设置的核心属性是detailView: true和onExpandRow回调函数。以下是详细说明和优化建议：

一、必需属性解析detailView: true

作用：启用表格的行展开功能，显示子表容器。

示例：在总表和子表的初始化配置中均需设置此属性。

onExpandRow回调函数

作用：定义行展开时的逻辑，如加载子表数据、渲染子表等。

关键点：

必须处理null或未定义的情况，避免触发BootstrapTable.prototype.trigger报错。

回调参数：index（行索引）、row（行数据）、$detail（子表容器DOM对象）。

二、子表实现优化方案1.修复onExpandRow为null时的报错问题原因：当onExpandRow未定义或为null时，Bootstrap Table内部仍尝试触发事件，导致this.options[BootstrapTable.EVENTS[name]].apply()报错。解决方案：在子表初始化时强制覆盖onExpandRow为空函数：

self.buildChildTable= function($el, columns, data, onExpandRow){ const finalOnExpandRow= typeof onExpandRow==='function'? onExpandRow: function(index, row,$detail){ return false;};$el.bootstrapTable({ columns: columns, data: data, detailView: true, onExpandRow: finalOnExpandRow});};2.三层子表展开的完整流程总表初始化：

self.dataRender= function(tableId, fields, list){ const config={ columns: fields, data: list, detailView: true, onExpandRow: self.onExpandRow//绑定总表展开回调};$("#"+ tableId).bootstrapTable(config);};总表展开回调（加载第一层子表）：

self.onExpandRow= function(index, row,$detail){//假设子表数据在row.list中 self.expandTable($detail, self.subfields,//子表列配置 row.list,//子表数据 self.onChildExpandRow//传递子表展开回调);};子表展开回调（加载第二层子表）：

self.onChildExpandRow= function(index, row,$detail){ if(!row.order_code) return false;//数据校验//异步加载子表数据 self.getPayments(row.order_code, function(list){ self.expandTable($detail, self.paymentfields,//第二层子表列配置 list, null//无更多子表时传null);});};通用子表渲染方法：

self.expandTable= function($detail, columns, data, onExpandRow){//清空容器并创建子表 const$table=$detail.html('<table></table>').find('table'); self.buildChildTable($table, columns, data, onExpandRow);};三、关键注意事项事件触发安全处理

在buildChildTable中统一处理onExpandRow的默认值，避免直接传递null。

DOM操作优化

使用$detail.html('<table></table>')而非直接创建，确保容器正确初始化。

异步数据加载

在onChildExpandRow中通过回调函数（如self.getPayments）获取数据后，再渲染子表。

列配置隔离

每层子表需独立维护列配置（如self.subfields、self.paymentfields），避免冲突。

四、完整代码结构示例//工具方法：生成唯一IDself.vid= function(){ return'container_'+ Math.random().toString(36).substr(2);};//初始化总表self.dataRender('table', self.fields, self.list());//总表展开回调self.onExpandRow= function(index, row,$detail){ self.expandTable($detail, self.subfields, row.list, self.onChildExpandRow);};//子表展开回调（第二层）self.onChildExpandRow= function(index, row,$detail){ if(!row.order_code) return false; self.getPayments(row.order_code, function(list){ self.expandTable($detail, self.paymentfields, list, null);});};//子表构建核心方法self.buildChildTable= function($el, columns, data, onExpandRow){ const safeOnExpandRow= typeof onExpandRow==='function'? onExpandRow: function(){ return false;};$el.bootstrapTable({ columns: columns, data: data, detailView: true, onExpandRow: safeOnExpandRow});};//子表渲染入口self.expandTable= function($detail, columns, data, onExpandRow){$detail.html('<table></table>').find('table').each(function(){ self.buildChildTable($(this), columns, data, onExpandRow);});};通过以上优化，可解决onExpandRow为null时的报错问题，并实现稳定的三层子表展开功能。核心逻辑在于统一处理回调函数的默认值和隔离每层子表的配置与数据。

bootstrap-table 表格行内编辑实现

bootstrap-table表格行内编辑可通过onClickCell方法结合contenteditable属性实现，核心逻辑是点击单元格时使其可编辑，失去焦点时更新数据。以下是具体实现步骤和代码解析：

1.效果展示

（点击单元格后直接编辑内容，失去焦点时保存数据）2. HTML结构<div class="table-box" style="margin: 20px;"><div id="toolbar"><button id="button" class="btn btn-default">insertRow</button><button id="getTableData" class="btn btn-default">getTableData</button></div><table id="table"></table></div>关键点：定义一个工具栏（#toolbar），包含插入行和获取表格数据的按钮。

表格容器使用<table id="table">，后续通过 JavaScript初始化。

3. JavaScript实现初始化表格$(function(){ let$table=$('#table'); let$button=$('#button'); let$getTableData=$('#getTableData');//初始化表格配置$table.bootstrapTable({ url:'data2.json',//数据源 toolbar:'#toolbar',//绑定工具栏 clickEdit: true,//启用点击编辑（需自定义逻辑） showToggle: true,//显示切换视图按钮 pagination: true,//显示分页 showColumns: true,//显示列选择器 showPaginationSwitch: true,//显示分页切换按钮 showRefresh: true,//显示刷新按钮 columns: [{ checkbox: true},//复选框列{ field:'id', title:'Item ID'},{ field:'name', title:'Item Name'},{ field:'price', title:'Item Price'} ],//点击单元格事件 onClickCell: function(field, value, row,$element){$element.attr('contenteditable', true);//使单元格可编辑$element.blur(function(){ let index=$element.parent().data('index');//获取行索引 let tdValue=$element.html();//获取编辑后的值 saveData(index, field, tdValue);//保存数据});}});});关键配置：onClickCell：点击单元格时触发，通过设置contenteditable=true使其可编辑，并在失去焦点时调用saveData更新数据。

url：指定数据源（如data2.json）。

columns：定义表格列，field需与数据字段名一致。

插入行与获取数据//插入新行（默认在第一行插入空数据）$button.click(function(){$table.bootstrapTable('insertRow',{ index: 0, row:{ id:'', name:'', price:''}});});//获取表格数据（弹窗显示JSON格式）$getTableData.click(function(){ alert(JSON.stringify($table.bootstrapTable('getData')));});保存数据function saveData(index, field, value){$table.bootstrapTable('updateCell',{ index: index,//行索引 field: field,//列名 value: value//新值});}关键方法：updateCell：更新指定单元格的数据，参数需包含行索引、列名和新值。

4.数据源示例（data2.json）[{"id": 1,"name":"Item 1","price":"￥1"},{"id": 2,"name":"Item 2","price":"￥2"},{"id": 3,"name":"Item 3","price":"￥3"}]5.依赖引入<link rel="stylesheet" href="js/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css"><link rel="stylesheet" href="js/bootstrap-table/1.12.1/bootstrap-table.min.css"><script src="js/jquery.min.js"></script><script src="js/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><script src="js/bootstrap-table/1.12.1/bootstrap-table.min.js"></script><script src="js/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>6.实现原理总结点击编辑：通过onClickCell事件为单元格添加contenteditable属性，使其可编辑。数据保存：监听blur事件，获取编辑后的值并通过updateCell更新数据。动态操作：支持插入新行（insertRow）和获取全部数据（getData）。7.注意事项数据验证：实际应用中需在saveData中添加数据验证逻辑（如非空、格式等）。性能优化：大数据量时建议启用虚拟滚动或分页加载。兼容性：contenteditable在部分旧浏览器中可能存在样式或行为差异。通过以上步骤，即可实现一个功能完整的 bootstrap-table行内编辑表格。

bootstraptable和bootstrap的问题分享结束啦，以上的文章解决了您的问题吗？欢迎您下次再来哦！

基础代码大全，一键生成代码免费c语言入门到精通要学多久？c语言普通人能学会吗