Bootstrap ...sub-page ...bootstraptable. ... tabtabtabtabtabl. Generate a bar chart in Excel. HTML. Pie Chart. Chinese version of the time control,

Bootstrap ...sub-page ...bootstraptable. ... tabtabtabtabtabl. Generate a bar chart in Excel. HTML. Pie Chart. Chinese version of the time control,

 

 

The above is the master page layout of many background management systems. A template column on the left. The System ID column above. Fill the child page in the blank area.

Based on ASP. NET MVC

Import bootstrap.js.bootstrap.css

Body:

<Div>
<Ul class = "nav pull-right">
<Li class = "dropdown">
<A class = "dropdown-toggle" data-toggle = "dropdown" href = "#">

The above code is the result above. ul class = "nav pull-right" constitutes the user and the drop-down box in the upper right corner. The color of this part is gradient. Use the code to implement it as follows:

<Style>
. Head {
Font-family:;
Color: # FFFFFF;
Margin: 0px;
Background: linear-gradient (#71B2F0, #104593 );
Line-height: 80px;
Padding-top: 35px;
Padding-left: 30px;
Height: 150px;

}
</Style>

The focus is on background: linear-gradient (#71B2F0, #104593 );

 

<Ul class = "nav-pills nav-stacked pull-left"> </ul>

 

The above code will form a navigation element, as shown in the following code.

<Div class = "body-content">

<Div class = "wrapper">
@ RenderBody ()
<Iframe id = "txtContentBody">

 

Is a small example of sub-page layout

@{
Layout = "/Areas/Adm/Views/Shared/_ Layout_Body.cshtml ";
}

Introduce the master page.

<Div class = "row" ng-app = "passwordIndexApp" ng-controller = "passwordIndexCtrl">
<Div class = "col-lg-12">
<Section class = "panel">

Declare two divs at the beginning. class: row. second class: "col-lg-12" this is the official bootstrap writing. then section. class: panel. a white panel is formed. (the default bootstrap background color is gray)

You can define

For example, many background systems involve displaying multiple data entries. Business Processing. If tables are used, the traditional method is used. There are a lot of database vulnerabilities. There are a lot of pages on the backend, and the front end is combined. It is cumbersome to repeat three times.

Bootstrap encapsulates the data display, paging, addition, deletion, modification, and query methods, and the style is more beautiful than the traditional html.

Introduce third-party plug-ins. This is a Chinese form

<Script src = "~ /Scripts/bootstrap-table.js "> </script>
<Link href = "~ /Scripts/bootstrap-table.css "rel =" stylesheet "/>
<Script src = "~ /Scripts/bootstrap-table-zh-CN.js "> </script>

$ ('# Whitelist'). bootstrapTable ({
Url: '/Password/whitelist', // request the background URL (*)
Method: 'get', // Request method (*)
Toolbar: '# toolbar', // container used by the tool button
Striped: true, // whether to display the row interval color
Cache: false, // whether to use the cache. The default value is true. Therefore, you need to set this attribute (*)
Pagination: true, // whether to display the page (*)
Sortable: false, // whether to enable sorting
SortOrder: "asc", // sorting method
QueryParams: oTableInit. queryParams, // pass the parameter (*)
SidePagination: "server", // paging mode: client paging, server paging (*)
PageNumber: 1, // initialize and load the first page. The default value is the first page.
PageSize: 10, // number of records per page (*)
PageList: [10, 25, 50,100], // number of lines per page available (*)
Search: false, // whether to display table search. this search is a client-side search that does not enter the server. Therefore, it is of little personal significance.
StrictSearch: true,
ShowColumns: true, // whether to display all columns. Select field display
ShowRefresh: true, // whether to display the refresh button
MinimumCountColumns: 2, // the minimum number of columns allowed
ClickToSelect: true, // whether to enable click to select a row
Height: 500, // The Row height. If the height attribute is not set, the table automatically determines the table height based on the number of records.
UniqueId: "Id", // unique identifier of each row, usually the primary key column
ShowToggle: true, // whether to display the switch button for the detailed view and List View
CardView: false, // whether to display the detailed view
DetailView: false, // whether the parent/child table is displayed
Columns :[{
Checkbox: true
},{
Field: 'name ',
Title: 'name'
},
{
Field: 'emailaddress ',
Title: 'mailbox name'
}
,
{
Field: 'id ',
Title: 'Primary key column'
}
]
});
};

// Obtain the query parameters
OTableInit. queryParams = function (params ){
Var temp = {// The name of the key and the variable name of the controller must be the same.
Limit: params. limit, // page size
Offset: params. offset // page number
};
Return temp;
};

You can also set more parameters, methods, and events in bootstrapTable. For more information, see the bootstrap table api.

Http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

Below is the C # server background code

 

[HttpGet]
Public JsonResult Whitelist (int limit, int offset)
{
Expression <Func <WhitelistDto, bool> exp = item =>! Item. IsDeleted;
Var dto = whitelistService. Query (exp, item => item. Id, false );
Var total = dto. Count;
Var rows = dto. Skip (offset). Take (limit). ToList ();
Return Json (new {total = total, rows = rows}, JsonRequestBehavior. AllowGet );
}

As long as the returned json contains total, pagination can be completed. rows fills the table.

QueryParams

OTableInit. queryParams = function (params ){
Var temp = {// The name of the key and the variable name of the controller must be the same.
Limit: params. limit, // page size
Offset: params. offset, // page number
Name: $ ("# Name"). val (),
Department: $ ("# Department"). val (),
Status: $ ("# Status"). val (),
EmailAddress: $ ("# EmailAddress"). val ()
};
Return temp;
};

Next, many tables require the addition, deletion, modification, and query functions. The following buttons are added and deleted:

 

 

Js is as follows during initialization

Toolbar: '# toolbar', // container used by the tool button

The html is as follows:

 

<Div class = "panel-body">
<Div id = "toolbar" class = "btn-group">
<Button id = "btn_add" type = "button" class = "btn-default" data-toggle = "modal" data-target = "# myModal">
<Span class = "glyphicon-plus" aria-hidden = "true"> </span> added
</Button>
<Button id = "btn_delete" type = "button" class = "btn-default" ng-click = "DeleteAdminEmail ()">
<Span class = "glyphicon-remove" aria-hidden = "true"> </span> Delete
</Button>
</Div>
<Table id = "Whitelist"> </table>
</Div>

 

 

Form final page

 

 

The following describes some time or method of bootstrap.

OnDblClickCell is the double-click event of a row in the table.

OnDblClickCell: function (field, value, row, td ){
$ ('# Mymodal'). modal ('show'); // This is the modal box.
}

Field: Click the field name of the column,
Value: Click the value of the column,
Row: Click the entire row of data in the column,
$ Element: td element.

$ ("# Whitelist"). bootstrapTable ('refresh'); // This is the refresh attribute of the table.

$ ("# Whitelist"). bootstrapTable ('getselections'); // when a row in the table is selected, the data of the selected row is obtained, including hidden columns.

$ ("# Whitelist"). bootstrapTable ('delete', {field: 'id', values: array}); // remove a row of data from the table

$ ('# Whitelist'). bootstrapTable ('showcolumn', 'name'); // display hidden Columns
$ ('# Whitelist'). bootstrapTable ('hidecolumn', 'id'); // hide a column

 

Is a modal box from bootstrap.

<! -- Modal -->
<Div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true">
<Div class = "modal-dialog">
<Div class = "modal-content">
<Div class = "modal-header">
<Button type = "button" class = "close" ng-click = "ClearAdminEmail ()" aria-hidden = "true">
& Times;
</Button>
<H4 class = "modal-title" id = "myModalLabel">
Add a white list user
</H4>
</Div>
<Div class = "modal-body">
<Form class = "form-horizontal">
<Div class = "form-group has-success">
<Label class = "col-sm-3 control-label" for = "AdminName"> name </label>
<Div class = "col-sm-9">
<Input type = "text" class = "form-control" id = "AdminName" placeholder = "name">
</Div>
</Div>
</Form>
<Form class = "form-horizontal">
<Div class = "form-group has-success">
<Label class = "col-sm-2 control-label" for = "AdminEmailData"> mailbox </label>
<Div class = "col-sm-10">
<Input type = "text" class = "form-control" id = "AdminEmailData" placeholder = "Enter your email address">
</Div>
</Div>
</Form>
</Div>
<Div class = "modal-footer">
<Button type = "button" class = "btn-primary" ng-click = "AddAdminEmail ()">
Submit changes
</Button>
<Button type = "button" class = "btn-default" ng-click = "ClearAdminEmail ()">
Close
</Button>
</Div>
</Div> <! --/. Modal-content -->
</Div> <! --/. Modal -->
</Div>

To implement the modal box, you only need to define the following style.

<Div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true">
<Div class = "modal-dialog">
<Div class = "modal-content">
<Div class = "modal-header">

----------------------------

<Div class = "modal-body">

Modal-body is like section in our subpage. design the modal box according to the subpage layout.

-----

<Button id = "btn_add" type = "button" class = "btn-default" data-toggle = "modal" data-target = "# myModal">
<Span class = "glyphicon-plus" aria-hidden = "true"> </span> added
</Button> // html

$ ('# Mymodal'). modal ('show'); // js method

As shown in the above Yang pop-up modal box

$ ('# Mymodal'). modal ('hide ');
$ ("# AdminName"). val ("");
$ ("# AdminEmailData"). val ("");
As shown in the preceding figure, hide the modal box. Clear the value of the html element in the modal box.

 

The above is my frequently used warning box

<Section class = "panel">
<Div id = "jsonResult">
</Div>

Define an empty div under section. Implement it using js

Var result = document. getElementById ("jsonResult ");
// The bootstrap warning box is used to delete elements rather than hide elements when the pop-up window is closed. It can only be used once. Therefore, a new warning box is generated here.

// Inter. innerHTML =, array. push () are obviously slow. innerHTML + = multiple rows destroy the Layout
Result. innerHTML + = "<div class = 'alert alert-success alert-dismissable '> <button type = 'button' class = 'close' data-dismiss = 'alert 'aria-hidden = 'true'> & times; </button> "+ data. value + "</div> ";

// This is the green warning box

Result. innerHTML + = "<div class = 'alert alert-danger alert-dismissable '> <button type = 'button' class = 'close' data-dismiss = 'alert 'aria-hidden = 'true'> & times; </button> "+ data. value + "</div> ";

// Red warning box

Most of the time, we need the report function, such as exporting Excel and generating charts.

<Script>
Var idTmr;
Function getExplorer (){
Var explorer = window. navigator. userAgent;
// Ie
If (explorer. indexOf ("MSIE")> = 0 ){
Return 'ie ';
}
// Firefox
Else if (explorer. indexOf ("Firefox")> = 0 ){
Return 'Firefox ';
}
// Chrome
Else if (explorer. indexOf ("Chrome")> = 0 ){
Return 'chrome ';
}
// Opera
Else if (explorer. indexOf ("Opera")> = 0 ){
Return 'Opera ';
}
// Safari
Else if (explorer. indexOf ("Safari")> = 0 ){
Return 'safari ';
}
}
$ Scope. ImportEmployeeExcel = function (){
If (getExplorer () = 'ie '){
Var curTbl = document. getElementById ("Whitelist ");
Var oXL = new ActiveXObject ("Excel. Application ");
Var oWB = oXL. Workbooks. Add ();
Var xlsheet = oWB. Worksheets (1 );
Var sel = document. body. createTextRange ();
Sel. moveToElementText (curTbl );
Sel. select ();
Sel.exe cCommand ("Copy ");
Xlsheet. Paste ();
OXL. Visible = true;

Try {
Var fname = oXL. Application. GetSaveAsFilename ("Excel.xls", "Excel Spreadsheets (*. xls), *. xls ");
} Catch (e ){
Print ("Nested catch caught" + e );
} Finally {
OWB. SaveAs (fname );
OWB. Close (savechanges = false );
OXL. Quit ();
OXL = null;
IdTmr = window. setInterval ("Cleanup ();", 1 );
}

}
Else {
TableToExcel ("Whitelist ")
}
}
Var tableToExcel = (function (){
Var uri = 'data: application/vnd. ms-excel; base64 ,',
Template = 'Base64 = function (s) {return window. btoa (unescape (encodeURIComponent (s )))},
Format = function (s, c ){
Return s. replace (/{(\ w +)}/g,
Function (m, p) {return c [p];})
}
Return function (table, name ){
If (! Table. nodeType) table = document. getElementById (table)
Var ctx = {worksheet: name | 'worksheet ', table: table. innerHTML}
Window. location. href = uri + base64 (format (template, ctx ))
}
})()
});
</Script>

The above Code supports exporting forms from mainstream browsers to Excel. Call ng-click = "ImportEmployeeExcel ()" document. getElementById to your own table Id.

 

 

In the report, some bar charts, pie charts are required. The presentation is simpler and more crude. Chart. js is used here.

Introduce the plug-in

<Link rel = "stylesheet" type = "text/css" href = "~ /Template/Admin/jucheap/js/chart-js/normalize.css "/>
<Script type = "text/javascript" src = "~ /Template/Admin/jucheap/js/Chart. js "> </script>

 

Js is as follows:

Var canvasBarData = {
Labels: ["1", "2", "3", "4", "5", "6", "7"],
Datasets :[
{
FillColor: "rgba (49,111,186, 0.9 )",
StrokeColor: "rgba (49,111,186, 1 )",
HighlightFill: "rgba (49,111,186, 0.70 )",
HighlightStroke: "rgba (49,111,186, 0.85 )",
Data: [40, 50, 60, 70, 80, 90,100]
}
]

}

Var pieData = [
{
Value: "30 ",
Color: "# fe7200 ",
Highlight: "# ff8a2b ",
Label: "idle"
},
{
Value: "70 ",
Color: "# effecfba ",
Highlight: "# 6e9acf ",
Label: "occupied"
}
];
Window. onload = function (){
Var Bar = document. getElementById ("canvasBar"). getContext ("2d ");
New Chart (Bar). Bar (canvasBarData); // Bar Chart

Var Pie = document. getElementById ("canvasPie"). getContext ("2d ");
New Chart (Pie). Pie (pieData); // Pie Chart
// {Responsive: true} The response type attribute of the chart. Very ugly
}

 

The html is as follows:

<Canvas id = "canvasBar"> </canvas>

<Canvas id = "canvasPie"/>

The final result is as follows:

 

 

The animation effect is great.

 

Many times we need time controls. However, the bootstrap time controls are in full English by default. this is inconvenient for older leaders.

Introduce the plug-in

<Link href = "~ /Scripts/bootstrap-datetimepicker.min.css "rel =" stylesheet "/>
<Script src = "~ /Scripts/moment-with-locales.min.js "> </script>
<Script src = "~ /Scripts/bootstrap-datetimepicker.min.js "> </script>

Js is as follows:

$ ('# Datetimepicker1'). datetimepicker ({
Format: 'yyyy-MM-DD ',
Locale: moment. locale ('zh-cn ')
});

 

The HTML is as follows:

<Div class = "form-group col-sm-6 has-Standard">
<Label class = "control-label col-sm-5"> Start time </label>
<Div class = "input-group date col-sm-7" id = "datetimepicker1">
<Input type = "text" class = "form-control" id = "barStratDate">
<Span class = "input-group-addon">
<Span class = "glyphicon-calendar"> </span>
</Span>
</Div>
</Div>