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

来源：互联网发布：linux查看cpu使用率sar 编辑：程序博客网时间：2024/04/30 07:38

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;    }

1 0