bootstrap grid php,基于 bootstrap 的数据展示--bootgrid 样式修改。-CSDN博客

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: "

//修改footer为下面的

footer: "

header: "

}

修改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