使用JSviewer如何在工具栏添加按钮
本帖最后由 KearneyKang 于 2019-12-24 14:50 编辑目前JSviewer在工具栏上非常的齐全，基本可以满足需求。但是有的时候还是需要自己收到添加一些按钮来解决一些问题。例如导出Excel的时候，当报表多页的时候导出会有多个sheet页，这个需要进行一个报表属性的设置。或者导出文件的时候需要修改导出报表的名称或者设置其他属性。具体截图：
一、下面我们先来说说如何在导出的时候自定义一个 单表Excel 的按钮实现导出Excel报表时的属性设置。
具体步骤如下：1、 需要引用jquery.min.js 文件2、 使用Jquery选择器对单个元素或者组件进行操作3、 给导出按钮的下拉框下添加一个导出样式选择按钮具体实现代码：<script type="text/javascript">
var reportName = "";
var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#viewer-id',
reportService: {
url: 'api/reporting',
},
reportID: '多条件级联模糊过滤.rdlx',
settings: {
zoomType: 'FitPage'
},
reportLoaded: function (reportInfo) {
reportName = reportInfo.name;
var dotPosition = reportName.lastIndexOf(".");
if (dotPosition > 0) {
reportName = reportName.substr(0, dotPosition);
}
}
});
//增加导出单页Excel按钮
$(".mdi-download").parent().bind('click', function () {
addSimpleSheetExcelButton();
});
function addSimpleSheetExcelButton() {
if ($(".ef-dd-menu").length > 0) {
var simpleSheetExcelButton = "<button id='export-simple-sheet-excel' class='btn btn-default' title='导出为 单表Excel 文档'><i class='mdi mdi-file-excel-box mdi-18px'></i><span class='ef-dd-item-text'>单表Excel</span></button>";
$($("#viewer-id .mdi-file-excel").parent()).before(simpleSheetExcelButton);
$("#export-simple-sheet-excel").click(function () {
viewer.export('Xlsx', null, true, { FileName: reportName + '.xlsx', Multisheet: 'False', Pagination: 'False' });
});
}
else {
setTimeout(addSimpleSheetExcelButton, 100);
}
}
</script>
注意点：记得添加jquery.min.js的引用，不然你写的方法执行不了二、如何在工具栏按钮1、实现代码：$(document).ready(function () {
$(".gces-viewer-tools").
append("<div style='float:left;position:absolute;right:220px;'><input id='btnPrint' type='Button' value='编辑报表' onclick='Edit()' style='font-size:14px; width:80px;height:40px;background-color:#D8D8D8;' /></div>");
});
总的页面代码：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="scripts/materialdesignicons.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.cat.net/css?family=Open+Sans:400,300,600,700" type="text/css">
<link href="scripts/jsViewer.min.css" rel="stylesheet" />
<script src="scripts/jsViewer.min.js"></script>
<script src="scripts/jquery.min.js"></script>
</head>
<body>
<div id="viewer-id" style="height: 1000px"></div>
</body>
</html>
<script type="text/javascript">
var reportName = "";
var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#viewer-id',
reportService: {
url: 'api/reporting',
},
reportID: '多条件级联模糊过滤.rdlx',
settings: {
zoomType: 'FitPage'
},
reportLoaded: function (reportInfo) {
reportName = reportInfo.name;
var dotPosition = reportName.lastIndexOf(".");
if (dotPosition > 0) {
reportName = reportName.substr(0, dotPosition);
}
}
});
//增加导出单页Excel按钮
$(".mdi-download").parent().bind('click', function () {
addSimpleSheetExcelButton();
});
$(document).ready(function () {
$(".gces-viewer-tools").
append("<div style='float:left;position:absolute;right:220px;'><input id='btnPrint' type='Button' value='编辑报表' onclick='Edit()' style='font-size:14px; width:80px;height:40px;background-color:#D8D8D8;' /></div>");
});
function addSimpleSheetExcelButton() {
if ($(".ef-dd-menu").length > 0) {
var simpleSheetExcelButton = "<button id='export-simple-sheet-excel' class='btn btn-default' title='导出为 单表Excel 文档'><i class='mdi mdi-file-excel-box mdi-18px'></i><span class='ef-dd-item-text'>单表Excel</span></button>";
$($("#viewer-id .mdi-file-excel").parent()).before(simpleSheetExcelButton);
$("#export-simple-sheet-excel").click(function () {
viewer.export('Xlsx', null, true, { FileName: reportName + '.xlsx', Multisheet: 'False', Pagination: 'False' });
});
}
else {
setTimeout(addSimpleSheetExcelButton, 100);
}
}
</script>
页:
[1]