自用插件整理之表格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>

使用

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

相关下载

点击下载

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏肖洒的博客

【爬虫】(一):爬网页、爬图片、自动登录

HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写。 用于从WWW服务器传输超文本到本地浏览器的传送协议。

1363
来自专栏NetCore

Identity Service - 解析微软微服务架构eShopOnContainers(二)

接上一篇,众所周知一个网站的用户登录是非常重要,一站式的登录(SSO)也成了大家讨论的热点。微软在这个Demo中,把登录单独拉了出来,形成了一个Service,...

2625
来自专栏架构师之路

一张图看懂单机部署+集群部署+热备部署与磁盘阵列(RAID)

一张图看懂单机部署+集群部署+热备部署与磁盘阵列(RAID) ? 单机部署 集群部署 热备部署 单机部署(stand-alone):只有一个饮水机提供服务,服...

3355
来自专栏Hadoop实操

如何在HP dl380 Gen9服务器上安装Redhat 7.2并配置软RAID

在《如何为服务器硬盘配置RAID或JBOD模式》一文中提到,单张RAID卡无法同时启用RAID模式和JBOD模式,即无法混合管理,如果RAID卡为所有硬盘配置了...

1.4K3
来自专栏依乐祝

Net Core集成Exceptionless分布式日志功能以及全局异常过滤

这篇文章有一部分内容翻译自官方文档,[点我阅读][https://github.com/exceptionless/Exceptionless.Net/wiki...

1012
来自专栏北京马哥教育

利用anaconda搞定所有Python安装问题

很多人按照我之前的Python安装教程可以成功,但是方法之下必定有BUG,所以还有一部分人(电脑)无法配置成功,有没有一个软件可以自带一系列常用的安装包!!! ...

6266
来自专栏编程思想之路

Android四大组件完全解析(一)---Activity

本文参考\android\android\frameworks\base\core\java\android\app\Activity.java文件中的类注释,...

44910
来自专栏自由而无用的灵魂的碎碎念

用IE打开Reporting Service时提示权限不足的解决方法

在IE中打开http://localhost/ReportServer时,经常提示“为用户“*”授予的权限不足,无法执行此操作。 (rsAccessDenied...

1294
来自专栏Seebug漏洞平台

使用 XML 内部实体绕过 Chrome 和 IE 的 XSS 过滤器

来源:BypassingXSSFiltersusingXMLInternalEntities 原作者:DavidLitchfield (david@davidl...

39610
来自专栏数据结构笔记

利用简书图片上传功能搭建快速免费的图床

后来发现简书的写文章页面可以上传图片,于是萌生了利用简书的图片上传功能来搭建一个图床的想法。

3663

扫码关注云+社区

领取腾讯云代金券