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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.