基于 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;

    }