Web笔记··By/蜜汁炒酸奶

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

前言

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

引用

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

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

使用

html部分

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

</table>
1
2
3

js调用部分

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

var postsTale=$("#postsTale").bootstrapTable({
        url:basePath+"/prizes/findAllPrizeOfPage.do",
        showPaginationSwitch:false,
        clickToSelect:true,
        height:450,
        pagination: true, //启动分页
        sidePagination: "server", //表示服务端请求
        pageSize: 10,  //每页显示的记录数
        pageNumber:1, //当前第几页
        queryParamsType : "undefined",
        columns: [
            {
                field: 'Id',
                checkbox: true,
                visible: true
            },
            {
                field: 'id',
                title: 'ID',
                visible: true,
                formatter : function(value, row, index) {
                    //自定义展示形式,此处为连续id,使用该处需要更改该插件js源码。
                    //return index + 1;
                    var page = postsTale.bootstrapTable("getPage");
                    return page.pageSize * (page.pageNumber - 1) + index + 1;
                }
            },{
                field: 'pname',
                title: '名称',
                align: 'center',
                sortable: false,
                clickToSelect: false
            }, {
                field: 'picurl',
                title: '首页图片',
                align: 'center',
                sortable: false,
                clickToSelect: false,
                formatter: imageFormatter

            },{
                field: 'pcontent',
                title: '描述',
                align: 'center',
                sortable: false,
                clickToSelect: false,
            },{
                field: 'pmodel',
                title: '型号',
                align: 'center',
                sortable: false,
                clickToSelect: false,
                formatter:function(value, row, index){
                    if(value==''||value==undefined){
                        return "-";
                    }
                    return value;
                }
            },{
                field: 'pnum',
                title: '库存',
                align: 'center',
                sortable: false,
                clickToSelect: false
            },{
                field: 'credits',
                title: '所需积分',
                align: 'center',
                sortable: false,
                clickToSelect: false,
            },{
                field: 'createtime',
                title: '创建时间',
                align: 'center',
                sortable: false,
                clickToSelect: false,
            },{
                field: 'operation',
                title: '操作',
                formatter:function(value,row,index){
//                    var s = '<a class = "editorTodObj" href="javascript:void(0)">修改</a>';
//                    var d = '<a class = "lookPosts" href="javascript:void(0)">删除</a>';
//                    return s+' '+d;
                    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>';
                    return s;
                },
                events: 'operateEvents'
            }

        ],
        queryParams: function queryParams(params) {   //设置查询参数
            var param = {
                currentPage: params.pageNumber,
                pageSize: params.pageSize,
//              uphone:document.getElementById('input-phone').value,
            };
            return param;
        },
        onLoadSuccess: function(value,row,index){  //加载成功时执行
           // layer.msg("加载成功",{time : 1500, icon : 1});
           alert("加载成功");
        },
        onLoadError: function(){  //加载失败时执行
           //layer.msg("加载数据失败", {time : 1500, icon : 2});
           alert("加载数据失败");
        }
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

imageFormatter 用于自定义的外部函数

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

更新

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

postsTale.bootstrapTable('refresh');
1

编辑表格

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

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

监听事件要增加一个onEditableSave。

onEditableSave:function (field, row, oldValue, $el) {
            //修改成功后,调用后台api传递修改内容,从而达到永久性修改
            $.ajax({
                type: "post",
                url: basePath+"/banner/updateBanner.do",
                data: {
                    id:row.id,
                    sortNum:row.sortNum
                },
                dataType: 'JSON',
                success: function (data) {
                    if (JSON.parse(data.code)>0) {
                        layer.msg('更新数据成功');
                    }
                },
                error: function () {
                    layer.msg('编辑失败');
                },
                complete: function () {

                }

            });
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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’,如图: 自用插件整理之表格bootstrap-table 2.添加getPage方法

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

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

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

参考资料

bootstrap-table-github

预览
Loading comments...
0 条评论

暂无数据

example
预览