Bootstrap Table數據表格的使用指南

Bootstrap-Table：

在業務系統開發中，對錶格記錄的查詢、分頁、排序等處理是非常常見的，在Web開發中，可以採用很多功能強大的插件來滿足要求，且能極大的提高開發效率，Bootstrap-Table是一款非常好用的開源表格插件，在很多項目中廣泛的應用。Bootstrap-Table插件提供了非常豐富的屬性設置，可以實現查詢、分頁、排序、複選框、設置顯示列、Card view視圖、主從表顯示、合併列、國際化處理等處理功能，而且該插件同時也提供了一些不錯的擴展功能，如移動行、移動列位置等一些特殊的功能，插件可以用基於HTML5的data-*屬性標識設置，也可以使用Javascript方式進行設置，非常方便。

引入相應的CSS和JS

<link rel="stylesheet" href="webjars/bootstrap/3.3.7-1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="webjars/bootstrap-table/1.9.1-1/bootstrap-table.css"/>
<script type="text/javascript" src="static/js/jquery.js"></script>
<script type="text/javascript" src="webjars/bootstrap/3.3.7-1/js/bootstrap.js"></script>
<script type="text/javascript" src="webjars/bootstrap-table/1.9.1-1/bootstrap-table.js"></script>
<script type="text/javascript" src="webjars/bootstrap-table/1.9.1-1/locale/bootstrap-table-zh-CN.js"></script>

插件下載地址

BootStrapTable官網下載地址：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渲染

<table id="stu_table"></table>

JS渲染表格及設置表格屬性。關於BootStrapTable屬性大家可以參考BootStrap Table中文網的屬性說明，不過官網好像是適用於用HTML渲染的，JS渲染的屬性在網上找了一份整理過的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;
	}
}

數據源得到了，就可以看到渲染表格的效果了，如圖。

單表的基本數據顯示是沒有問題了，但關聯表的數據怎麼顯示呢。下面來看一下關聯表數據的顯示。

在渲染表格的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: '';
}

效果圖如下。

得到數據源的JSON格式數據。

數據顯示基本就這些了，下一步就是對數據進行操作了（增刪改查）

定義操作按鈕，代碼如下。

<div id="toolbar" class="btn-group">
    <button type="button" class="btn btn-default" onclick="add()">
        <span class="glyphicon glyphicon-plus"></span>新增
    </button>
    <button type="button" class="btn btn-default" onclick="edit()">
        <span class="glyphicon glyphicon-pencil"></span>修改
    </button>
    <button type="button" class="btn btn-default" onclick="del()">
        <span class="glyphicon glyphicon-remove"></span>刪除
    </button>
</div>

在渲染表格的JS中通過toolbar屬性和和表格綁定，顯示在表格的左上角位置。toolbar的屬性值爲選中操作按鈕的DOM元素。toolbar: '#toolbar'

效果如下。

功能實現

新增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">&times;</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驗證。

提交數據保存後，保存成功就關閉彈框，刷新表格給出提示信息。

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代碼如下。

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;
	}
}

修改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');
    });
}

新增和修改效果圖。

修改。

最後一個就是刪除了，也是最簡單的。

如果是單個刪除的話就直接把選中的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, "數據刪除失敗");
    }
}

效果圖。

除了在表格上方定義按鈕對錶格進行操作外，還可以在表格中定義操作按鈕對錶格進行操作。

在渲染表格的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>');
                });
            }
        });
    }
};

效果圖如下，實現了修改和刪除功能。

自定義的新增，修改和刪除功能都實現了，下面就剩下查詢功能了。BootStrapTable右上角是自帶的有一個查詢框的，我們可以直接用，在後臺寫上對應的查詢方法即可。

前臺需要在渲染表格時，queryParams屬性需要傳遞search參數，BootStrapTable指定的查詢參數名。即：

後臺請求數據的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;
}

效果圖如下。

寫到這裏，肯定有些小夥伴就要說如果我想自定義查詢可不可以呢！答案當然是可以的。下面來看一下自定義查詢。

自定義查詢可以把查詢框用彈框顯示，和新增一樣，可以在表格上方顯示（根據項目需求而定）。

這裏是在表格上方定義的查詢，樣式自己隨便寫了一下。代碼如下。

<style type="text/css">
    #queryForm .form-group {
        margin-bottom: 0px;
    }
    #queryForm{
        background: #F6F6F6;
        padding: 15px 0px;
        border-radius: 10px;
        margin-bottom: 10px;
    }
</style>

<form id="queryForm" class="form-horizontal col-sm-12" role="form" >
    <div class="form-group col-sm-4">
        <label class="col-sm-3 control-label">姓名：</label>
        <div class="col-sm-9">
            <input type="text" name="name" class="form-control" placeholder="姓名">
        </div>
    </div>
    <div class="form-group col-sm-4">
        <label class="col-sm-3 control-label">學號：</label>
        <div class="col-sm-9">
            <input type="text" name="username" class="form-control" placeholder="學號">
        </div>
    </div>
    <div class="form-group col-sm-2 btn-group">
        <button type="button" class="btn btn-primary" onclick="findSearch()">
            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>&nbsp;查詢
        </button>
        <button type="button" class="btn btn-default" onclick="findEmpty()">
            <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;清空
        </button>
    </div>
</form>

效果如下。

查詢和條件同樣在queryParams屬性中添加，查詢時只需刷新表格就可以了，清空時，只需要把查詢的form表單清空即可。

查詢條件參數。

查詢和清空的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;
}

因爲頁面代碼上面貼出來的比較零亂，下面是頁面全部代碼。

<meta charset="UTF-8">

<style type="text/css">
    #queryForm .form-group {
        margin-bottom: 0px;
    }
    #queryForm{
        background: #F6F6F6;
        padding: 15px 0px;
        border-radius: 10px;
        margin-bottom: 10px;
    }
</style>

<form id="queryForm" class="form-horizontal col-sm-12" role="form" >
    <div class="form-group col-sm-4">
        <label class="col-sm-3 control-label">姓名：</label>
        <div class="col-sm-9">
            <input type="text" name="name" class="form-control" placeholder="姓名">
        </div>
    </div>
    <div class="form-group col-sm-4">
        <label class="col-sm-3 control-label">學號：</label>
        <div class="col-sm-9">
            <input type="text" name="username" class="form-control" placeholder="學號">
        </div>
    </div>
    <div class="form-group col-sm-2 btn-group">
        <button type="button" class="btn btn-primary" onclick="findSearch()">
            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>&nbsp;查詢
        </button>
        <button type="button" class="btn btn-default" onclick="findEmpty()">
            <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;清空
        </button>
    </div>
</form>

<table id="stu_table"></table>

<!-- 增刪改 -->
<div id="toolbar" class="btn-group">
    <button type="button" class="btn btn-default" onclick="add()">
        <span class="glyphicon glyphicon-plus"></span>新增
    </button>
    <button type="button" class="btn btn-default" onclick="edit()">
        <span class="glyphicon glyphicon-pencil"></span>修改
    </button>
    <button type="button" class="btn btn-default" onclick="del()">
        <span class="glyphicon glyphicon-remove"></span>刪除
    </button>
</div>

<script type="text/javascript">
    $("#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'
        },{
            field: 'tbClass',
            title: '班級',
            valign: 'middle',
            halign: 'center',
            align: 'center',
            formatter: "tbClassName"
        },{
            field: 'operation',
            title: '操作',
            valign: 'middle',
            halign: 'center',
            align: 'center',
            events: 'operateEvents',  //給按鈕註冊事件
            formatter: '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('');
    }

    //監聽表格中按鈕的點擊事件
    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>');
                    });
                }
            });
        }
    };

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

    //設置表格高度
    function tableHeight() {
        return $(window).height() - 100;
    }

    //新增
    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();
        });
    }

    //修改
    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');
        });
    }

    /*刪除*/
    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>');
                    });
                }
            });
        }
    }

    //查詢
    function findSearch() {
        $("#stu_table").bootstrapTable('refresh');
    }

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

到這裏，BootstrapTable數據表格的使用已經很全面了。不足地方歡迎大家下方留言指出！

Bootstrap Table數據表格的使用指南

【面試準備】又一次失敗的面試經歷，題目離譜～資深軟件測試工程師

dotnet 8 版本與銀河麒麟V10和UOS系統的 glibc 兼容性

大廠都在用的Markdown編輯器

SpringBoot整合Shiro（完整版）

Java持久層和控制器的封裝

BootStrap-Table-Treegrid樹形表格使用指南

BootStrap富文本編輯器Summernote

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結