动态拼接成二维列表头。。。
小结：根据后台传出数据，拼接需要的二维列数组，关键是重新设置columns:属性
function zhihang() {
var rowArr1 = [], rowArr2 = [], cols = [], flag = false;
$('#dg_zhihang').datagrid({
loadFilter: pagerFilter,
url: "/Service/Customer.ashx?Method=List_guanxia_calendar_network&type=2&" + $("#form1").serialize(), //请求路径
method: 'get',
singleSelect: true, //选中一行的设置
rownumbers: true, //行号
sortName: 'NetworkNO',
sortOrder: 'desc',
//remoteSort: false,
remoteSort: false,
showFooter: true,
height: $(window).height() - 238,
pageSize: 18,
pageList: [5, 10, 18, 25, 30],
onLoadSuccess: function (data) {
if (!flag) {
var yearNo = $("#TextBox2").val().substr(0, 4);
for (var prop in data.rows[0]) {//
if (data.rows[0][prop] != null && /^[0-9]+$/.test(prop.substr(0, 1))) {
rowArr1.push({
field: prop, title: prop, width: 70, halign: 'center', align: 'right', sortable: true, order: "desc", formatter: function (value) { return value==null?"":value + '万';}
});
//console.log(yearNo + "-" + prop);
rowArr2.push({ field: prop, title: getWeek(yearNo + "-" + prop), width: 70, halign: 'center', align: 'right', sortable: true, order: "desc", formatter: function (value) { return value == null ? "" : value + '万'; } });
}
}
// }
cols.push(rowArr1);
cols.push(rowArr2);
$('#dg_zhihang').datagrid({
columns: cols
});
flag = true;
//console.log(data);
}
tempData = data.originalRows;
$("#dg_zhihang").datagrid('statistics',tempData);
},
frozenColumns: [[
{ field: "Name", title: "支行名称", width: 130, halign: 'center', sortable: true, order: "desc" },
{ field: "NetworkNO", title: "支行号", width: 70, align: 'center', sortable: true, order: "desc" },
]],
columns: cols,
pagination: true
});
$("#dg_zhihang").datagrid('getPager').pagination({
beforePageText: "第",
afterPageText: "页 共{pages}页",
displayMsg: "当前 {from} - {to}条数据 共{total} 条数据",
pageSize: 18,
pageList: [5, 10, 18, 25, 30]
});
}
function getWeek(dateString) {
var arys1 = new Array();
arys1 = dateString.split('-'); //日期为输入日期，格式为 2013-3-10
var ssdate = new Date(arys1[0], parseInt(arys1[1] - 1), arys1[2]);
var week1 = String(ssdate.getDay()).replace("0", "日").replace("1", "一").replace("2", "二").replace("3", "三").replace("4", "四").replace("5", "五").replace("6", "六");//就是你要的星期几
var week = "星期" + week1;
return week;
};
function report() {
if (tempData.length == undefined)
top.$.messager.info('提示', '暂时没有数据可导出');
else {
JSonToCSV.setDataConver({
data: tempData,
fileName: '销售数据报表',
});
}
}二维列表格底部加合计
小结：需要注意的是，二维列的时候，是statistics:方法，一维列的时候，statistics方法
需要显示：showFooter:true
//$(function () {
$.extend($.fn.datagrid.methods,
{
statistics: function (jq,data) {
//console.log(jq);
if(data==null ||data.length==0 ){
return;
}
//console.log(jq );
//console.log(typeof(jq.length));
//console.log(data);
//alert(arguments.length);
var opt = $(jq).datagrid('options').columns;
var frzOpt = $(jq).datagrid("options").frozenColumns;
var rows = $(jq).datagrid("getRows");
if (data instanceof Array) {
var rows = data;
}
else {
var rows = $(jq).datagrid("getRows");
}
//console.log(opt);
//console.log(frzOpt);
//debugger;
var footer = new Array();
footer['sum'] = "";
//设置为opt[1]也就是第二列，主要是二维表头处理
for (var i = 0; i < opt[1].length; i++) {
//if (opt[1][i].sum) {
// footer['sum'] = footer['sum'] + sum(opt[1][i].field, 1) + ',';
//}
if (opt[1][i].field) {
//console.log(opt[1][i].field);
footer['sum'] = footer['sum'] + sum(opt[1][i].field) + ',';
//这里已经将需要的json拼接完成
}
}
//---------
for (var i = 0; i < opt[0].length; i++) {
//if (opt[1][i].sum) {
// footer['sum'] = footer['sum'] + sum(opt[1][i].field, 1) + ',';
//}
if (opt[0][i].field) {
//console.log(opt[0][i].field);
footer['sum'] = footer['sum'] + sum(opt[0][i].field) + ',';
//这里已经将需要的json拼接完成
}
}
//console.log(footer['sum']);
var footerObj = new Array();
if (footer['sum'] != "") {
var tmp = '{' + footer['sum'].substring(0, footer['sum'].length - 1) + "}";
//console.log(tmp);
var obj = eval('(' + tmp + ')');
if (frzOpt[0][0].field != undefined) {
//将合计放在名称一类，第一列opt[0][0].field
//合计unicode转码，不清楚放在另外一个文件夹，又没事儿
footer['sum'] += '"' + frzOpt[0][0].field + '":"<b>\u5408\u8ba1:</b>"';
//第0列显示为合计
obj = eval('({' + footer['sum'] + '})');
}
else {
obj[opt[0][1].field] = "<b>\u5408\u8ba1:</b>" + obj[opt[0][1].field];
}
//obj.frzOpt[0][0].field = "合计:";
footerObj.push(obj);
}
if (footerObj.length > 0) {
//footerObj[0].shouyilv = (footerObj[0].shouyi / footerObj[0].Benjin) * 100;
//footerObj[0]
$(jq).datagrid('reloadFooter', footerObj);
// $(jq).datagrid('reloadFooter');
//$(jq).datagrid('reload');
return footerObj;
//$(jq).datagrid('insertRow', footerObj[0]);
//使用getData方法获取grid的数据data，然后将ajax请求的数据push到data中，最后在进行loadData
//最后一列，不是直接求和，而是收益除以本金
}
function sum(filed) {
var sumNum = 0;
var str = "";
for (var i = 0; i < rows.length; i++) {
var num = rows[i][filed];
sumNum += Number(num);
}
//console.log(filed.substr(filed.length - 2, 2));
if (filed.substr(filed.length - 2, 2) == '排名' || typeof (rows[0][filed]) != 'number' || filed == "年龄"||filed.substr(filed.length - 2, 2) == '简称') {
//console.log(sumNum.toFixed(2));
//return '"' + filed + '":' + sumNum + '';
}
else {
return '"' + filed + '":' + sumNum.toFixed(2) + '';
}
}
}
});
//});
$.extend($.fn.datagrid.methods,
{
statistics_: function (jq, data) {
if(data==null ||data.length==0 )
{
return;
}
//console.log(jq );
//console.log(typeof(jq.length));
//console.log(data);
//alert(arguments.length);
var opt = $(jq).datagrid('options').columns;
//console.log(opt);
var frzOpt = $(jq).datagrid("options").frozenColumns;
if (data instanceof Array) {
var rows = data;
}
else {
var rows = $(jq).datagrid("getRows");
}
var footer = new Array();
footer['sum'] = "";
//设置为opt[1]也就是第二列，主要是二维表头处理
//-------------------------------非二维列，只要【0】而不是【1】
for (var i = 0; i < opt[0].length; i++) {
//if (opt[1][i].sum) {
// footer['sum'] = footer['sum'] + sum(opt[1][i].field, 1) + ',';
//}
if (opt[0][i].field) {
footer['sum'] = footer['sum'] + sum(opt[0][i].field) + ',';
//这里已经将需要的json拼接完成
}
}
//console.log(footer['sum']);
var footerObj = new Array();
if (footer['sum'] != "") {
var tmp = '{' + footer['sum'].substring(0, footer['sum'].length - 1) + "}";
var obj = eval('(' + tmp + ')');
if (obj[frzOpt[0][0].field] == undefined) {
//将合计放在名称一类，第一列opt[0][0].field
footer['sum'] += '"' + frzOpt[0][0].field + '":"<b>\u5408\u8ba1:</b>"';
//第0列显示为合计
obj = eval('({' + footer['sum'] + '})');
}
else {
obj[opt[0][0].field] = "<b>\u5408\u8ba1:</b>" + obj[opt[0][0].field];
}
footerObj.push(obj);
}
//console.log(footerObj);
if (footerObj.length > 0) {
//footerObj[0].shouyilv = (footerObj[0].shouyi / footerObj[0].Benjin) * 100;
$(jq).datagrid('reloadFooter', footerObj);
//$(jq).datagrid('reload');
return footerObj;
//$(jq).datagrid('insertRow', footerObj[0]);
//使用getData方法获取grid的数据data，然后将ajax请求的数据push到data中，最后在进行loadData
//最后一列，不是直接求和，而是收益除以本金
}
function sum(filed) {
var sumNum = 0;
var str = "";
for (var i = 0; i < rows.length; i++) {
var num = rows[i][filed];
sumNum += Number(num);
}
//console.log(filed.indexOf("排名") + filed);
if (filed.substr(filed.length - 2, 2) == '排名' ||typeof(rows[0][filed])!='number' || filed=="年龄") {
//console.log(sumNum.toFixed(2));
//return '"' + filed + '":' + sumNum + '';
}
else {
return '"' + filed + '":' + sumNum.toFixed(2) + '';
}
//去掉双引号，这是一个数字
}
}
});
前端分页
function pagerFilter(data) {
if (typeof data.length == 'number' && typeof data.splice == 'function') { // 判断数据是否是数组
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
var opts = dg.datagrid('options');
var pager = dg.datagrid('getPager');
pager.pagination({
onSelectPage: function (pageNum, pageSize) {
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh', {
pageNumber: pageNum,
pageSize: pageSize
});
dg.datagrid('loadData', data);
}
});
if (!data.originalRows) {
data.originalRows = (data.rows);
}
var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = (data.originalRows.slice(start, end));
return data;
}
前端生成报表
小结：浏览器兼容性，和表格样式可调整性偏低，建议还是后台借助微软第三方插件
function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {
//If JSONData is not an object then JSON.parse will parse the JSON string in an Object
var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
var CSV = '';
//Set Report title in first row or line
//CSV += ReportTitle + '\r\n\n';
//This condition will generate the Label/Header
if (ShowLabel) {
var row = "";
//This loop will extract the label from 1st index of on array
for (var index in arrData[0]) {
//Now convert each value to string and comma-seprated
row += index + ',';
}
row = row.slice(0, -1);
//append Label row with line break
CSV += row + escape('\r\n');
}
//1st loop is to extract each row
for (var i = 0; i < arrData.length; i++) {
var row = "";
//2nd loop will extract each column and convert it in string comma-seprated
for (var index in arrData[i]) {
row += '"' + arrData[i][index] + '",';
}
row.slice(0, row.length - 1);
//add a line break after each row
CSV += row + escape('\r\n');
//CSV += row + encodeURIComponent('\r\n');
}
if (CSV == '') {
alert("Invalid data");
return;
}
//Generate a file name
var fileName = "";
//this will remove the blank-spaces from the title and replace it with an underscore
fileName += ReportTitle.replace(/ /g, "_");
//Initialize file format you want csv or xls
var uri = 'data:text/xls;charset=utf-8,\ufeff' + CSV;
// Now the little tricky part.
// you can use either>> window.open(uri);
// but this will not work in some browsers
// or you will not get the correct file extension
//this trick will generate a temp <a /> tag
//--------------------------------------------------
//IE只能使用Blob文件下载，不支持URI，详见:
//https://technet.microsoft.com/ZH-CN/Library/hh779016.aspx
var ua = navigator.userAgent.toLowerCase();
if ((ua.indexOf("rv:11.0") != -1) || (ua.indexOf("msie") != -1)) {
//var data = "\ufeff" + CSV;
// var blob = new Blob([data], { type: 'text/csv,charset=UTF-8' });
//var blob = new Blob([decodeURIComponent(encodeURI(CSV))], {
// type: "text/csv;charset=utf-8;"
//});
// alert(true);
var blob = new Blob([decodeURIComponent("\ufeff" + CSV)], {
type: "text/csv;charset=utf-8;"
});
window.navigator.msSaveBlob(blob, fileName + ".xls");
/*
var link = document.createElement("a");
link.href = uri;
//set the visibility hidden so it will not effect on your web-layout
link.style.visibility = "hidden";
link.download = fileName + ".xls";
//this part will append the anchor tag and remove it after automatic click
document.body.appendChild(link);
link.click();
document.body.removeChild(link);*/
}
else {
//var link = document.createElement("a");
//link.href = encodeURI(CSV);
//link.style = "visibility:hidden";
//link.download = fileName + ".csv";
//document.body.appendChild(link);
//link.click();
//document.body.removeChild(link);
var link = document.createElement("a");
link.href = uri;
//set the visibility hidden so it will not effect on your web-layout
link.style.visibility = "hidden";
link.download = fileName + ".xls";
//this part will append the anchor tag and remove it after automatic click
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
//------------------------------------------------------
}
var JSonToCSV = {
/*
* obj是一个对象，其中包含有：
* ## data 是导出的具体数据
* ## fileName 是导出时保存的文件名称 是string格式
* ## showLabel 表示是否显示表头 默认显示 是布尔格式
* ## columns 是表头对象，且title和key必须一一对应，包含有
title:[], // 表头展示的文字
key:[], // 获取数据的Key
formatter: function() // 自定义设置当前数据的 传入(key, value)
*/
setDataConver: function (obj) {
var bw = this.browser();
if (bw['ie'] < 9) return; // IE9以下的
var data = obj['data'],
ShowLabel = typeof obj['showLabel'] === 'undefined' ? true : obj['showLabel'],
fileName = (obj['fileName'] || 'UserExport') + '.csv',
columns = obj['columns'] || {
title: [],
key: [],
formatter: undefined
};
var ShowLabel = typeof ShowLabel === 'undefined' ? true : ShowLabel;
var row = "", CSV = '', key;
// 如果要现实表头文字
if (ShowLabel) {
// 如果有传入自定义的表头文字
if (columns.title.length) {
columns.title.map(function (n) {
row += n + ',';
});
} else {
// 如果没有，就直接取数据第一条的对象的属性
for (key in data[0]) row += key + ',';
}
row = row.slice(0, -1); // 删除最后一个,号，即a,b, => a,b
CSV += row + '\r\n'; // 添加换行符号
}
// 具体的数据处理
data.map(function (n) {
row = '';
// 如果存在自定义key值
if (columns.key.length) {
columns.key.map(function (m) {
row += '"' + (typeof columns.formatter === 'function' ? columns.formatter(m, n[m]) || n[m] : n[m]) + '",';
});
} else {
for (key in n) {
row += '"' + (typeof columns.formatter === 'function' ? columns.formatter(key, n[key]) || n[key] : n[key]) + '",';
}
}
row.slice(0, row.length - 1); // 删除最后一个,
CSV += row + '\r\n'; // 添加换行符号
});
if (!CSV) return;
this.SaveAs(fileName, CSV);
},
SaveAs: function (fileName, csvData) {
var bw = this.browser();
if (!bw['edge'] || !bw['ie']) {
var alink = document.createElement("a");
alink.id = "linkDwnldLink";
alink.href = this.getDownloadUrl(csvData);
document.body.appendChild(alink);
var linkDom = document.getElementById('linkDwnldLink');
linkDom.setAttribute('download', fileName);
linkDom.click();
document.body.removeChild(linkDom);
}
else if (bw['ie'] >= 10 || bw['edge'] == 'edge') {
var _utf = "\uFEFF";
var _csvData = new Blob([_utf + csvData], {
type: 'text/csv'
});
navigator.msSaveBlob(_csvData, fileName);
}
else {
var oWin = window.top.open("about:blank", "_blank");
oWin.document.write('sep=,\r\n' + csvData);
oWin.document.close();
oWin.document.execCommand('SaveAs', true, fileName);
oWin.close();
}
},
getDownloadUrl: function (csvData) {
var _utf = "\uFEFF"; // 为了使Excel以utf-8的编码模式，同时也是解决中文乱码的问题
if (window.Blob && window.URL && window.URL.createObjectURL) {
var csvData = new Blob([_utf + csvData], {
type: 'text/csv'
});
}
return URL.createObjectURL(csvData);
},
browser: function () {
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.indexOf('edge') !== -1 ? Sys.edge = 'edge' : ua.match(/rv:([\d.]+)\) like gecko/)) ? Sys.ie = s[1] :
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
return Sys;
}
};
扫一扫
1680
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
