bootstrap 列显示省略号
2017-03-10 15:58:00 weixin_34191845 阅读数 22

1.table

1 <div class="col-xs-6">
2                 <table cellspacing="0" cellpadding="0" id="Table1" style="table-layout:fixed" class="admintable03 table table-condensed table-bordered table-hover table-striped"> 
View Code

2.td

1 <td style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">
View Code

截图如下:

2018-01-15 17:58:51 qq_26115733 阅读数 9866

格式化使用函数formatter
例如:

formatter: function (value, row, index) {
                if (value == 'en') {
                    return "英语";
                } else {
                    return "中文";
                }
            }

详细使用如下:

var $table = $('#table').bootstrapTable({
        url: '/fnd/message/query',
        height: 460,
        method: 'post',
        search: true,
        locale: 'zh-CN',
        pagination: true,
        sidePagination: 'server', // client or server
        pageList: [10, 25, 50, 100],
        showColumns: true,
        showRefresh: true,
        sortable: true,
        contentType: 'application/x-www-form-urlencoded',
        queryParams: queryParams,
        toolbar: '#toolbar-btn',
        columns: [{
            field: 'state',
            checkbox: true,
        }, {
            field: 'messageCode',
            title: '<@spring.message "fnd.message_code"/>',
            sortable: true,
            width: 300,
            editable: true
        }, {
            field: 'langCode',
            title: '<@spring.message "fnd.lang_code"/>',
            width: 150,
            align: 'center',
            editable: {
                type: 'text',
                title: '<@spring.message "fnd.lang_code"/>',
                validate: function (v) {
                    if (!v) return '语言不能为空';

                }
            },
            formatter: function (value, row, index) {
                if (value == 'en') {
                    return "英语";
                } else {
                    return "中文";
                }
            }
        }, {
            field: 'messageText',
            title: '<@spring.message "fnd.message_text"/>',
            editable: true
        },],
    });
2016-01-08 21:21:51 u013025627 阅读数 14469

Bootstrap 分页

使用Bootstrap实现分页,并且当页码过多时使用省略号
源码下载

这里写图片描述


代码片段一(HTML主要部分)

<html style="padding-bottom: 54px;">
    <title>jquery</title>
    <script type="text/javascript">
        $(function(){
            $(".pagination").createPage({
                totalPage:30,
                currPage:14,
                backFn:function(p){
                    console.log("回调函数:"+p);
                }
            });
        })
</script>
</head>
<body>
    <div class="pagec" id="pagearea">
        <ul class="pagination">
        </ul>
    </div>
</body>
</html>

代码片段二(JavaScript)

(function($){
    var ms = {
        init:function(totalsubpageTmep,args){
            return (function(){
                ms.fillHtml(totalsubpageTmep,args);
                ms.bindEvent(totalsubpageTmep,args);
            })();
        },
        //填充html
        fillHtml:function(totalsubpageTmep,args){
            return (function(){
                totalsubpageTmep="";
                // 页码大于等于4的时候,添加第一个页码元素
                if(args.currPage!=1 && args.currPage>=4 && args.totalPage!=4) {
                    totalsubpageTmep += "<li class='ali'><a href='javascript:void(0);' class='geraltTb_pager' data-go='' >"+1+"</a></li>";
                }
                /* 当前页码>4, 并且<=总页码,总页码>5,添加“···”*/
                if(args.currPage-2>2 && args.currPage<=args.totalPage && args.totalPage>5) {
                    totalsubpageTmep += "<li class='ali'><a href='javascript:void(0);' class='geraltTb_' data-go='' >...</a></li>";
                }
                /* 当前页码的前两页 */
                var start = args.currPage-2;
                /* 当前页码的后两页 */
                var end = args.currPage+2;

                if((start>1 && args.currPage<4) || args.currPage==1) {
                    end++;
                }
                if(args.currPage>args.totalPage-4 && args.currPage>=args.totalPage) {
                    start--;
                }
                for(; start<=end; start++) {
                    if(start<=args.totalPage && start>=1) {
                        totalsubpageTmep += "<li class='ali'><a href='javascript:void(0);' class='geraltTb_pager' data-go='' >"+start+"</a></li>";
                    }
                }
                if(args.currPage+2<args.totalPage-1 && args.currPage>=1 && args.totalPage>5) {
                    totalsubpageTmep += "<li class='ali'><a href='javascript:void(0);' class='geraltTb_' data-go='' >...</a></li>";
                }

                if(args.currPage!=args.totalPage && args.currPage<args.totalPage-2 && args.totalPage!=4) {
                    totalsubpageTmep += "<li class='ali'><a href='javascript:void(0);' class='geraltTb_pager' data-go='' >"+args.totalPage+"</a></li>";
                }
                $(".pagination").html(totalsubpageTmep);
            })();
        },
        //绑定事件
        bindEvent:function(totalsubpageTmep,args){
            return (function(){
                totalsubpageTmep.on("click","a.geraltTb_pager",function(event){
                    var current = parseInt($(this).text());
                    ms.fillHtml(totalsubpageTmep,{"currPage":current,"totalPage":args.totalPage,"turndown":args.turndown});
                    if(typeof(args.backFn)=="function"){
                        args.backFn(current);
                    }
                });
            })();
        }
    }
    $.fn.createPage = function(options){       
        ms.init(this,options);
    }
})(jQuery);
2018-02-23 17:01:00 yangyatong93 阅读数 27
<div class="container">
    <div class="row">
      <div class="col-md-8"><img ></div>
      <div class="col-md-4">
        <div class="row">
            <div class="col-md-12">.col-md-</div>
            <div class="col-md-12">.col-md-</div>
            <div class="col-md-12">.col-md-</div>
        </div>
      </div>
    </div>
</div>
2019-01-14 16:55:38 hugejihu9 阅读数 67

文章来自:源码在线https://www.shengli.me/css/576.html

 

 

效果:

 

 1.jpg

 

 

Bootstrap 列嵌套

阅读数 798

Bootstrap 列平移

阅读数 148

bootstrap嵌套列

阅读数 6

没有更多推荐了,返回首页