Bootstrap-Table 總結

Bootstrap-Table 總結

jQuery Java Bootstrap-Table

---

JS文件

傳參：直接將須要的參數置於 queryParams 方法中，例如 line:formData
注意： queryParams 中的 queryStr 是獲取文本框的值，在表格加載完後，在文本框中輸入了值，再調用 reLoad 方法，一樣能夠實現傳值

var prefix = contpath+"equip/eqEqequip"
$(function() {
    load(formData);
});

function load(formData) {
    $('#exampleTable')
            .bootstrapTable(
                    {
                        method : 'get', // 服務器數據的請求方式 get or post
                        url : prefix + "/list", // 服務器數據的加載地址
                        showRefresh : true,
                        showToggle : true,
                        showColumns : true,
                        iconSize : 'outline',
                        toolbar : '#exampleToolbar',
                        striped : true, // 設置爲true會有隔行變色效果
                        dataType : "json", // 服務器返回的數據類型
                        pagination : true, // 設置爲true會在底部顯示分頁條
                        // queryParamsType : "limit",
                        // //設置爲limit則會發送符合RESTFull格式的參數
                        singleSelect : false, // 設置爲true將禁止多選
                        // contentType : "application/x-www-form-urlencoded",
                        // //發送到服務器的數據編碼類型
                        pageSize : 10, // 若是設置了分頁，每頁數據條數
                        pageNumber : 1, // 若是設置了分佈，首頁頁碼
                        //search : true, // 是否顯示搜索框
                        showColumns : true, // 是否顯示內容下拉框（選擇顯示的列）
                        sidePagination : "server", // 設置在哪裏進行分頁，可選值爲"client" 或者 "server"
                        clickToSelect: true, // 單擊行便可以選中
                        queryParams : function(params) {
                            return {
                                //說明：傳入後臺的參數包括offset開始索引，limit步長，sort排序列，order：desc或者,以及全部列的鍵值對
                                limit: params.limit,
                                offset:params.offset,
                                queryStr : $("#searchName").val(),
                                line:formData
                                //line: $('.val-hide').val()
                            };
                        },
                        // //請求服務器數據時，你能夠經過重寫參數的方式添加一些額外的參數，例如 toolbar 中的參數 若是
                        // queryParamsType = 'limit' ,返回參數必須包含
                        // limit, offset, search, sort, order 不然, 須要包含:
                        // pageSize, pageNumber, searchText, sortName,
                        // sortOrder.
                        // 返回false將會終止請求
                        columns : [
                            {
                                checkbox : true
                            },
                            {
                                field : 'eqCode', 
                                title : '設備編碼' 
                            },
                            {
                                field : 'eqName', 
                                title : '設備名稱' 
                            },
                            {
                                field : 'eqTypeName', 
                                title : '設備分類' 
                            },
                            {
                                field : 'eqSpec', 
                                title : '規格' 
                            },
                            {
                                field : 'model', 
                                title : '型號' 
                            },
                            {
                                field : 'manufacturer', 
                                title : '生產廠家' 
                            },
                            {
                                field : 'facNumber', 
                                title : '出廠編號' 
                            },
                            {
                                field : 'startDate', 
                                title : '開始使用日期' 
                            },
                            {
                                field : 'useDeptName', 
                                title : '使用部門' 
                            },
                            {
                                field : 'eqState', 
                                title : '設備狀態',
                                formatter : function(value, row, index) {
                                    if (value == '0') {
                                        return '<span>在用</span>';
                                    } else if (value == '1') {
                                        return '<span>備用</span>';
                                    } else if (value == '2') {
                                        return '<span>檢修</span>';
                                    }else if(value == '3'){
                                        return '<span>停用</span>';
                                    }else if(value == '4'){
                                        return '<span>待報廢</span>';
                                    }else if(value == '5'){
                                        return '<span>報廢</span>';
                                    }
                                }

                            },
                            {
                                field : 'dutyUser', 
                                title : '責任人' 
                            },
                                                                {
                                    title : '操做',
                                    field : 'id',
                                    align : 'center',
                                    formatter : function(value, row, index) {
                                        var s = '<a class="btn btn-primary btn-sm" href="#" mce_href="#" title="查看" onclick="select(\''
                                                + row.id
                                                + '\')"><i class="fa fa-eye"></i></a> ';
                                        var e = '<a class="btn btn-primary btn-sm '+s_edit_h+'" href="#" mce_href="#" title="修改" onclick="edit(\''
                                                + row.id
                                                + '\')"><i class="fa fa-edit"></i></a> ';
                                        var d = '<a class="btn btn-warning btn-sm '+s_remove_h+'" href="#" title="刪除"  mce_href="#" onclick="remove(\''
                                                + row.id
                                                + '\')"><i class="fa fa-remove"></i></a> ';
                                        var f = '<a class="btn btn-success btn-sm" href="#" title="備用"  mce_href="#" onclick="resetPwd(\''
                                                + row.id
                                                + '\')"><i class="fa fa-key"></i></a> ';
                                        return s + e ;
                                    }
                                } ]
                    });
}
// 重載表格
function reLoad() {
    $('#exampleTable').bootstrapTable('refresh');
}

Controller

注意： params 中包含獲取的數據

@ResponseBody
@GetMapping("/list")
@RequiresPermissions("equip:eqEqequip:eqEqequip")
public PageUtils list(@RequestParam Map<String, Object> params){
    //查詢列表數據
    String orgcode = ShiroUtils.getUser().getOrgCode();
    params.put("orgCode", orgcode);
    params.put("audFlag", "1");
    params.put("eqState", "5");
    Query query = new Query(params);
    List<EqEqequipDO> eqEqequipList = eqEqequipService.list(query);
    int total = eqEqequipService.count(query);
    PageUtils pageUtils = new PageUtils(eqEqequipList, total);
    return pageUtils;
}