自用插件整理之表格bootstrap-table

前言

一直想将之前以及目前用的插件整理下，趁现在有时间了赶紧进行。本插件基于bootstrap，网上各种例子也比较多，本文就不详细列api一类的了，只将自己常用的记录一下。多数代码中存在的注释，就不再重写。

引用

bootstrap基础环境是必须的，这里就不在列出了，仅列该插件本身的。 ${pageContext.request.contextPath}为java中jsp里的一种获取地址的写法，请自行酌情修改。

1
<!-- 插件核心，必选-->
2
<link rel="stylesheet" href="https://windcoder.com/${pageContext.request.contextPath}/assets/css/bootstrap-table.min.css">
3
<script src="https://windcoder.com/${pageContext.request.contextPath}/assets/js/bootstrap-table.js"></script>
4
<!-- 语言环境，自行选用 -->
5
<script src="https://windcoder.com/${pageContext.request.contextPath}/assets/js/bootstrap-table-zh-CN.min.js"></script>
6
<!-- 单元格内容编辑，选用 -->
7
<script src="https://windcoder.com/${pageContext.request.contextPath}/js/bootstrap-editable.js"></script>
8
<script src="https://windcoder.com/${pageContext.request.contextPath}/js/bootstrap-table-editable.min.js"></script>

使用

html部分

1
<table data-toggle="table" id="postsTale" class="table table-striped table-bordered table-hover">
2

3
</table>

js调用部分

columns部分为传递的参数列表，field为对应参数属性名称，title为表格展示出来的名称（表头）。

1
var postsTale=$("#postsTale").bootstrapTable({
2
        url:basePath+"/prizes/findAllPrizeOfPage.do",
3
        showPaginationSwitch:false,
4
        clickToSelect:true,
5
        height:450,
6
        pagination: true, //启动分页
7
        sidePagination: "server", //表示服务端请求
8
        pageSize: 10,  //每页显示的记录数
9
        pageNumber:1, //当前第几页
10
        queryParamsType : "undefined",
11
        columns: [
12
            {
13
                field: 'Id',
14
                checkbox: true,
15
                visible: true
16
            },
17
            {
18
                field: 'id',
19
                title: 'ID',
20
                visible: true,
21
                formatter : function(value, row, index) {
22
                    //自定义展示形式，此处为连续id，使用该处需要更改该插件js源码。
23
                    //return index + 1;
24
                    var page = postsTale.bootstrapTable("getPage");
25
                    return page.pageSize * (page.pageNumber - 1) + index + 1;
26
                }
27
            },{
28
                field: 'pname',
29
                title: '名称',
30
                align: 'center',
31
                sortable: false,
32
                clickToSelect: false
33
            }, {
34
                field: 'picurl',
35
                title: '首页图片',
36
                align: 'center',
37
                sortable: false,
38
                clickToSelect: false,
39
                formatter: imageFormatter
40

41
            },{
42
                field: 'pcontent',
43
                title: '描述',
44
                align: 'center',
45
                sortable: false,
46
                clickToSelect: false,
47
            },{
48
                field: 'pmodel',
49
                title: '型号',
50
                align: 'center',
51
                sortable: false,
52
                clickToSelect: false,
53
                formatter:function(value, row, index){
54
                    if(value==''||value==undefined){
55
                        return "-";
56
                    }
57
                    return value;
58
                }
59
            },{
60
                field: 'pnum',
61
                title: '库存',
62
                align: 'center',
63
                sortable: false,
64
                clickToSelect: false
65
            },{
66
                field: 'credits',
67
                title: '所需积分',
68
                align: 'center',
69
                sortable: false,
70
                clickToSelect: false,
71
            },{
72
                field: 'createtime',
73
                title: '创建时间',
74
                align: 'center',
75
                sortable: false,
76
                clickToSelect: false,
77
            },{
78
                field: 'operation',
79
                title: '操作',
80
                formatter:function(value,row,index){
81
//                    var s = '<a class = "editorTodObj" href="javascript:void(0)">修改</a>';
82
//                    var d = '<a class = "lookPosts" href="javascript:void(0)">删除</a>';
83
//                    return s+' '+d;
84
                    var s = '<p><button class = "btn btn-success " onclick="editorPrize(\''+row.id+'\')" >修改</button></p><p><button class = " btn btn-danger " onclick="deletePrize(\''+row.id+'\')">删除</button></p>';
85
                    return s;
86
                },
87
                events: 'operateEvents'
88
            }
89

90
        ],
91
        queryParams: function queryParams(params) {   //设置查询参数
92
            var param = {
93
                currentPage: params.pageNumber,
94
                pageSize: params.pageSize,
95
//              uphone:document.getElementById('input-phone').value,
96
            };
97
            return param;
98
        },
99
        onLoadSuccess: function(value,row,index){  //加载成功时执行
100
           // layer.msg("加载成功",{time : 1500, icon : 1});
101
           alert("加载成功");
102
        },
103
        onLoadError: function(){  //加载失败时执行
104
           //layer.msg("加载数据失败", {time : 1500, icon : 2});
105
           alert("加载数据失败");
106
        }
107
    });

imageFormatter 用于自定义的外部函数

1
function imageFormatter(value, row, index) {
2
   //value当前值，row为这一行的对象以及相关内容
3
   if(value==''||value==undefined){
4
      return "暂无首页图片";
5
   }
6
   return " <a  href='" + value + "' data-lightbox='roadtrip' ><img src='" + value + "' style='width:50px; height:50px;' />";
7
}

更新

可用于编辑或删除等操作后，刷新表格内容。

1
postsTale.bootstrapTable('refresh');

编辑表格

使用前需引用上面说的相应js。 columns中对应需要编辑的要改成如下类似形式editable是必须的。

1
{
2
            field: 'sortNum',
3
            title: '排序',
4
            align: 'center',
5
            sortable: false,
6
            clickToSelect: false,
7
            editable: {
8
                type: 'text',
9
                title: '排序',
10
                validate: function (v) {
11
                    if (isNaN(v)) return '排序必须是数字';
12
                    var age = parseInt(v);
13
                    if (age < 0) return '排序必须是正整数';
14
                }
15
            }
16
}

监听事件要增加一个onEditableSave。

1
onEditableSave:function (field, row, oldValue, $el) {
2
            //修改成功后，调用后台api传递修改内容，从而达到永久性修改
3
            $.ajax({
4
                type: "post",
5
                url: basePath+"/banner/updateBanner.do",
6
                data: {
7
                    id:row.id,
8
                    sortNum:row.sortNum
9
                },
10
                dataType: 'JSON',
11
                success: function (data) {
12
                    if (JSON.parse(data.code)>0) {
13
                        layer.msg('更新数据成功');
14
                    }
15
                },
16
                error: function () {
17
                    layer.msg('编辑失败');
18
                },
19
                complete: function () {
20

21
                }
22

23
            });
24
        }

修改源码使id连续

分页时，该插件本身每页id是不连续的，每页都是从1开始，若是每页10条，第二页想从11开始，则需要修改bootstrap-table.js源码，具体操作如下。不想修改的可从下面下载本站提供的1.11.1版本的js，css等请自行从github等地下载。 注：该解决方法来源网络，时间有点久，忘了具体是哪了。。 1.修改allowedMethods 在bootstrap-table.js中查找allowedMethods数组，在该数组中添加’getPage’，如图： 2.添加getPage方法

1
BootstrapTable.prototype.getPage = function (params) {
2
        return {pageSize: this.options.pageSize, pageNumber: this.options.pageNumber};
3
};

3.更改页面调用时的id展示方式如上面初始化时改写的一样

1
{
2
                field: 'id',
3
                title: 'ID',
4
                visible: true,
5
                formatter : function(value, row, index) {
6
                    //return index + 1;
7
                    var page = postsTale.bootstrapTable("getPage");
8
                    return page.pageSize * (page.pageNumber - 1) + index + 1;
9
                }
10
            }

参考资料

bootstrap-table-github