专栏首页WindCoder自用插件整理之表格bootstrap-table

自用插件整理之表格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 条评论
登录 后参与评论

相关文章

  • Struts2表单验证xml后台提示“严重: Validation error for….”

    按实验楼中的代码敲得,对了好几遍都是一样的,但一直无法达到在前台提示错误信息的效果,仅能在后台的控制台找到如下类似的信息:

    汐楓
  • Laravel API教程:如何构建和测试RESTful API

    本文原文:Laravel API Tutorial: How to Build and Test a RESTful API

    汐楓
  • 使用密码加密

    /* 功能:使用密码加密 日期:2013-05-29 */ #include <stdio.h> #include <stdlib.h> #incl...

    汐楓
  • 前端:JavaScript闭包

    渔父歌
  • 使用JSDoc提高代码的可读性

    首先,JSDoc 并不会对源码产生任何的影响,所有的内容都是写在注释里边的。 所以并不需要担心 JSDoc 会对你的程序造成什么负面影响。

    贾顺名
  • JavaScript函数

    JavaScript中通过function来声明函数,后面是函数名、参数、函数体。 function sum(a,b){ return a+b; } var r...

    水击三千
  • 后端前端恩仇录

    其实应该更多的是互相的磨合与学习,希望身边的人可以有自己的经验分享,与理解,互相进步才是大家需要的,作为一个 "年老" (我也是90后) 的开发者,我觉得一代胜...

    后端技术探索
  • JavaSE(八)集合之Set

    今天这一篇把之前没有搞懂的TreeSet中的比较搞得非常的清楚,也懂得了它的底层实现。希望博友提意见! 一、Set接口 1.1、Set集合概述   Set集合:...

    用户1195962
  • 闭包(Closure)和匿名函数(Anonymous function)/lambda表达式的区别

    上面的function(){...}就是匿名函数(anonymous function),这个匿名函数也叫做lambda表达式,即lambda表达式就是匿名函数...

    racaljk
  • [译]为什么柯里化是有用的

    作者:Hugh FD Jackson 原标题: 《Why Curry Helps》 原文地址:https://hughfdjackson.com/javascr...

    the5fire

扫码关注云+社区

领取腾讯云代金券