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

WindCoder

发布于 2018-09-20 15:33:24

3.1K0

发布于 2018-09-20 15:33:24

文章被收录于专栏：WindCoderWindCoder

前言

一直想将之前以及目前用的插件整理下，趁现在有时间了赶紧进行。

本插件基于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>

使用

html部分

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

</table>

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("加载数据失败");
        }
    });

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;' />";
}

更新

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

postsTale.bootstrapTable('refresh');

编辑表格

使用前需引用上面说的相应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 '排序必须是正整数';
                }
            }
}

监听事件要增加一个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 () {

                }

            });
        }

修改源码使id连续

分页时，该插件本身每页id是不连续的，每页都是从1开始，若是每页10条，第二页想从11开始，则需要修改bootstrap-table.js源码，具体操作如下。不想修改的可从下面下载本站提供的1.11.1版本的js，css等请自行从github等地下载。

注：该解决方法来源网络，时间有点久，忘了具体是哪了。。

1.修改allowedMethods

在bootstrap-table.js中查找allowedMethods数组，在该数组中添加'getPage'，如图：

2.添加getPage方法

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

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

参考资料

bootstrap-table-github