如何将脚本的不同功能放在同一个html页面中
How can I put the differents functions of the script together in the same html page?
我想使用div来显示我的报告,所以我看到了icCube文档icCube Web Reporting:显示报告,但当我尝试应用它时,我不知道如何将脚本的不同函数收集在同一个html页面中,这些函数是:
第一部分
var ic3reporting = new ic3.Reporting({
noticesLevel: ic3.NoticeLevel.ERROR,
dsSettings: {
userName: "demo",
userPassword: "demo",
url: "http://localhost:8282/icCube/gvi"
}
});
ic3reporting.setupGVIConfiguration(function() {
ic3reporting.setupApplication({
mode: ic3.MainReportMode.REPORTING,
menu: ic3.MainReportMenuMode.OFF,
noticesLevel: ic3.NoticeLevel.ERROR,
container: $("#report-container")
});
});
第二部分
var options = {
report: { name: 'My Report' },
mode: ic3.MainReportMode.EDITING_REPORTING,
menu: ic3.MainReportMenuMode.ON,
noticesLevel: ic3.NoticeLevel.INFO
};
ic3reporting.openReport(options, function() {
// your callback (I don't inderstand how can i putting this code)
});
我不知道我怎么能把这些零件收集起来构建这个脚本对我来说非常重要,这使报告的导出比以前更容易。
您可以通过以下方式将这些部分一起使用:
<!doctype html>
<head lang="en">
<meta charset="utf-8">
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%
}
</style>
</head>
<body>
<!-- 1. Define container for the report somewhere in html page -->
<div id="report-container"></div>
<!-- 2. Include reporting application scripts -->
<script src="http://localhost:8282/icCube/doc/ic3-report/app/reporting/js/loader/ic3bootstrap.js"></script>
<!-- 3. Initialization sequence -->
<script type="text/javascript">
var ic3root = "http://localhost:8282/icCube/doc/ic3-report/app/";
var ic3rootLocal = "http://localhost:8282/icCube/doc/ic3-report/app-local/";
// ic3reporting variable could be used globally, consider using array or different names here if
// you are going to show multiple report applications at the same time
var ic3reporting = null;
var options = {
root: ic3root,
rootLocal: ic3rootLocal,
// This function starts work just after initialization of reporting framework
callback: function () {
// 3.1 Create reporting instance with proper data source configuration
ic3reporting = new ic3.Reporting({
noticesLevel: ic3.NoticeLevel.ERROR,
dsSettings: {
userName: "demo",
userPassword: "demo",
url: "http://localhost:8282/icCube/gvi"
}
});
// 3.2 This function setups connection to the configured datasource and calls callback when connection is ready
ic3reporting.setupGVIConfiguration(function () {
// 3.3 Here we have ready connection, time to show empty reporting application
var initialApplicationOptions = {
mode: ic3.MainReportMode.REPORTING,
menu: ic3.MainReportMenuMode.OFF,
noticesLevel: ic3.NoticeLevel.ERROR,
container: $("#report-container")
};
ic3reporting.setupApplication(initialApplicationOptions);
// 3.4 just after setupApplication we have ready to work reporting environment, we can open reports, switch modes, etc
// here we have open report sequence
var options = {report: {name: 'My Report'}};
ic3reporting.openReport(options, function () {
alert("Report opened successfully")
});
});
}
};
ic3ready(options);
</script>
</body>
</html>
这是正确的代码
<html>
<head lang="en">
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- ic3 bootstrap javascript -->
<script src="http://localhost:8282/icCube/doc/ic3-report/app/reporting /js/loader/ic3bootstrap.js"></script>
<script type="text/javascript">
/**
* Location of the icCube reporting files; not necessarily co-located
* with this HTML page. For example, assuming this file is located within
* the "Docs" repository of a local icCube install, this path would be :
*
* /icCube/doc/ic3-report/app/reporting/
*/
var ic3root = "http://localhost:8282/icCube/doc/ic3-report/app/";
var ic3rootLocal = "http://localhost:8282/icCube/doc/ic3-report/app-local/";
var options = {
root: ic3root,
rootLocal: ic3rootLocal,
callback: function () {
var ic3reporting = new ic3.Reporting(
{
noticesLevel:ic3.NoticeLevel.ERROR,
dsSettings:{
userName:"demo",
userPassword:"demo",
url: "http://localhost:8282/icCube/gvi"
}
});
ic3reporting.setupGVIConfiguration(function () {
ic3reporting.setupApplication(
{
mode:ic3.MainReportMode.REPORTING,
menu:ic3.MainReportMenuMode.OFF,
noticesLevel:ic3.NoticeLevel.ERROR,
container:$(".ic3-report-content-container")
});
var options = {
report:{
name:'rapportest'
},
mode:ic3.MainReportMode.EDITING_REPORTING,
menu:ic3.MainReportMenuMode.OFF,
noticesLevel:ic3.NoticeLevel.INFO
};
ic3reporting.openReport(options, function () {
alert("Report opened successfully")
});
});
}
};
ic3ready(options);
</script>
<div class="ic3-report-content-container" style="border:solid 1px red;"></div>
相关文章:
- 按下一个HTML按钮,该按钮使用一个功能在同一个新窗口中打开URL
- 单击和dblclick在同一个html上传递不同的parentNodes.为什么?
- HTML/CSS/JS切换不同的谷歌日历是同一个框架
- 如何将脚本的不同功能放在同一个html页面中
- 我怎么能在同一个HTML页面上多次在不同的段落中添加相同的字符串呢
- 在同一个html页面中显示servlet响应而不隐藏表单
- 在同一个html页面上显示多个人力车图
- 将同一个jquery文件中的几个js函数以我选择的不同间隔加载到几个html页面中
- 为什么在我的HTML文件中创建新表而不是刷新同一个表
- Javascript和jQuery在同一个HTML文件上
- 可以't在HTML修改后恢复所选内容,即使它'是同一个HTML
- 如何从同一个html页面上的多个按钮打开一个对话框
- 如何将多个事件处理程序添加到同一个html元素中,并根据事件执行不同的方法
- 在同一个html中使用javascript和php
- 当多个
- 您可以在同一个HTML表单上有多个Plupload实例吗?
- 如何使后退按钮在同一个html页面
- 一个JS文件中的3个JS代码块,如果在同一个html页面中放置3次,永远不要重复一个代码块
- 多个处理程序附加到同一个HTML元素
- 在angularjs中如何通过不同的链接在同一个html页面上附加两个json文件