<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link href="~/assets/custom/css/table.css" rel="stylesheet">
<link href="~/assets/custom/css/table-responsive.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="~/Scripts/data-tables/DT_bootstrap.css" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->../css/mobiscroll.custom-3.0.0-beta6.min.css
<link rel="stylesheet" type="text/css" href="~/assets/custom/css/mobiscroll.custom-3.0.0-beta6.min.css" />
<title>旅行社后台管理</title>
@RenderSection("CssSection", required: false)
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
a {
color: #65CEA7;
}
#btns-download {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
list-style: none;
float: right;
}
#btns-download li {
margin-right: 10px;
}
</style>
</head>
<body class="sticky-header">
<section>
<!-- main content start-->
<div class="main-content">
<!-- header section start-->
<div class="header-section" style="background-color: #424f63;">
<!--notification menu start -->
<div class="menu-right">
<ul class="notification-menu">
<li>
<a href="#" class="btn dropdown-toggle" data-toggle="dropdown" style="background-color: #424f63;">
<span id="userName">admin</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu dropdown-menu-usermenu pull-right">
<li>
<a href="Login"><i class="fa fa-sign-out"></i> 退出</a>
</li>
</ul>
</li>
</ul>
</div>
<!--notification menu end -->
</div>
<!-- header section end-->
<!-- page heading start-->
<div class="page-heading">
<h3 id="travelName">
@ViewBag.TravelService.name
</h3>
</div>
<!-- page heading end-->
<!--body wrapper start-->
<div class="wrapper">
<div class="row">
<div class="col-md-12">
<section class="panel">
<div class="panel-body">
<form action="#" class="form-horizontal ">
<div class="form-group" style="display: -webkit-box;display: -ms-flexbox;display: flex;margin: 0;">
<label class="control-label">选择月份:</label>
<div style="margin-left: 20px;">
<div class="input-group input-large custom-date-range" data-date="13/07/2013" data-date-format="mm/dd/yyyy">
<!--<input id="startDate" type="text" placeholder="请选择日期 ..." class="form-control dpd1" name="from" readonly/>
<span class="input-group-addon">到</span>
<input id="endDate" type="text" placeholder="请选择日期 ..." class="form-control dpd2" name="to" readonly/>-->
<input id="txtMonth" type="text" placeholder="请选择月份" />
</div>
<!--<span class="help-block">请选择日期</span>-->
</div>
</div>
</form>
<!--<div id="demo"></div>-->
</div>
</section>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<section class="panel">
<header class="panel-heading">
所选月份的数据
<!-- 选择打印方式 start-->
<ul id="btns-download" role="menu">
<li>
<a class="export" href="#"> <img src='~/assets/custom/img/TripManagement/csv.png' width='24px'> CSV</a>
</li>
</ul>
<!-- 选择打印方式 end -->
</header>
<div class="panel-body">
<div class="adv-table-container">
<div id="table-container" class="adv-table table-responsive">
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<!-- main content end-->
</section>
<!-- Placed js at the end of the document so the pages load faster -->
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="~/Scripts/mobiscroll.custom-3.0.0-beta6.min.js" type="text/javascript" charset="utf-8"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery.nicescroll.js"></script>
<!--common scripts for all pages-->
<script src="~/Scripts/my-nicescroll.js"></script>
<script src="~/Scripts/Table.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
$("#userName").html(sessionStorage.userName);
//$("#travelName").html(sessionStorage.travelName);
/* 日期选择 */
var now = new Date(),
start = new Date(now.getFullYear(), now.getMonth() - 12);
$('#txtMonth').mobiscroll().date({
theme: 'mobiscroll',
lang: 'zh',
display: 'bottom',
dateWheels: 'yy MM',
dateFormat: 'yy - mm',
/*min: start,
minWidth: 100,*/
max: now
});
$("#txtMonth").on("change", function () {
var dateStr = $(this).val().replace(/\s/g, '').split("-").join("") + "01";
console.log(dateStr);
/* 获取table数据 */
$.ajax({
url: "/api/IOrder/GetOrderDataForTravel",
type: "GET",
data: {
"triptoken": '@ViewBag.TravelService.triptoken',
"id": '@ViewBag.TravelService.id',
"ymd": dateStr
},
dataType: "json",
success: function (res) {
/* 初始化表格 */
Table().init({
id: 'table-container',
header: ['手机号码', '订单总金额', '注册时间', '佣金率（%）', '佣金总额'],
data: res
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
// 通常 textStatus 和 errorThrown 之中
// 只有一个会包含信息
this; // 调用本次AJAX请求时传递的options参数
}
});
})
/* 导出CSV文件 */
function exportTableToCSV($table, filename) {
var $rows = $table.find('tr:has(td)'),
// Temporary delimiter characters unlikely to be typed by keyboard
// This is to avoid accidentally splitting the actual contents
tmpColDelim = String.fromCharCode(11), // vertical tab character
tmpRowDelim = String.fromCharCode(0), // null character
// actual delimiter characters for CSV format
colDelim = '","',
rowDelim = '"\r\n"',
// Grab text from table into CSV formatted string
csv = '"' + $rows.map(function (i, row) {
var $row = $(row),
$cols = $row.find('td');
return $cols.map(function (j, col) {
var $col = $(col),
text = $col.text();
return text.replace('"', '""'); // escape double quotes
}).get().join(tmpColDelim);
}).get().join(tmpRowDelim)
.split(tmpRowDelim).join(rowDelim)
.split(tmpColDelim).join(colDelim) + '"',
// Data URI
csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
$(this)
.attr({
'download': filename,
'href': csvData,
'target': '_blank'
});
}
// This must be a hyperlink
$(".export").on('click', function (event) {
// CSV
exportTableToCSV.apply(this, [$('#customers'), Math.random().toString(36).substr(2) + '.csv']);
// IF CSV, don't do event.preventDefault() or return false
// We actually need this to be a typical hyperlink
});
});
</script>
</body>
</html>
渲染表格：
function Table() {
var TClass = {}; //操作数据（table数据的的对象）
var Tool = {}; //创建table各个节点的总对象
var DataStore = {}; //保存获取到的json数据再报这些数据转化成所需要的table数据对象
var Option = {}; //参数选项
Tool.createHeader = function(htmls, data) { //创建表头
htmls.push('<thead><tr>');
for(var i in data) {
htmls.push('<th>' + data[i] + '</th>');
}
htmls.push('</tr></thead>');
};
Tool.createFooter = function(htmls, data) { //创建表尾
htmls.push('<tfoot><tr>');
for(var i in data) {
htmls.push('<th>' + data[i] + '</th>');
}
htmls.push('</tr></tfoot>');
};
Tool.createRow = function (htmls, data) { //创建一行
htmls.push('<tr>');
var index = 0;
for (var i in data) {
if (index != 1) {
if (i.indexOf('registertime') != -1) {
htmls.push('<td>' + data[i].replace('T',' ') + '</td>');
} else {
htmls.push('<td>' + data[i] + '</td>');
}
}
index++;
}
htmls.push('</tr>');
};
Tool.render = function(id, tag) { //渲染页面
var htmls = [];
var option = Option[id];
if(DataStore[id]['data'].length == 0) {
htmls.push("<div>没有相关数据！</div>");
} else {
htmls.push('<table id="customers" class="table table-bordered table-striped table-condensed">');
Tool.createHeader(htmls, DataStore[id]['header']);
for(var i in DataStore[id]['data']) {
Tool.createRow(htmls, DataStore[id]['data'][i]);
}
Tool.createFooter(htmls, DataStore[id]['header']);
htmls.push('</table>');
}
tag.empty().append(htmls.join(''));
};
Tool.getValue = function(value, defalutValue) {
if(typeof value == 'undefined') {
return defalutValue;
} else {
return value;
}
};
TClass.init = function(option) {
var id = option['id'];
var tag = $('#' + id); //获取table的节点
var header = option['header']; //获取头部title数组的数据
var data = option['data']; //获取表格正文数据
DataStore[id] = { //初始化DataStore的id为这个，的对象，里面有两个属性信息header和data
header: header,
data: data
};
Tool.render(id, tag);
};
TClass.getValue = function(id, row, column) {
return DataStore[id]['data'][row - 1][column - 1];
};
TClass.setValue = function(id, row, column, value) {
DataStore[id]['data'][row - 1][column - 1] = value;
};
TClass.getValues = function(id) {
return DataStore[id]['data'];
};
TClass.addRow = function(id, data) {
DataStore[id]['data'].push(data);
};
TClass.deleteRow = function(id, row) {
DataStore[id]['data'].splice(row - 1, 1);
};
TClass.getRowCount = function(id) {
return DataStore[id]['data'].length;
};
TClass.render = function(id) {
Tool.render(id, $('#' + id));
};
return TClass;
}