Bootstrap Table数据表格的使用指南

拼搏现实的明天。 2021-11-26 08:36 399阅读 0赞

**Bootstrap-Table：**

在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，Bootstrap-Table是一款非常好用的开源表格插件，在很多项目中广泛的应用。Bootstrap-Table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处理等处理功能，而且该插件同时也提供了一些不错的扩展功能，如移动行、移动列位置等一些特殊的功能，插件可以用基于HTML5的data-\*属性标识设置，也可以使用Javascript方式进行设置，非常方便。

**引入相应的CSS和JS**

**插件下载地址**

BootStrapTable官网下载地址：[https://bootstrap-table.com/][https_bootstrap-table.com]

Bootstrap和BootstrapTable依赖：

<dependency>
        <groupId>org.webjars</groupId>
        <artifactId>bootstrap</artifactId>
        <version>3.3.7-1</version>
    </dependency>
    
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>bootstrap-table</artifactId>
        <version>1.9.1-1</version>
    </dependency>

页面部分只需要定义一个table标签即可，数据源和样式可以通过JS渲染

JS渲染表格及设置表格属性。关于BootStrapTable属性大家可以参考[BootStrap Table中文网][BootStrap Table]的属性说明，不过官网好像是适用于用HTML渲染的，JS渲染的属性在网上找了一份整理过的[Bootstrap Table API 中文版 说明文档][Bootstrap Table API _]。

$("#stu_table").bootstrapTable({
        url: 'student/page',    //表格数据请求地址
        toolbar: '#toolbar',    //自定义组件
        striped: true,	//隔行换色
        sortName: 'id',   //定义那一列可以排序
        sortOrder: 'desc',	//排序方式
        height: tableHeight(),		//设置高度
        pagination: true,	//显示表格的底部工具栏
        sidePagination: 'server',   //client客户端分页，server服务器分页
        pageNumber: 1,		//初始的页数
        pageSize: 10,		//默认每页数据
        pageList: [10, 15, 50, 100],	//设置分页选择每页显示的条数
        search: true,		//定义右上方的搜索框，输入即可以开始搜索
        showColumns: true,	//选列的下拉菜单
        showRefresh: true,	//刷新按钮
        showToggle: true,	//视图切换
        toolbarAlign: 'left',	//自定义按钮位置
        clickToSelect: true,	//点击行选中
        //singleSelect: true,		//单选
        queryParams: function (param){	//传递参数
            var params = $('#queryForm').serializeObject();
            params.limit = param.limit;
            params.offset = param.offset;
            params.search = param.search;
            params.sort = param.sort;
            params.order=param.order;
            return params;
        },
        columns:[{
            checkbox: true    //多选框
        },{
            field: 'id',	//每列的字段名
            title: 'id',	//表头所显示的名字
            halign: 'center',	//表头的对齐方式
            valign: 'middle',	//表格对齐方式居中
            order: 'asc',		//默认排序方式
            sortable: true,		//设置可以排序
            align: 'center'		//表格数据对齐方式
        },{
            field: 'name',
            title: '姓名',
            valign: 'middle',
            halign: 'center',
            align: 'center'
        },{
            field: 'username',
            title: '用户名',
            valign: 'middle',
            halign: 'center',
            align: 'center'
        }]
    });
    
    //设置表格高度
    function tableHeight() {
        return $(window).height() - 100;
    }

其中url是设置请求数据源地址。

queryParams属性是设置传递请求携带的参数。

height属性设置表格的高度，可以写固定值，也可以使用JS方法，返回一个高度。

columns属性是设置显示数据字段内容，其中field属性值需要和实体类对应。

student/page请求数据源后台方法（这里持久层框架是用的Spring-Data-Jpa，只要最后返回的JSON数据格式一样就可以，下面有JSON数据格式样式）。

@RequestMapping(value="/page")
    @ResponseBody
    public Object page(TablePageable pageParam, StudentForm form) {
        PageRequest pageable = pageParam.bulidPageRequest();
        Specification<Student> spec = buildSpec(form);
        Page<Student> page = studentService.findAll(spec, pageable);
        return AjaxResult.bulidPageResult(page);
    }
    
    //动态查询，可以写查询条件
    public Specification<Student> buildSpec(StudentForm form){
        return null;
    }

其中page方法中接收参数的TablePageable类是接收分页和排序参数类，其中还包含了几个分页排序处理的方法。StudentForm中的字段和实体类中字段一样，主要用于接收查询条件。Student为实体类。buildSpec方法为查询方法。

TablePageable类代码如下。

import org.springframework.data.domain.PageRequest;
    import org.springframework.data.domain.Sort;
    import org.springframework.data.domain.Sort.Direction;
    import org.springframework.data.domain.Sort.Order;
    
    public class TablePageable{
    	private Integer limit; //分页
    	private Integer offset;//首记录号（从0开始）
    	private String sort;   //排序字段
    	private String order;  //顺序，逆序
    	private Integer page; //分页
    	
    	public Integer getPage() {
    		return page;
    	}
    
    	public void setPage(Integer page) {
    		this.page = page;
    	}
    
    	public Integer getLimit() {
    		return limit;
    	}
    
    	public void setLimit(Integer limit) {
    		this.limit = limit;
    	}
    
    	public Integer getOffset() {
    		return offset;
    	}
    
    	public void setOffset(Integer offset) {
    		this.offset = offset;
    	}
    
    	public String getSort() {
    		return sort;
    	}
    
    	public void setSort(String sort) {
    		this.sort = sort;
    	}
    
    	public String getOrder() {
    		return order;
    	}
    
    	public void setOrder(String order) {
    		this.order = order;
    	}
    
    	public PageRequest bulidPageRequest() {
    		int page = (offset != null && limit != null) ? offset / limit : 0;
    		int size = limit != null ? limit : 10;
    		if(sort == null) {
    			return PageRequest.of(page, size);
    		}else {
    			Order order2 = new Order(Direction.fromString(order), sort);
    			Sort sort2=Sort.by(order2);
    			return PageRequest.of(page, size, sort2 );
    		}
    	}
    	
    	public PageRequest myBulidPageRequest() {
    		int page = getPage();
    		int size = limit != null ? limit : 10;
    		if(sort == null) {
    			return PageRequest.of(page, size);
    		}else {
    			Order order2 = new Order(Direction.fromString(order), sort);
    			Sort sort2 = Sort.by(order2);
    			return PageRequest.of(page, size, sort2 );
    		}
    		
    	}
    	
    	public PageRequest bulidPageable(Sort sort) {
    		int page = (offset != null && limit != null) ? offset / limit : 0;
    		int size = limit != null ? limit : 10;
    		return PageRequest.of(page, size, sort);
    	}
    	
    	public Sort bulidSort() {
    		Order order2 = new Order(Direction.fromString(order), sort);
    		Sort sort2 = Sort.by(order2);
    		return sort2;
    	}
    }

返回的AjaxResult类为返回提示的一个类。bulidPageResult方法，是返回表格所需要的格式数据。代码如下。

import java.util.HashMap;
    import org.springframework.data.domain.Page;
    
    public class AjaxResult {
    	private Boolean success;
    	private String msg;
    	
    	public Boolean getSuccess() {
    		return success;
    	}
    
    	public void setSuccess(Boolean success) {
    		this.success = success;
    	}
    
    	public String getMsg() {
    		return msg;
    	}
    
    	public void setMsg(String msg) {
    		this.msg = msg;
    	}
    	
    	public AjaxResult(String msg) {
    		super();
    		this.success=true;
    		this.msg = msg;
    	}
    	
    	public AjaxResult(Boolean success, String msg) {
    		super();
    		this.success = success;
    		this.msg = msg;
    	}
    	
    	public AjaxResult(boolean success) {
    		this.success=success;
    	}
    
    	@SuppressWarnings("rawtypes")
    	public static HashMap<String, Object> bulidPageResult(Page page) {
    		HashMap<String, Object> result=new HashMap<>();
    		result.put("total", page.getTotalElements());
    		result.put("rows", page.getContent());
    		return result;
    	}
    }

数据源得到了，就可以看到渲染表格的效果了，如图。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70][]

单表的基本数据显示是没有问题了，但关联表的数据怎么显示呢。下面来看一下关联表数据的显示。

在渲染表格的JS中的columns属性值中添加如下代码。

{
        field: 'tbClass',
        title: '班级',
        valign: 'middle',
        halign: 'center',
        align: 'center',
        formatter: "tbClassName"
    }

formatter属性值对应的是一个方法名，此方法返回需要显示关联表中的数据。

其中参数value表示field对应实体类中的值，row为当前行的数据，index为当前行的索引。因为tbClass为实体类中关联的班级表，索引直接通过value.name就可以得出班级名称。

//班级名称
    function tbClassName(value, row, index){
        return value?value.name: '';
    }

效果图如下。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 1][]

得到数据源的JSON格式数据。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 2][]

数据显示基本就这些了，下一步就是对数据进行操作了（增删改查）

定义操作按钮，代码如下。

在渲染表格的JS中通过toolbar属性和和表格绑定，显示在表格的左上角位置。toolbar的属性值为选中操作按钮的DOM元素。toolbar: '\#toolbar'

效果如下。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 3][]

**功能实现**

新增add()方法，新增一个modal弹框，用JQ插入到body中，弹框中显示新增页面，弹框关闭时把弹框删除。代码如下。

//新增
    function add(){
        var dialog = $('<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel"></div>');
        dialog.load("student/edit");
        $("body").append(dialog);
        /*弹出模态框,绑定关闭后的事件*/
        dialog.modal().on('hidden.bs.modal', function () {
            //删除
            dialog.remove();
        });
    }

student/edit请求新增页面的方法，新增和修改后台用的一个方法，id为null，是新增，不为null为修改，根据传递的id查询需要修改的对象，之后把对象数据传递到前台。代码如下。

@RequestMapping(value="/edit")
    public void edit(StudentForm form, ModelMap map) throws InstantiationException, IllegalAccessException {
        //把所有班级查询出来传递到前台
        map.put("tbClass", tbClassService.findAll());
        Student model = new Student();
        Integer id = form.getId();
        if (id != null) {
            model = studentService.findById(id);
        }
        map.put("model", model);
    }

新增和修改页面也是共用的一个，减少代码的重复性。edit.thml为新增和修改页面。代码如下。

<form id="myForm" class="form-horizontal" role="form" >
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title">学生管理</h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="id" data-th-value="${model.id}">
    
                    <div class="form-group">
                        <label class="col-sm-3 control-label">姓名：</label>
                        <div class="col-sm-8">
                            <input type="text" name="name" data-th-value="${model.name}" class="form-control" placeholder="姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">用户名：</label>
                        <div class="col-sm-8">
                            <input type="text" name="username" data-th-value="${model.username}" class="form-control" placeholder="用户名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">选择班级：</label>
                        <div class="col-sm-8">
                            <select class="form-control" name="tbClass">
                                <option th:each="c:${tbClass}" th:value="${c.id}" th:text="${c.name}" th:selected="${model.tbClass != null && c.id == model.tbClass.id}" >班级名称</option>
                            </select>
                        </div>
                    </div>
                </div>
    
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">
                        <span class="glyphicon glyphicon-ok"></span> 确定
                    </button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">
                        <span class="glyphicon glyphicon-remove"></span> 关闭
                    </button>
                </div>
            </div>
        </div>
    </form>
    
    <script type="text/javascript">
        var options = {
            message: '验证不通过',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                name: {
                    validators: {
                        notEmpty: {
                            message: '班级名称不能为空'
                        }
                    }
                },
                username: {
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        }
                    }
                }
            }
        };
    
        $("#myForm").bootstrapValidator(options).on("success.form.bv", function(e){
            e.preventDefault();    	//很重要没有它则会提交默认表单，不会做下面的ajax表单提交
            var form= new FormData($("#myForm")[0]);
            $.ajax({
                url: 'student/save',
                type: 'post',
                data: form,
                processData: false,  //不处理数据
                contentType: false,		//不设置内容类型
                success: function(result){
                    if(result.success){
                        $("#myModal").modal("hide");
                        bootbox.alert(result.msg);
                        $("#stu_table").bootstrapTable("refresh");
                    }else{
                        bootbox.alert(result.msg);
                    }
                },
                error: function(result){
                    bootbox.alert("数据保存失败！");
                }
            })
        })
    </script>

其中options为字段不为空的效验，采用的是[BootstrapValidator验证][BootstrapValidator]。

提交数据保存后，保存成功就关闭弹框，刷新表格给出提示信息。

student/save后台保存数据方法，新增的保存方法也是和修改保存的方法共用的一个^\_^。

@RequestMapping(value="/save")
    @ResponseBody
    public Object save(StudentForm form) throws InstantiationException, IllegalAccessException {
        try {
            Student model = new Student();
            Integer id = form.getId();
            if(id!=null) {
                model = studentService.findById(id);
            }
            //把form中的数据copy到model中，除id以外。form和model中的字段一样
            BeanUtils.copyProperties(form, model,"id");
            studentService.save(model);
            return new AjaxResult("数据保存成功");
        } catch (Exception e) {
            return new AjaxResult(false,"数据保存失败");
        }
    }

返回的AjaxResult类是一个返回提示类，返回统一规范了一下。可以根据自己需求返回内容。AjaxResult代码如下。

修改edit()方法。和新增方法一样，请求修改页面时，需要带上需要修改行的id，其他后台方法和前台页面都是和新增共用的。

通过$("\#stu\_table").bootstrapTable('getSelections');获取到选中的行。

//修改
    function edit(){
        var str = $("#stu_table").bootstrapTable('getSelections');
        if(str.length != 1){
            bootbox.alert("请选中一行进行编辑");
            return ;
        }
        var dialog = $('<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel"></div>');
        var id = str[0].id;
        dialog.load("student/edit?id="+id);
        /*添加到body中*/
        $("body").append(dialog);
        /*弹出模态框,绑定关闭后的事件*/
        dialog.modal().on('hidden.bs.modal', function () {
            //删除模态框
            dialog.remove();
            $("#stu_table").bootstrapTable('refresh');
        });
    }

新增和修改效果图。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 4][]

修改。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 5][]

最后一个就是删除了，也是最简单的。

如果是单个删除的话就直接把选中的id传递到后台，根据id删除即可。如果是批量删除，可以把选中行的id拼接起来传递到后台，后天拆分后依次删除。

前台删除JS方法（这里是批量删除）

/*删除*/
    function del(){
        var str = $("#stu_table").bootstrapTable('getSelections');
        if(str.length < 1){
            bootbox.alert("请选中行进行删除");
        }else{
            bootbox.confirm("确定删除选中的"+str.length+"行数据吗?", function(result){
                if(result){
                    var ids = "";
                    for(i = 0; i < str.length; i++){
                        ids += str[i].id+",";
                    }
                    if(ids.length > 0){
                        ids = ids.substring(0, ids.length-1);
                    }
                    $.post('student/delete1',{id : ids},function(result){
                        /* refresh刷新 */
                        $("#stu_table").bootstrapTable('refresh');
                        bootbox.alert('<h4>'+result.msg+'</h4>');
                    });
                }
            });
        }
    }

后台对应的删除方法。

@RequestMapping(value = "delete1")
    @ResponseBody
    public Object delete(String id) {
        try {
            String[] split = id.split(",");
            for (int i = 0; i < split.length; i++) {
                studentService.deleteById(Integer.parseInt(split[i]));
            }
            return new AjaxResult("数据删除成功");
        } catch (Exception e) {
            return new AjaxResult(false, "数据删除失败");
        }
    }

效果图。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 6][]

除了在表格上方定义按钮对表格进行操作外，还可以在表格中定义操作按钮对表格进行操作。

在渲染表格的JS中的columns属性值中添加如下代码。在表格中添加操作按钮。

{
        field: 'operation',
        title: '操作',
        valign: 'middle',
        halign: 'center',
        align: 'center',
        events: 'operateEvents',  //给按钮注册事件
        formatter: 'addFunctionAlty' //表格中增加按钮
    }

addFunctionAlty方法为按钮样式，在表格中显示的样式。

//表格中按钮样式
    function addFunctionAlty(value, row, index) {
        return [
            '<button id="update" type="button" class="btn btn-default">修改</button>',
            '<button id="del" type="button" class="btn btn-default">删除</button>',
        ].join('');
    }

监听表格中按钮的点击事件，通过按钮的id进行对应的按钮监听。

//监听表格中按钮的点击事件
    window.operateEvents = {
        //修改
        "click #update":function(ev,value,row,index){
            var dialog = $('<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel"></div>');
            var id = row.id;
            dialog.load("student/edit?id="+id);
            /*添加到body中*/
            $("body").append(dialog);
            /*弹出模态框,绑定关闭后的事件*/
            dialog.modal().on('hidden.bs.modal', function () {
                //删除模态框
                dialog.remove();
                $("#stu_table").bootstrapTable('refresh');
            });
        },"click #del":function(ev,value,row,index){     //删除
            bootbox.confirm("确定删除当前行数据吗?", function(result){
                if(result){
                    $.post('student/delete1',{id : row.id},function(result){
                        /* refresh刷新 */
                        $("#stu_table").bootstrapTable('refresh');
                        bootbox.alert('<h4>'+result.msg+'</h4>');
                    });
                }
            });
        }
    };

效果图如下，实现了修改和删除功能。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 7][]

自定义的新增，修改和删除功能都实现了，下面就剩下查询功能了。BootStrapTable右上角是自带的有一个查询框的，我们可以直接用，在后台写上对应的查询方法即可。

前台需要在渲染表格时，queryParams属性需要传递search参数，BootStrapTable指定的查询参数名。即：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 8][]

后台请求数据的page方法中已经写了查询的方法，只需要在那个方法中添加查询条件即可。在StudentForm中需要添加一个search字段，用于接收传递过来的参数值。查询方法代码如下。search不为空，就进行模糊查询，为空就不查询。

public Specification<Student> buildSpec(StudentForm form) {
        Specification<Student> specification = new Specification<Student>() {
            private static final long serialVersionUID = 1L;
            @Override
            public Predicate toPredicate(Root<Student> root, CriteriaQuery<?> query, CriteriaBuilder cb) {
                HashSet<Predicate> rules = new HashSet<>();
                if (StringUtils.hasText(form.getSearch())) {
                    Predicate name2 = cb.like(root.get("name"), "%" + form.getSearch() + "%");
                    Predicate username2 = cb.like(root.get("username"), "%" + form.getSearch() + "%");
                    Predicate or = cb.or(name2, username2);
                    rules.add(or);
                }
                return cb.and(rules.toArray(new Predicate[rules.size()]));
            }
    
        };
        return specification;
    }

效果图如下。

![20200203181404906.png][]

写到这里，肯定有些小伙伴就要说如果我想自定义查询可不可以呢！答案当然是可以的。下面来看一下自定义查询。

自定义查询可以把查询框用弹框显示，和新增一样，可以在表格上方显示（根据项目需求而定）。

这里是在表格上方定义的查询，样式自己随便写了一下。代码如下。

效果如下。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 9][]

查询和条件同样在queryParams属性中添加，查询时只需刷新表格就可以了，清空时，只需要把查询的form表单清空即可。

查询条件参数。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 10][]

查询和清空的JS方法。

//查询
    function findSearch() {
        $("#stu_table").bootstrapTable('refresh');
    }
    
    //清空查询
    function findEmpty() {
        $('#queryForm')[0].reset();
        $("#stu_table").bootstrapTable('refresh');
    }

后台查询方法，在原有的方法上在添加两个查询条件即可，代码如下。

@Override
    public Specification<Student> buildSpec(StudentForm form) {
        Specification<Student> specification = new Specification<Student>() {
            private static final long serialVersionUID = 1L;
            @Override
            public Predicate toPredicate(Root<Student> root, CriteriaQuery<?> query, CriteriaBuilder cb) {
                HashSet<Predicate> rules = new HashSet<>();
                if (StringUtils.hasText(form.getName())) {
                    Predicate name = cb.like(root.get("name"), "%" + form.getName() + "%");
                    rules.add(name);
                }
                if (StringUtils.hasText(form.getTeahcerName())) {
                    Predicate code = cb.like(root.get("tbClass").get("name"), "%" + form.getTeahcerName() + "%");
                    rules.add(code);
                }
                if (StringUtils.hasText(form.getSearch())) {
                    Predicate name2 = cb.like(root.get("name"), "%" + form.getSearch() + "%");
                    Predicate username2 = cb.like(root.get("username"), "%" + form.getSearch() + "%");
                    Predicate or = cb.or(name2, username2);
                    rules.add(or);
                }
                return cb.and(rules.toArray(new Predicate[rules.size()]));
            }
    
        };
        return specification;
    }

因为页面代码上面贴出来的比较零乱，下面是页面全部代码。

到这里，BootstrapTable数据表格的使用已经很全面了。不足地方欢迎大家下方留言指出！

[https_bootstrap-table.com]: https://bootstrap-table.com/
[BootStrap Table]: https://www.bootstrap-table.com.cn/doc/api/table-options/
[Bootstrap Table API _]: https://blog.csdn.net/yapengliu/article/details/80191699
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70]: /images/20211126/30234656d4ca4510bfec566acee4afb4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 1]: /images/20211126/473feae9ca3d41a6b216f76be2980fa5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 2]: /images/20211126/902ca02a346749ea84e8a2e1660aed05.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 3]: /images/20211126/e77e660bb45c437792f6c966a78b1c42.png
[BootstrapValidator]: https://blog.csdn.net/qq_40205116/article/details/97027846
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 4]: /images/20211126/359af9da3f29430ab23152fa92bedf94.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 5]: /images/20211126/5dce1ddea3114e7991fe812db3cab49b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 6]: /images/20211126/8c1269461b664666af9dea4d102b712b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 7]: /images/20211126/f74a9915c3044ac8b90165406bec1a21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 8]: /images/20211126/1a5129d5d3684423a438246b13aec3aa.png
[20200203181404906.png]: /images/20211126/eb750ab4757f4630aa0978cad568943c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 9]: /images/20211126/c279cc80cf1d4a58a3b6058ab18989c3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 10]: /images/20211126/78a1d0214ab346a4a18c4dfe2d7e6986.png