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

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>

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

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

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

@{
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">

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

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

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

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

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

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

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');//隐藏列

<!-- 模态框（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">

<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('hide');
$("#AdminName").val("");
$("#AdminEmailData").val("");

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

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>";//红色警告框

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

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 } 图表的响应式属性.非常难看
}

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