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

原文地址：https://segmentfault.com/a/1190000014790590