WebDesigner API 说明(1)- Index.html 页面的组成
通用：<!DOCTYPE html>
<html lang="en">
<head>
<title>ActiveReports Web Designer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Mandatory -->
<link rel="stylesheet" href="vendor/css/materialdesignicons.min.css" media="all" type="text/css" />
<link rel="stylesheet" href="vendor/css/bootstrap.min.css" />
<link rel="stylesheet" href="vendor/css/font-awesome.min.css">
<link rel="stylesheet" href="vendor/css/ionicons.min.css">
<link rel="stylesheet" href="vendor/css/fonts-googleapis.css" type="text/css">
<!--------------->
<!-- Optional: Open-Report/Save-Report-As Dialogs -->
<link rel="stylesheet" href="file-dialog.css" />
<!-- Optional: Preview Report -->
<link rel="stylesheet" href="viewer-container.css" type="text/css">
<!-- Optional: Add Data Sets using Data Set Picker -->
<link rel="stylesheet" href="data-set-picker.css" />
<!-- Optional: File View -->
<link rel="stylesheet" href="file-view.css" />
<!-- Optional: Add/Edit Data Sources using Data Source Editor -->
<link rel="stylesheet" href="ar-datasource-editor.css" />
<!-- Mandatory -->
<link rel="stylesheet" href="web-designer.css" />
</head>
<body>
<!-- Mandatory -->
<script src="vendor/js/jquery.js"></script>
<script src="vendor/js/bootstrap.min.js"></script>
<!--------------->
<!-- Optional: Open-Report/Save-Report-As Dialogs -->
<script src="file-dialog.js"></script>
<!-- Optional - Preview Report -->
<script src="viewer-container.js"></script>
<!-- Optional: Add Data Sets using Data Set Picker -->
<script src="data-set-picker.js"></script>
<!-- Optional: File View -->
<script src="file-view.js"></script>
<!-- Optional: Add/Edit Data Sources using Data Source Editor -->
<script src="ar-datasource-editor.js"></script>
<!-- Mandatory -->
<script src="baseServerApi.js"></script>
<script src="web-designer.js"></script>
<!--------------->
<!-- Mandatory -->
<div id="designer-id" style="width: 100%; height: 100%;"></div>
<!-- Optional: File View -->
<div id="file-view-id" style="width: 100%; height: 100%; display: none;"></div>
<!-- Optional - Preview Report -->
<div id="viewer-container-id" style="width: 100%; height: 100%; display: none;"></div>
<!-- Optional: Save-Report-As Dialog -->
<div id="save-as-dialog-id" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: none;z-index: 9999;"></div>
<!-- Optional: Open-Report Dialog -->
<div id="open-dialog-id" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: none;z-index: 9999;"></div>
<!-- Optional: Add Data Sets using Data Set Picker -->
<div id="data-set-picker-dialog-id" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: none;z-index: 9999;background-color: #dedede;"></div>
<!-- Optional: Add/Edit Data Sources using Data Source Editor -->
<div id="data-source-editor-dialog-id"></div>
<script>
var designerId = 'designer-id';
var viewerContainerId = 'viewer-container-id';
var fileViewId = 'file-view-id';
var saveAsDialogId = 'save-as-dialog-id';
var openDialogId = 'open-dialog-id';
var dataSetPickerDialogId = 'data-set-picker-dialog-id';
var dataSourceEditorDialogId = 'data-source-editor-dialog-id';
/* Implementation Details - See the section below. */
/* Mandatory: Create Designer Options */
var designerOptions = GrapeCity.ActiveReports.WebDesigner.createDesignerOptions(baseServerApi);
/* Optional: Save Report */
designerOptions.saveButton.visible = true;
designerOptions.onSave = onSaveImpl;
/* Optional: Save Report As */
designerOptions.saveAsButton.visible = true;
designerOptions.onSaveAs = onSaveAsImpl;
/* Optional: Open Report */
designerOptions.openButton.visible = true;
designerOptions.onOpen = onOpenImpl;
/* Optional: File View */
designerOptions.openFileView = openFileViewImpl;
/* Optional: Preview Report */
designerOptions.openViewer = openViewerImpl;
/* Optional: Add/Edit/Remove Data Sets */
designerOptions.dataTab.dataSets.canModify = true;
/* Optional: Add Data Sets using Data Set Picker */
designerOptions.dataSetPicker.open = openDataSetPickerImpl;
designerOptions.dataSetPicker.close = closeDataSetPickerImpl;
/* Optional: Add/Edit/Remove Data Sources */
designerOptions.dataTab.dataSources.canModify = true;
/* Optional: Add/Edit Data Sources using Data Source Editor */
ARDataSourceEditor.init(dataSourceEditorDialogId);
designerOptions.openDataSourceEditor = openDataSourceEditorImpl;
/* Mandatory: Render Designer Application */
GrapeCity.ActiveReports.WebDesigner.renderApplication(designerId, designerOptions);
</script>
</body>
</html>
具体函数实现：
辅助功能：
var dialogs = [
saveAsDialogId, openDialogId,
dataSetPickerDialogId, dataSourceEditorDialogId,
];
var showElement = function (id) {
if (!id) return;
($('#' + id)).css('display', 'block');
};
var hideElement = function (id) {
if (!id) return;
($('#' + id)).css('display', 'none');
};
var hideDialogs = function () {
dialogs.forEach(hideElement);
}
var showDesigner = function () {
var info = GrapeCity.ActiveReports.WebDesigner.api.getReportInfo();
var isDirty = GrapeCity.ActiveReports.WebDesigner.api.isReportDirty();
document.title = info.name + (isDirty ? ' *' : '');
showElement(designerId);
GrapeCity.ActiveReports.WebDesigner.focus();
};
var makeOptions = function (baseOptions, additionalOptions) {
return $.extend({}, baseOptions || {}, additionalOptions || {});
}
报表保存
/* Optional: Save Report */
var onSaveImpl = function (options) {
baseServerApi
.saveExistingReport({ id: options.reportInfo.id, content: options.reportInfo.content })
.then(function (saveResult) {
options.onSuccess({
id: saveResult.Id,
name: options.reportInfo.name
});
});
};
另存为：
/* Optional: Save Report */
var onSaveImpl = function (options) {
baseServerApi
.saveExistingReport({ id: options.reportInfo.id, content: options.reportInfo.content })
.then(function (saveResult) {
options.onSuccess({
id: saveResult.Id,
name: options.reportInfo.name
});
});
};
打开文件：
/* Optional: Open Report */
var onOpenImpl = function (options) {
showElement(openDialogId);
var loadedReportList = null;
fileDialog.createOpenReportDialog(openDialogId, {
locale: options.locale,
api: {
getReportsList: function () {
return baseServerApi.getReportsList().then(function (reportsList) {
loadedReportList = reportsList;
return reportsList.map(function (reportInfo) {
return { path: reportInfo.Name };
});
});
},
openReport: function (openOptions) {
return new $.Deferred(function (def) {
var reportInfo = (loadedReportList || []).find(function (r) {
return r.Name === openOptions.path;
});
if (!reportInfo) return def.reject();
GrapeCity.ActiveReports.WebDesigner.api.openReport({
reportInfo: {
id: reportInfo._id,
name: reportInfo.Name,
permissions: ['all'],
},
onFinish: function () {
def.resolve({ id: reportInfo._id });
},
});
});
},
},
onSuccess: function (openResult) {
hideElement(openDialogId);
},
onClose: function () {
hideElement(openDialogId);
showDesigner();
},
});
};
打开文件对话框：
/* Optional: Open Report */
var onOpenImpl = function (options) {
showElement(openDialogId);
var loadedReportList = null;
fileDialog.createOpenReportDialog(openDialogId, {
locale: options.locale,
api: {
getReportsList: function () {
return baseServerApi.getReportsList().then(function (reportsList) {
loadedReportList = reportsList;
return reportsList.map(function (reportInfo) {
return { path: reportInfo.Name };
});
});
},
openReport: function (openOptions) {
return new $.Deferred(function (def) {
var reportInfo = (loadedReportList || []).find(function (r) {
return r.Name === openOptions.path;
});
if (!reportInfo) return def.reject();
GrapeCity.ActiveReports.WebDesigner.api.openReport({
reportInfo: {
id: reportInfo._id,
name: reportInfo.Name,
permissions: ['all'],
},
onFinish: function () {
def.resolve({ id: reportInfo._id });
},
});
});
},
},
onSuccess: function (openResult) {
hideElement(openDialogId);
},
onClose: function () {
hideElement(openDialogId);
showDesigner();
},
});
};
报表预览界面
/* Optional: Preview Report */
var openViewerImpl = function (options) {
hideElement(designerId);
showElement(viewerContainerId);
var viewerContainerOptions = makeOptions(options, {
makeViewerUrl: function () {
var baseUrl = 'http://localhost:58723/preview/';
var reportId = encodeURIComponent(options.reportInfo.id);
var language = options.locale;
return baseUrl + reportId + '?lng=' + language;
},
});
viewerContainer.renderViewerContainer(viewerContainerId, viewerContainerOptions, function () {
var isTemporaryReport = options.reportInfo.isTemporary;
if (isTemporaryReport) {
var reportId = options.reportInfo.id;
baseServerApi.deleteTemporaryReport({ id: reportId });
}
hideElement(viewerContainerId);
showDesigner();
});
};
设置数据集节点是否可见：
/* Optional: Add Data Sets using Data Set Picker */
var openDataSetPickerImpl = function (options) {
var openInPanel = options.mode === 'Panel';
if (!openInPanel) {
hideDialogs();
showElement(dataSetPickerDialogId);
}
dataSetPicker.renderDataSetPicker(openInPanel ? options.elementId : dataSetPickerDialogId, makeOptions(options, {
serverApi: {
getDataSetsList: baseServerApi.getDataSetsList,
getDataSourcesAndDataSets: baseServerApi.getDataSourcesAndDataSets,
},
onClose: function () {
options.onClose();
if (!openInPanel) hideElement(dataSetPickerDialogId);
dataSetPicker.dispose();
}
}));
};
var closeDataSetPickerImpl = function () {
dataSetPicker.dispose();
};
设置数据源编辑器隐藏或可见：
/* Optional: Add Data Sets using Data Set Picker */
var openDataSetPickerImpl = function (options) {
var openInPanel = options.mode === 'Panel';
if (!openInPanel) {
hideDialogs();
showElement(dataSetPickerDialogId);
}
dataSetPicker.renderDataSetPicker(openInPanel ? options.elementId : dataSetPickerDialogId, makeOptions(options, {
serverApi: {
getDataSetsList: baseServerApi.getDataSetsList,
getDataSourcesAndDataSets: baseServerApi.getDataSourcesAndDataSets,
},
onClose: function () {
options.onClose();
if (!openInPanel) hideElement(dataSetPickerDialogId);
dataSetPicker.dispose();
}
}));
};
var closeDataSetPickerImpl = function () {
dataSetPicker.dispose();
};
页:
[1]