BootstrapTable简单的使用

Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。
本篇文章介绍bootstrap-table的简单的使用（查询，新增，修改，删除），在看之前，需要有一点点bootstrap的基础知识，很多bootstrap的相关知识点就不介绍了，只讲bootstrap-table的相关内容。

引入相关文件

bootstrap-table 的使用非常简单，只需要像引用JQuery一样将js文件以及css文件引入到html文档中即可，为了更快的访问js文件，可以访问cdn，这里将cdn链接放上，如果没有链接至互联网，请将文件下载到本地，在引入至项目中，下面是引用的文件，文件存放在了cdn节点

<scriptsrc="https://cdn.staticfile.org/jquery/2.1.0/jquery.min.js"></script>/<!--JQuery--><scriptsrc="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><!--bootstrap--><scriptsrc="http://cdn.staticfile.org/bootstrap-table/1.9.0/bootstrap-table.min.js"></script><!--bootstrap-table--><scriptsrc="http://cdn.staticfile.org/bootstrap-table/1.9.0/locale/bootstrap-table-zh-CN.min.js"></script><!--汉化文件-->

可以看到引入的文件有JQuery，由于bootstrap是基于JQuery 的一个框架，引入Bootstrap文件之前需要引入JQuery，而bootstrap-table是基于bootstrap的，所以必须引入JQuery；下面是Bootstrap框架的js，继续往下是bootstrap-table的js文件，最下面是汉化的js文件。引入js文件之后，为了美观还需要引入css（外部样式表）文件，也是bootstrap框架的文件，如果不引入，没有样式，界面很不美观；下面是需要引入的bootstrap的css文件和bootstrap-table需要用到的css文件。

<linkrel="stylesheet"href="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><linkrel="stylesheet"href="http://cdn.staticfile.org/bootstrap-table/1.9.0/bootstrap-table.min.css">

简单的使用

首先，我把这个案例的全部html代码和css代码放上去，然后一点一点拆解

<!DOCTYPEhtml><htmllang="zh"><head><metacharset="utf-8"><title>学生信息</title><linkrel="stylesheet"href="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><linkrel="stylesheet"href="http://cdn.staticfile.org/bootstrap-table/1.9.0/bootstrap-table.min.css"><!--    <link rel="stylesheet" href="/css/style.min862f.css">--><scriptsrc="https://cdn.staticfile.org/jquery/2.1.0/jquery.min.js"></script><!----><scriptsrc="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><scriptsrc="http://cdn.staticfile.org/bootstrap-table/1.9.0/bootstrap-table.min.js"></script><scriptsrc="http://cdn.staticfile.org/bootstrap-table/1.9.0/locale/bootstrap-table-zh-CN.min.js"></script></head><body><navclass="navbar navbar-default"><divclass="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><divclass="navbar-header"><buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1"aria-expanded="false"><spanclass="sr-only">Toggle navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="#">Brand</a></div><!-- Collect the nav links, forms, and other content for toggling --><divclass="collapse navbar-collapse"id="bs-example-navbar-collapse-1"><formclass="navbar-form navbar-left"id="searchForm"><divclass="form-group"><inputtype="text"class="form-control"id="searStr"name="searStr"placeholder="Search"></div><buttontype="submit"class="btn btn-default">搜索</button><buttontype="button"class="btn btn-default"onclick="(function(){$('#stuDetailModal').modal('show')})()">新增</button></form></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav><divclass="container"><divclass="row"><tableid="table"></table></div></div><divclass="modal fade"tabindex="-1"role="dialog"id="stuDetailModal"><divclass="modal-dialog"role="document"style="width: 70%"><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><spanaria-hidden="true">&times;</span></button><h4class="modal-title">学生信息</h4></div><divclass="modal-body"><inputtype="hidden"name="stuIndex"id="stuIndex"><divclass="form-horizontal"><divclass="form-group"><labelclass="col-sm-2 control-label">学号</label><divclass="col-sm-3"><inputtype="text"class="form-control"id="stuId"name="stuId"value=""disabled="disabled"readonly="readonly"/></div><labelclass="col-sm-2 control-label">姓名</label><divclass="col-sm-3"><inputtype="text"class="form-control"id="stuName"name="stuName"value=""/></div></div><divclass="form-group"><labelclass="col-sm-2 control-label">性别</label><divclass="col-sm-3"><inputtype="text"class="form-control"id="stuGender"name="stuGender"value=""/></div><labelclass="col-sm-2 control-label">年龄</label><divclass="col-sm-3"><inputtype="text"class="form-control"id="stuAge"name="stuAge"value=""/></div></div><divclass="form-group"><labelclass="col-sm-2 control-label">电话</label><divclass="col-sm-3"><inputtype="text"class="form-control"id="stuPhone"name="stuPhone"value=""/></div></div></div></div><divclass="modal-footer"><buttontype="button"class="btn btn-sm btn-primary"onclick="saveStudentInfo()">保存</button><buttontype="button"class="btn btn-sm btn-default"data-dismiss="modal">关闭</button></div></div><!-- /.modal-content --></div><!-- /.modal-dialog --></div><!-- /.modal --><scripttype="text/javascript">functionqueryParams(params){return{type:"owner",direction:"desc",limit: params.limit,offset: params.offset}}$(function(){searchMusicList();})functionshowStudentInfoDetailModal(rid){$('#stuDetailModal').modal('show');
        $.get("/students3/getStudentByStuId",{stuId:rid},function(res){
            res =JSON.parse(res);if(res.result =='success'){if(res !=null){$("#stuId").val(res.StudentInfo.stu_id);$("#stuName").val(res.StudentInfo.stu_name);$("#stuGender").val(res.StudentInfo.stu_gender);$("#stuPhone").val(res.StudentInfo.stu_phone);$("#stuAge").val(res.StudentInfo.stu_age);}else{alert('没有找到学生信息');}}elseif(res.result =='fail'){alert('获取学生信息失败!');}else{alert(res.result);}})}functionsearchMusicList(){$('#table').bootstrapTable('destroy');$('#table').bootstrapTable({url:"/students3/getAllStudent",height:500,dataType:"json",pagination:true,pageSize:30,queryParams:queryParams,sortable:true,sidePagination:"server",pageList:[30,50],columns:[{title:'序号',width:"5%",field:'rowNo',},{field:'stu_id',title:'学号',width:"10%",sortable:true},{field:'stu_name',title:'姓名',width:"10%",sortable:true},{field:'stu_age',title:'年龄',width:"10%",sortable:true},{field:'stu_gender',sortable:true,title:'性别',width:"10%",formatter:function(value, row, index){if(value =='M')return'男';elseif(value =='F')return'女';elsereturn value;}},{field:'stu_phone',title:'联系方式',width:"10%",},{title:'操作',class:'text-center',width:'20%',formatter:function(value, row, index){let res ="<button class='btn btn-sm btn-info' οnclick='showStudentInfoDetailModal("+ row.stu_id +")' >详情</button>&nbsp;";
                    res +="<button class='btn btn-sm btn-primary' οnclick='modifyStudentInfoDetailModal("+index +")'>修改</button>&nbsp;";
                    res +="<button class='btn btn-sm btn-danger' οnclick='removeStudentBuId("+index +")'>删除</button>";return res;}},],onPostBody:function(value){// 解决模态框加载table数据的时候，底部数据超出表格的问题$(".fixed-table-container").css('padding-bottom','37px');}});returnfalse;}$("#searchForm").submit(function(e){let option =$('#table').bootstrapTable('getOptions');
        option.queryParams=function(params){let searStr = document.getElementById('searStr').value;
            params.stuname = searStr;return params;}$('#table').bootstrapTable('refresh',option);returnfalse;})functionmodifyStudentInfoDetailModal(i){const stuInfo =$('#table').bootstrapTable('getData')[i];$("#stuId").val(stuInfo.stu_id);$("#stuName").val(stuInfo.stu_name);$("#stuGender").val(stuInfo.stu_gender);$("#stuPhone").val(stuInfo.stu_phone);$("#stuAge").val(stuInfo.stu_age);$("#stuIndex").val(i);$('#stuDetailModal').modal('show');}functionsaveStudentInfo(){const stuId =$("#stuId").val();const stuName =$("#stuName").val();const stuGender =$("#stuGender").val();const stuPhone =$("#stuPhone").val();const stuAge =$("#stuAge").val();const stuIndex =$("#stuIndex").val();const student ={stu_id: stuId,stu_name: stuName,stu_gender: stuGender,stu_phone: stuPhone,stu_age: stuAge};
        $.post("/students3/saveStudentInfo",student,function(res){
           res =JSON.parse(res);if(res.result =='success'){if(res.flag ==true){$('#stuDetailModal').modal('hide');alert("更新成功！");if(stuId ==''|| stuId ==null){
                           student.stu_id = res.stuId;$('#table').bootstrapTable('prepend', student);}else{$("#table").bootstrapTable("updateRow",{index:stuIndex,//更新行索引，0起始replace:false,//合并or替换行数据，true替换，false合并，默认falserow:student
                       });}}else{alert('学生信息更新失败，请检查！');$('#stuDetailModal').modal('hide');}}elseif(res.result =='fail'){alert('学生信息更新失败');}else{alert(res.result);}})}functionremoveStudentBuId(i){const stuInfo =$('#table').bootstrapTable('getData')[i];let flag =confirm(`确定要删除姓名为： ${stuInfo.stu_name} 学号为： ${stuInfo.stu_id} 的学生吗？`);if(!flag)returnfalse;
        $.post("/students3/removeStudentBuId", stuInfo,function(res){
            res =JSON.parse(res);if(res.result =='success'){if(res.flag ==true){$("#table").bootstrapTable('remove',{field:'stu_id',values:[stuInfo.stu_id]});alert("删除成功！");}else{alert('学生信息删除失败，请检查！');$('#stuDetailModal').modal('hide');}}elseif(res.result =='fail'){alert('学生信息删除失败');}else{alert(res.result);}})}$('#stuDetailModal').on('hidden.bs.modal',function(){//学生信息模态框关闭，清空缓存$("#stuId").val('');$("#stuName").val('');$("#stuGender").val('');$("#stuPhone").val('');$("#stuAge").val('');$("#stuIndex").val('');})</script></body></html>

bootstrap-table的初始化

首先，bootstrap-table渲染数据使用的是table标签，需要创建一个table标签用来渲染等会即将出现的内容，只需要一个table标签然后配置一下相关参数bootstrap-table会帮我们渲染出相对应的界面，生成相关标签。下面是用来等会渲染数据的table，id为table，外层div的container类是bootstrap的样式，为了拉开两边的距离。row的类是定义了这是一行，这样，row会被撑开，不至于布局错乱。

<divclass="container"><divclass="row"><tableid="table"></table></div></div>

接下来看bootstrap-table的js代码

functionqueryParams(params){return{type:"owner",direction:"desc",limit: params.limit,offset: params.offset}}functionsearchMusicList(){$('#table').bootstrapTable('destroy');$('#table').bootstrapTable({url:"/students3/getAllStudent",height:500,dataType:"json",pagination:true,pageSize:30,queryParams:queryParams,sortable:true,sidePagination:"server",pageList:[30,50],columns:[{title:'序号',width:"5%",field:'rowNo',},{field:'stu_id',title:'学号',width:"10%",sortable:true},{field:'stu_name',title:'姓名',width:"10%",sortable:true},{field:'stu_age',title:'年龄',width:"10%",sortable:true},{field:'stu_gender',sortable:true,title:'性别',width:"10%",formatter:function(value, row, index){if(value =='M')return'男';elseif(value =='F')return'女';elsereturn value;}},{field:'stu_phone',title:'联系方式',width:"10%",},{title:'操作',class:'text-center',width:'20%',formatter:function(value, row, index){let res ="<button class='btn btn-sm btn-info' οnclick='showStudentInfoDetailModal("+ row.stu_id +")' >详情</button>&nbsp;";
                    res +="<button class='btn btn-sm btn-primary' οnclick='modifyStudentInfoDetailModal("+index +")'>修改</button>&nbsp;";
                    res +="<button class='btn btn-sm btn-danger' οnclick='removeStudentBuId("+index +")'>删除</button>";return res;}},],onPostBody:function(value){// 解决模态框加载table数据的时候，底部数据超出表格的问题$(".fixed-table-container").css('padding-bottom','37px');}});returnfalse;}

渲染数据很简单，只需要配置这些就能够将数据渲染出来，更多的配置讲解这里也就不过多介绍了，文档写得比我要更清楚，这里主要讲简单的应用，一些简单的增删改查。bootstrap-table需要的数据格式如下

{"result":"success","lastNum":0,"total":1031,"recordsFiltered":1031,"rows":[{"rowNo":1,"stu_id":2,"stu_name":"张三","stu_gender":"男","stu_age":11,"stu_phone":"15036810833"},{"rowNo":2,"stu_id":3,"stu_name":"张五","stu_gender":"男","stu_age":18,"stu_phone":"15036810833"}],"recordsTotal":1031}

这里过多的重复的数据删除了，不做过多展示，这里面的参数“total”是一共有多少条数据，“rows”是具体的数据，如果响应的数据不是这种，可以用bootstrap-table里面的“responseHandler”方法进行格式化，比如响应的数据是这样的

{"result":"success","allCount":1031,"data":[{"rowNo":1,"stu_id":2,"stu_name":"张三","stu_gender":"男","stu_age":11,"stu_phone":"15036810833"},{"rowNo":2,"stu_id":3,"stu_name":"张五","stu_gender":"男","stu_age":18,"stu_phone":"15036810833"}],}

这样的数据bootstrap-table是不能识别的，需要格式化成bootstrap-table能识别的数据格式，这时候就可以用“responseHandler”进行格式化，写法如下

$('#table').bootstrapTable('destroy');$('#table').bootstrapTable({url:"/students3/getAllStudent",height:500,dataType:"json",pagination:true,pageSize:30,queryParams:queryParams,sortable:true,responseHandler:function(res){return{"total":res.allCount,"rows":res.data
                }},sidePagination:"server",pageList:[30,50],columns:[{title:'序号',width:"5%",field:'rowNo',},{field:'stu_id',title:'学号',width:"10%",sortable:true},{field:'stu_name',title:'姓名',width:"10%",sortable:true},{field:'stu_age',title:'年龄',width:"10%",sortable:true},{field:'stu_gender',sortable:true,title:'性别',width:"10%",formatter:function(value, row, index){if(value =='M')return'男';elseif(value =='F')return'女';elsereturn value;}},{field:'stu_phone',title:'联系方式',width:"10%",},{field:'stu_id',title:'操作',class:'text-center',width:'20%',formatter:function(value, row, index){let res ="<button class='btn btn-sm btn-info' οnclick='showStudentInfoDetailModal("+ row.stu_id +")' >详情</button>&nbsp;";
                    res +="<button class='btn btn-sm btn-primary' οnclick='modifyStudentInfoDetailModal("+index +")'>修改</button>&nbsp;";
                    res +="<button class='btn btn-sm btn-danger' οnclick='removeStudentBuId("+index +")'>删除</button>";return res;}}]});returnfalse;}

这样经过格式化，可以不用改变后台的响应数据格式也能渲染出来，说完数据怎么渲染下面说一下数据的查询，其实bootstrap-table帮我们存了一份虚拟的数据在里面，当我们需要的时候就可以拿出来，哪怕渲染的时候没有将他显示出来，也是可以拿到的，下面介绍一下怎么取出来。观察上面的代码可以看到在操作列是有表达式的，以及性别列也是有表达式的，就是bootstrap-table的columns属性，这是一个数组，数组里面是一个一个的对象，

{field:'stu_id',title:'操作',class:'text-center',width:'20%',formatter:function(value, row, index){let res ="<button class='btn btn-sm btn-info' οnclick='showStudentInfoDetailModal("+ row.stu_id +")' >详情</button>&nbsp;";
                    res +="<button class='btn btn-sm btn-primary' οnclick='modifyStudentInfoDetailModal("+index +")'>修改</button>&nbsp;";
                    res +="<button class='btn btn-sm btn-danger' οnclick='removeStudentBuId("+index +")'>删除</button>";return res;}}

对象里面的“formatter”属性可以是一个方法，这个方法有三个形参，分别是“value”, “row”, “index”，第一个就是当前列"field"属性里面的值，第二个“row”是当前行的对象也就是前面讲到的后台渲染数据的时候“rows”里面的每一个数据

{"rowNo":2,"stu_id":3,"stu_name":"张五","stu_gender":"男","stu_age":18,"stu_phone":"15036810833"}

通过row.就能进行访问，“index”是当前行的索引，比如第一行数据是 0 第二行数据是 1，可以看到我写的函数里面写了一些html代码，通过拼接的方式将数据渲染到html上，我写的html代码是三个按钮，一个查看，一个修改，一个删除，这里详情就不讲了，就是简单的查看。

查询，修改

下面直接讲修改，修改的方法如下（其实上面也有了，不过为了不上下翻代码就写在这吧）

/**
     * 将学生信息渲染到对应表单里面
     * @param Number i 操作的索引
     */functionmodifyStudentInfoDetailModal(i){const stuInfo =$('#table').bootstrapTable('getData')[i];$("#stuId").val(stuInfo.stu_id);$("#stuName").val(stuInfo.stu_name);$("#stuGender").val(stuInfo.stu_gender);$("#stuPhone").val(stuInfo.stu_phone);$("#stuAge").val(stuInfo.stu_age);$("#stuIndex").val(i);//记录操作索引$('#stuDetailModal').modal('show');//打开模态框}functionsaveStudentInfo(){const stuId =$("#stuId").val();const stuName =$("#stuName").val();const stuGender =$("#stuGender").val();const stuPhone =$("#stuPhone").val();const stuAge =$("#stuAge").val();const stuIndex =$("#stuIndex").val();const student ={stu_id: stuId,stu_name: stuName,stu_gender: stuGender,stu_phone: stuPhone,stu_age: stuAge};
        $.post("/students3/saveStudentInfo",student,function(res){
           res =JSON.parse(res);if(res.result =='success'){if(res.flag ==true){$('#stuDetailModal').modal('hide');alert("更新成功！");if(stuId ==''|| stuId ==null){
                           student.stu_id = res.stuId;$('#table').bootstrapTable('prepend', student);}else{$("#table").bootstrapTable("updateRow",{index:stuIndex,//更新行索引，0起始replace:false,//合并or替换行数据，true替换，false合并，默认falserow:student
                       });}}else{alert('学生信息更新失败，请检查！');$('#stuDetailModal').modal('hide');}}elseif(res.result =='fail'){alert('学生信息更新失败');}else{alert(res.result);}})}

modifyStudentInfoDetailModal 这个方法是将数据渲染到页面上，形参i就是当前要操作数据的索引，这个是bootstrap-table需要用到的，取到对应的数据之后，渲染到html上，然后记录下当前操作的索引，获取数据方式很简单，使用 “bootstrapTable(‘getData’)”就能拿到，这个方法返回值是数组，然后根据索引取对应的数据就行了。接下来讲保存，保存其实就是搜集表单信息，然后讲数据发送到后台，然后等待响应结果，响应成功之后刷新表格或者将数据更新到bootstrap-table，这里我选择的是后者，相信大多数人和我一样，在编程的时候尽量减少服务器和客户端传输的数据量，比如这个更新学生信息的例子，如果直接调用$(‘#table’).bootstrapTable(‘refresh’)会更简单，但是这样会导致大量无用数据在网络中传输，因为我们要的就是一个修改的结果，数据也是前台传过去的，服务器也会响应一个结果，成功或者失败，所以直接拿当前结果更新到bootstrap-table中更好，而不是增加数据库的查询，增加前后台无用的交互。回到正题，这里保存很简单，搜集表格信息，找到操作的索引，然后调用bootstrap的"updateRow"方法将数据渲染到表格中。

删除

接下来讲一下删除，删除更简单了，方法如下

functionremoveStudentBuId(i){const stuInfo =$('#table').bootstrapTable('getData')[i];let flag =confirm(`确定要删除姓名为： ${stuInfo.stu_name} 学号为： ${stuInfo.stu_id} 的学生吗？`);if(!flag)returnfalse;
        $.post("/students3/removeStudentBuId", stuInfo,function(res){
            res =JSON.parse(res);if(res.result =='success'){if(res.flag ==true){$("#table").bootstrapTable('remove',{field:'stu_id',values:[stuInfo.stu_id]});alert("删除成功！");}else{alert('学生信息删除失败，请检查！');$('#stuDetailModal').modal('hide');}}elseif(res.result =='fail'){alert('学生信息删除失败');}else{alert(res.result);}})}

根据索引拿到要删除的数据，提示一下，这里我将整个student都传输到后台了，其实只要能识别是这个学生就行，不要把整个对象都传过去，然后更新bootstrap-table的时候调用bootstrap-table的remove方法就行了，需要的参数也是和服务器删除相似（其实服务器是假删除），只需要能标识出这个学生就行。

新增

点击搜索旁边的新增按钮，输入学生信息，和修改是一样的，这个判定是由后台进行判定，如果传过去的数据有学生id就是修改，否则为新增，模态框每次关闭都会清空相关信息，不用担心数据残留，这里的保存还是有bug的，比如序号没有更新，由于序号是后后台生成的，所以需要重新后台刷新数据，这里没有从后台取数据，所以序号是错的，但是可以通过前端写js进行修复，以后有时间再处理这个bug

总结

很简单的操作，主要讲bootstrap-table 的简单使用

标签： bootstrap javascript 前端

本文转载自: https://blog.csdn.net/FeiSir_PC/article/details/129676306
版权归原作者 FeiSir_PC 所有，如有侵权，请联系我们删除。

BootstrapTable简单的使用

引入相关文件

简单的使用

bootstrap-table的初始化

查询，修改

删除

新增

总结

发表评论

“BootstrapTable简单的使用”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航