BootStrap母版页布局.子页面布局.BootstrapTable.模态框.警告框.html导出tabl生成Excel.HTML生成柱图.饼图.时间控件中文版

如上就是很多后台管理系统的母版页布局.

左边一列模板.上面一列系统标识.

空白处充填子页面

以ASP.NET MVC为基础

引入bootstrap.js.bootstrap.css

body:

<div>
<ul class="nav pull-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" style="color:#000000">
"你的用户名" &nbsp;<span class="caret"></span>
</a>
<ul class="dropdown-menu dropdown-usermenu purple">
<li><a href="@Url.Action("Logout","User")"><i class="glyphicon glyphicon-off" style="margin-right:10px";></i><span>注销</span></a></li>
</ul>
</li>
</ul>
<h1 class="head"><strong>X公司X系统</strong></h1>
</div>

以上代码就是如上效果.

     ul class="nav pull-right"

  构成了右上角的用户和下拉框.

这个部分的颜色是渐变的.

使用代码实现.

如下：

<style>
.head{
font-family: 宋体;
color: #FFFFFF;
Margin: 0px;
background: linear-gradient(#71B2F0, #);
line-height: 80px;
padding-top: 35px;
padding-left:30px;
height: 150px;

}
</style>

重点是background: linear-gradient(#71B2F0, #104593);

<ul class="nav nav-pills nav-stacked pull-left" style="width:240px" id="jucheapMenu">
@if (myMenus != null && myMenus.Any())
{
StringBuilder sb = new StringBuilder();
var models = myMenus.Where(item => item.Type == MenuType.模块);
foreach (var m in models)
{
var menus = myMenus.Where(item => item.ParentId == m.Id && item.Type == MenuType.菜单);
sb.Append("<li >");
sb.AppendFormat("<a href=\"#\" data-url=\"{0}/{1}/{2}/0\" ><i class=\"{3}\" style=\"margin-right:10px\";></i><span>{4}</span></a>", m.Url, m.ParentId, m.Id, m.icon, m.Name);
sb.Append("</li>");
}
@(new MvcHtmlString(sb.ToString()))
}
</ul>

       在系统中.菜单分权限和角色.

             所以在此从数据库中取值.

                  实际生成的Html代码很简单.

<ul class="nav nav-pills nav-stacked pull-left" style="width:240px" id="jucheapMenu">

<li >

<a href=\"#\" data-url=\"你页面的连接" ><i class=\"图表\" style=\"margin-right:10px\";></i><span>“”展示的汉字“”</span></a>

</li>

</ul>

以上代码会形成如上图的导航元素.

最后加上以下代码

<div class="body-content">

<div class="wrapper">
@RenderBody()
<iframe id="txtContentBody" style="width:calc(100%); height: calc(100%); border: 0; margin: 0; padding: 0; min-height: 400px;overflow-y:scroll" src="@Url.Action("Welcome","Control",new { moudleId = 0, menuId = 0 , btnId = 0})"></iframe>
</div>
</div>

  iframe 内联框架就完成了常规后台系统的布局了.

上图是子页面布局的一个小例子

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

引入母版页.

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

开头声明两个div

 第一个class:class:row .

               第二个class:“col-lg-12”

这是bootstrap官网的写法.

            然后section.class:panel.

就形成了一个白色面板.（bootstrap底色默认灰）

section 里可以定义  <header class="panel-heading" style="margin-bottom: 10px;"> 和 panel-body.在此不介绍 class:Header.以class:body为例

<div class="panel-body">
<form class="form-inline" role="form">
<div class="form-group col-sm-4">

bootstrap有很多种布局,

 在此介绍我常使用的.class:panel-body代表一行

                         .class:form-inline代表横向排版

                                   class:form-group 代表一行中的一个

                                              .class:col-sm-4表示占多少格。

                                                   格数是开头定义的第2个div col-lg-12（默认一行12）

就像下面这个例子

<div class="panel-body">
<form class="form-inline" role="form">
<div class="form-group col-sm-4">
<select id="CountMonth" class="form-control">
@{
foreach (var item in @ViewData["monthFor12"] as List<string>)
{
if (Model.CountMonth.ToString() == item)
{
<option selected>@item</option>
}
else
{
<option>@item</option>
}

}
}
</select>&nbsp; <span class="text-invers">自动统计X个月内未修改密码的用户到管理员邮箱</span>
</div>
<div class="form-group col-sm-4 pull-right">
<button type="submit" class="btn btn-round btn-Other pull-right" ng-click="SendAdminEmail()">手动给管理员发报告</button>
</div>
</form>
</div>

如上图.很多后台系统都涉及到多条数据的展示。

业务处理。如果使用表格,传统的写法。

数据库噼里啪啦一大堆。后端分页一大堆，

前端在结合.繁琐重复三遍。

  bootstrap封装了数据展示，分页，增删改查的方法,并且样式也比传统html美观.

引入第三方插件.这是中文表单

<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', //请求后台的URL（*）
method: 'get', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber: , //初始化加载第一页，默认第一页
pageSize: , //每页的记录行数（*）
pageList: [, , , ], //可供选择的每页的行数（*）
search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列.选择字段展示
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: , //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: , //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "Id", //每一行的唯一标识，一般为主键列
showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: [{
checkbox: true
}, {
field: 'Name',
title: '名称'
},
{
field: 'EmailAddress',
title: '邮箱名称'
}
,
{
field: 'Id',
title: '主键列'
}
]
});
};

//得到查询的参数
oTableInit.queryParams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
limit: params.limit, //页面大小
offset: params.offset //页码
};
return temp;
};

bootstrapTable里还可以设置更多参数.方法.事件,可以参考bootstrap表格api

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

以下是C#服务端后台代码

[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);
}

只要返回的json中包含total就能完成分页，rows充填表格

queryParams 输入查询的条件

oTableInit.queryParams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
limit: params.limit, //页面大小
offset: params.offset, //页码
name: $("#Name").val(),
department: $("#Department").val(),
status: $("#Status").val(),
emailAddress: $("#EmailAddress").val()
};
return temp;
};

紧接着.很多表格都需要增删改查的功能。

如下新增按钮和删除

初始化时 js如下

toolbar: '#toolbar',                //工具按钮用哪个容器

html如下

<div class="panel-body">
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="btn_delete" type="button" class="btn btn-default" ng-click="DeleteAdminEmail()">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
</div>
<table id="Whitelist"></table>
</div>

形成最终页面

 下面介绍bootstrap的一些事件和方法

onDblClickCell.是点击表格里某一行的双击事件.

onDblClickCell: function (field, value, row, td) {
$('#myModal').modal('show');//这是模态框.后面会讲到
}

field：点击列的 field 名称，
value：点击列的 value 值，
row：点击列的整行数据，
$element：td 元素。

 $("#Whitelist").bootstrapTable('refresh');//这是表格的刷新属性

$("#Whitelist").bootstrapTable('getSelections');//当表格某一行被选中时获取选中行的数据.包括隐藏列

$("#Whitelist").bootstrapTable('remove', { field: 'Id',values: array });//移除表格的某一行数据

$('#Whitelist').bootstrapTable('showColumn', 'Name');//展示被隐藏的列
$('#Whitelist').bootstrapTable('hideColumn', 'Id');//隐藏列

上图就是一个模态框.来自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">新增白名单用户
</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">名称</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="AdminName" placeholder="名称">
</div>
</div>
</form>
<form class="form-horizontal">
<div class="form-group has-success">
<label class="col-sm-2 control-label" for="AdminEmailData">邮箱</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="AdminEmailData" placeholder="请输入邮箱">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="AddAdminEmail()">
提交更改
</button>
<button type="button" class="btn btn-default" ng-click="ClearAdminEmail()">
关闭
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>

想要实现模态框.只需要定义以下样式.

 <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就像我们子页面里的section.

按照子页面布局设计模态框就行.

-----

<button id="btn_add" type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>//html方式

$('#myModal').modal('show');//js方式

像上面这杨弹出模态框

$('#myModal').modal('hide');
$("#AdminName").val("");
$("#AdminEmailData").val("");

像上面这杨隐藏模态框.注意清除模态框中html元素的值

以上就是我常用的警告框

<section class="panel">
<div id="jsonResult">
</div>

section下定义空div.用js实现

var result = document.getElementById("jsonResult");
//bootstrap的警告框在弹窗关闭时是删除元素而不是隐藏.只能使用一次.所以在此拼接生成新的警告框.

//inter.innerHTML =,array.push() 这两种方式有明显迟钝.innerHTML += 多行会破坏布局
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>";

 //这是绿色警告框

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

//红色警告框

很多时候.我们需要报表的功能.如导出Excel.如生成图表.

<script>
var idTmr;
function getExplorer() {
var explorer = window.navigator.userAgent;
//ie
if (explorer.indexOf("MSIE") >= ) {
return 'ie';
}
//firefox
else if (explorer.indexOf("Firefox") >= ) {
return 'Firefox';
}
//Chrome
else if (explorer.indexOf("Chrome") >= ) {
return 'Chrome';
}
//Opera
else if (explorer.indexOf("Opera") >= ) {
return 'Opera';
}
//Safari
else if (explorer.indexOf("Safari") >= ) {
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();
var sel = document.body.createTextRange();
sel.moveToElementText(curTbl);
sel.select();
sel.execCommand("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();", );
}

}
else {
tableToExcel("Whitelist")
}
}
var tableToExcel = (function () {
var uri = 'data:application/vnd.ms-excel;base64,',
template = '<html><head><meta charset="UTF-8"></head><body><table>{table}</table></body></html>',
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>

以上代码支持主流浏览器的表单导出Excel.调用方法 ng-click="ImportEmployeeExcel()"  document.getElementById改成自己的表格Id就行

 在报表的时候.需要一些柱图.饼图.更简单粗暴的完成展示.在此以Chart.js实现.

引入一下插件

<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如下

var canvasBarData = {
labels: ["", "", "", "", "", "", ""],
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: [, , , , , , ]
}
]

}

var pieData = [
{
value: "",
color: "#fe7200",
highlight: "#ff8a2b",
label: "空闲"
},
{
value: "",
color: "#316fba",
highlight: "#6e9acf",
label: "占用"
}
];
window.onload = function () {
var Bar = document.getElementById("canvasBar").getContext("2d");
new Chart(Bar).Bar(canvasBarData);//柱状图

var Pie = document.getElementById("canvasPie").getContext("2d");
new Chart(Pie).Pie(pieData);//饼图
// { responsive: true } 图表的响应式属性.非常难看
}

html如下

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

<canvas id="canvasPie" />

最终效果如下

有动画效果还是很棒的

很多时候我们需要时间控件.但是bootstrap的时间控件默认是全英文.对于一些年长的领导难免不方便

引入一下插件

<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 如下

$('#datetimepicker1').datetimepicker({
format: 'YYYY-MM-DD',
locale: moment.locale('zh-cn')
});

HTML 如下

<div class="form-group col-sm-6 has-Standard">
<label class="control-label col-sm-5">开始时间</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 glyphicon-calendar"></span>
</span>
</div>
</div>

效果如下