Bootstrap-based data display-Modify the bootgrid style ., Bootstrap modify Style

Bootstrap-based data display-Modify the bootgrid style ., Bootstrap modify Style

Official bootgrid Case Study

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

Official demo Style

Based on project requirements, some unnecessary functions are canceled and the source code is modified.

Finally, the style is like this.

The modified content is as follows:

Description
All are modified in jquery bootgrid. js.
Css style
Css :{
DropDownMenu: "dropdown btn-group dropup", // must be a unique class name or constellation of class names within the actionDropDown
// Modify dropDownMenu: "dropdown btn-group" to dropDownMenu: "dropdown btn-group dropup"


Modify the description of how many records are displayed on each page.
}
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> ",
// Modify footer to the following
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> ",

Header: "<div id = \" {ctx. id }}\ "class = \" {css. header }}\ "> </div> ",
}


Modify the header and footer.
Display the refresh button and page number selection button below. Remove the text description of show page from x to 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 );
// Comment this out. The search box is not displayed.
// RenderSearchField. call (this); // search box
// Pagination, refresh, hide the column toolbar, and modify the renderActions method in one method.
RenderActions. call (this); // pagination, refresh, hide, and other boxes
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); // select the number of buttons displayed on the page.


// Column selection
// Annotate this line, without displaying the button that hides a column
// RenderColumnSelection. call (this, actions );


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


Labels :{
All: "All", // display text of all when the page number is selected
Infos: "show $ {} to $ {}", // modify to empty content.
Loading: "Loading...", // content displayed during loading
NoResults: "No results found! ", // No result is displayed.
Refresh: "Refresh", // refresh
Search: "Search" // query
},
At last, rewrite the style on the page
// Pagination style, mainly modifying float: right
. Pagination {
Float: right;
Display: inline-block;
Padding-right: 0;
Margin: 0px 0px;
Border-radius: 4px;
}


// Refresh and select the number of Button styles displayed on the page
. Btn-group {
Float: right;
}

Welcome to the open-source software exchange group QQ group: 32730682