2016-04-28 8 views
0

Ich möchte das DIV verwenden, um meinen Bericht anzuzeigen, also sehe ich die icCube-Dokumentation icCube Web Reporting : Displaying a Report aber wenn ich versuche, es anzuwenden, bin ich verwirrt darüber, wie kann ich die verschiedenen Funktionen des Skripts auf der gleichen HTML-Seite sammeln, das sind die Funktionen:Wie kann ich die verschiedenen Funktionen des Skripts auf derselben HTML-Seite zusammenführen?

Der erste Teil

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") 
    }); 

}); 

Der zweite Teil

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) 
}); 

ich inderstand nicht, wie kann ich diese Teile setzen sammeln und Es ist sehr wichtig für mich, dieses Skript zu erstellen, das den Export des Berichts einfacher als zuvor macht.

Antwort

1

Sie können diese Teile zusammen in einer solchen Art und Weise verwenden:

<!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> 
0

Dies ist der correcte Code

<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> 

+0

Haben Sie richtigen Namen des Berichts anstelle von „Mein Bericht gesetzt "=>' var options = {Bericht: {Name: 'Mein Bericht'}}; '? Tauschen Sie auch die Zeile 'alert ("Report opened successfully") mit dem benötigten Callback aus. –

+0

Ich habe eine andere Notwendigkeit, ich möchte dieses Diagramm zu Excel exportieren Mit diesem div, mit dem ich bereits gearbeitet habe, können Sie darüber helfen, denn das ist mein Ziel ist es, es zu Excel oder zu Bild exportieren, aber ich nicht finden Sie eine Lösung für diese –

+0

Wenn Sie über den Bericht sprechen, können Sie es in PDF exportieren und dann in Ihre Excel-Datei aufnehmen. Auf der anderen Seite, wenn Sie ein Diagramm-Widget meinen, verwenden Sie die eigene Export-to-Image-Funktionalität. Bitte geben Sie Ihre Frage an. –