基于 bootstrap 的数据展示--bootgrid 样式修改

bootgrid 的官网案例

http://www.jquery-bootgrid.com/Examples

官方demo 样式

基于项目需要，取消了一些不需要的功能，修改了源码

最后样式成了这样

修改说明
都在 jquery bootgrid.js 中修改
css 样式中

 css: {
            dropDownMenu: "dropdown btn-group dropup",// must be a unique class name or constellation of class names within the actionDropDown
            //修改dropDownMenu: "dropdown btn-group",为dropDownMenu: "dropdown btn-group dropup"


   //修改说明，使每页显示多少条记录的 toogle 向上
       }

 templates: {
          
            //footer: "<div id=\"{{ctx.id}}\" class=\"{{css.footer}}\"><div class=\"row\"><div class=\"col-sm-6\"><p class=\"{{css.pagination}}\"></p></div><div class=\"col-sm-6 infoBar\"><p class=\"{{css.infos}}\"></p></div></div></div>",//修改footer为下面的
            footer: "<div id=\"{{ctx.id}}\" class=\"{{css.footer}}\"><div class=\"row\">" +
    "<div class=\"col-sm-6 \"></div><div class=\"col-sm-6\"><p class=\"{{css.actions}}\"></p><p class=\"{{css.pagination}}\"></p></div></div></div>",header: "<div id=\"{{ctx.id}}\" class=\"{{css.header}}\"></div>",}

修改header 和 footer 。
使刷新和页数选择的 button 显示在下面。去掉 show page 从 x 到 x 的文字说明。

 function init()
    {
        this.element.trigger("initialize" + namespace);


        loadColumns.call(this); // Loads columns from HTML thead tag
        this.selection = this.options.selection && this.identifier != null;
        loadRows.call(this); // Loads rows from HTML tbody tag if ajax is false
        prepareTable.call(this);
        renderTableHeader.call(this);
//注释这个，不显示search 框
        //renderSearchField.call(this); //search 框  
//分页 ，刷新，隐藏列工具条在一个方法中，去修改renderActions方法
        renderActions.call(this); //分页,刷新,隐藏等框
        loadData.call(this);


        this.element.trigger("initialized" + namespace);
    }
  


  function renderActions()
    {
        if (this.options.navigation !== 0)
        {
            var css = this.options.css,selector = getCssSelector(css.actions),actionItems = findFooterandHeaderItems.call(this,selector);


            if (actionItems.length > 0)
            {
                var that = this,tpl = this.options.templates,actions = $(tpl.actions.resolve(getParams.call(this)));


                // Refresh Button
                if (this.options.ajax)
                {
                    var refreshIcon = tpl.icon.resolve(getParams.call(this,{ iconCss: css.iconRefresh })),refresh = $(tpl.actionButton.resolve(getParams.call(this,{ content: refreshIcon,text: this.options.labels.refresh })))
                            .on("click" + namespace,function (e)
                            {
                                // todo: prevent multiple fast clicks (fast click detection)
                                e.stopPropagation();
                                that.current = 1;
                                loadData.call(that);
                            });
                    actions.append(refresh);
                }


                // Row count selection
                renderRowCountSelection.call(this,actions);//选择一页显示多少行的button


                // Column selection
//注释 这一行，不在显示 隐藏某一列的button
                //renderColumnSelection.call(this,actions);


                replacePlaceHolder.call(this,actionItems,actions);
            }
        }
    }


labels: {
            all: "All",//选择页数时 all 的显示文字
            infos: "show ${} to ${} ",//修改为空内容。 
            loading: "Loading...",//加载时显示的内容
            noresults: "No results found!",//未查询到结果是显示内容
            refresh: "Refresh",//刷新
            search: "Search"//查询
        },最后在页面 重写样式
  // 分页的样式，主要修改 float：right
   .pagination {
             float: right;
 display: inline-block;
 padding-right: 0;
 margin: 0px 0px;
 border-radius: 4px;
}


   //刷新和选择一页显示多少条的按钮样式
   .btn-group{
float:right;
    }

欢迎加入开源软件交流群 QQ群：32730682

欢迎加入程序员兼职 QQ群： 108464914

基于 bootstrap 的数据展示--bootgrid 样式修改

相关推荐