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