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

引入相关文件

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

    <script src="https://cdn.staticfile.org/jquery/2.1.0/jquery.min.js"></script>/<!--JQuery-->
    <script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><!--bootstrap-->
    <script src="http://cdn.staticfile.org/bootstrap-table/1.9.0/bootstrap-table.min.js"></script><!--bootstrap-table-->
    <script src="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文件。

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

简单的使用

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

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>学生信息</title>
    <link rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://cdn.staticfile.org/bootstrap-table/1.9.0/bootstrap-table.min.css">
<!--    <link rel="stylesheet" href="/css/style.min862f.css">-->
    <script src="https://cdn.staticfile.org/jquery/2.1.0/jquery.min.js"></script><!---->
    <script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="http://cdn.staticfile.org/bootstrap-table/1.9.0/bootstrap-table.min.js"></script>
    <script src="http://cdn.staticfile.org/bootstrap-table/1.9.0/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <form class="navbar-form navbar-left" id="searchForm">
                <div class="form-group">
                    <input type="text" class="form-control" id="searStr" name="searStr" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
                <button type="button" class="btn btn-default" onclick="(function(){$('#stuDetailModal').modal('show')})()">新增</button>
            </form>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div class="container">
    <div class="row">
        <table id="table"></table>
    </div>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="stuDetailModal">
    <div class="modal-dialog" role="document" style="width: 70%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">学生信息</h4>
            </div>
            <div class="modal-body">
                <input type="hidden" name="stuIndex" id="stuIndex">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">学号</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="stuId" name="stuId" value="" disabled="disabled" readonly="readonly"/>
                        </div>

                        <label class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="stuName" name="stuName" value="" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="stuGender" name="stuGender" value="" />
                        </div>
                        <label class="col-sm-2 control-label">年龄</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="stuAge" name="stuAge" value="" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">电话</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="stuPhone" name="stuPhone" value="" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="saveStudentInfo()">保存</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script type="text/javascript">
    function queryParams(params) {
        return {type: "owner", direction: "desc", limit: params.limit, offset: params.offset}
    }
    $(function(){
        searchMusicList();
    })
    function showStudentInfoDetailModal(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('没有找到学生信息');
                }
            }else if (res.result == 'fail'){
                alert('获取学生信息失败!');
            }else{
                alert(res.result);
            }
        })
    }

    function searchMusicList() {
        $('#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 '男';
                    else if (value == 'F') return '女';
                    else return 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');
            }
        });
        return false;
    }

    $("#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);
        return false;
    })

    function modifyStudentInfoDetailModal(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');
    }
    function  saveStudentInfo(){
        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合并,默认false
                           row:student
                       });
                   }
               }else{
                   alert('学生信息更新失败,请检查!');
                   $('#stuDetailModal').modal('hide');
               }
           }else if (res.result == 'fail' ){
               alert('学生信息更新失败');
           }else{
               alert(res.result);
           }
        })
    }
    function removeStudentBuId(i){
        const stuInfo = $('#table').bootstrapTable('getData')[i];
        let flag = confirm(`确定要删除姓名为: ${stuInfo.stu_name} 学号为: ${stuInfo.stu_id} 的学生吗?`);
        if (!flag) return false;
        $.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');
                }
            }else if (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会被撑开,不至于布局错乱。

<div class="container">
    <div class="row">
        <table id="table"></table>
    </div>
</div>

接下来看bootstrap-table的js代码

function queryParams(params) {
        return {type: "owner", direction: "desc", limit: params.limit, offset: params.offset}
    }
function searchMusicList() {
        $('#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 '男';
                    else if (value == 'F') return '女';
                    else return 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');
            }
        });
        return false;
  }

渲染数据很简单,只需要配置这些就能够将数据渲染出来,更多的配置讲解这里也就不过多介绍了,文档写得比我要更清楚,这里主要讲简单的应用,一些简单的增删改查。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 '男';
                    else if (value == 'F') return '女';
                    else return 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;
                }
            }]
        });
        return false;
    }

这样经过格式化,可以不用改变后台的响应数据格式也能渲染出来,说完数据怎么渲染下面说一下数据的查询,其实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 操作的索引
     */
    function modifyStudentInfoDetailModal(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');//打开模态框
    }
    function  saveStudentInfo(){
        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合并,默认false
                           row:student
                       });
                   }
               }else{
                   alert('学生信息更新失败,请检查!');
                   $('#stuDetailModal').modal('hide');
               }
           }else if (res.result == 'fail' ){
               alert('学生信息更新失败');
           }else{
               alert(res.result);
           }
        })
    }

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

删除

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

    function removeStudentBuId(i){
        const stuInfo = $('#table').bootstrapTable('getData')[i];
        let flag = confirm(`确定要删除姓名为: ${stuInfo.stu_name} 学号为: ${stuInfo.stu_id} 的学生吗?`);
        if (!flag) return false;
        $.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');
                }
            }else if (res.result == 'fail' ){
                alert('学生信息删除失败');
            }else{
                alert(res.result);
            }
        })
    }

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

新增

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

总结

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

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐