1. 程式人生 > >java 一款可以與ssm框架完美整合的web報表控件

java 一款可以與ssm框架完美整合的web報表控件

cnblogs clas tar req pap 整合 大型 自定義報表 環境

  碩正套件運行於客戶端(瀏覽器),與應用服務器(Application Server)技術無關,所以能完全用於J2EE、
  ASP.Net、php等技術開發的Web應用產品中。
  碩正套件部署於服務器,支持包括Tomcat、IIS、WebSphere在內的所有Web服務器。

技術分享 碩正套件本身以C/C++開發,性能無可匹敵。對於Chrome、Firefox而言,碩正套件是一個符合Mozilla
  NPAPI 規範的Plug-in插件;而對於 IE 瀏覽器而言,碩正套件則是一個標準的ActiveX控件。

技術分享 碩正套件功能強大而尺寸奇小,總下載量才1MB (包括插件/加載項在內的所有功能組件)。

技術分享 碩正套件在純凈的Windows環境下就能運行,不需要諸如.NET FrameWork、Java的支撐環境。
  碩正套件支持Windows XP以後(包括Windows XP)的所有Windows系列操作系統。

技術分享

碩正套件的插件(FireFox)、加載項(IE)經國際著名的VeriSign公司代碼簽名,確保本產品能安全無阻地被
  自動下載、運行。

技術分享 碩正套件全部采用Unicode編碼,內置文字包含中文簡、繁體(BIG5)、英文,且支持動態切換,滿足了國
  際化應用的需求。

技術分享 碩正套件充分吸收了PowerBuilder Datawindow、ExtJS、DevExpress、Delphi 等開發工具的設計思
  想,由經驗豐富的 C/C++ 開發人員開發而成。碩正套件經已成功應用於多家大型企業、跨國軟件公司,
  經受住了成千上萬的最終用戶的考驗,很少發生由於內存泄漏或其它原因導致瀏覽器崩潰,事實證明碩
  正套件穩定堅固,安全可靠。

在我的新開發的項目中,需要一款可以讓用戶自定義報表的web控件,(網站上找過了很多report報表控件,諸如finereport等質量很高的報表控件,但是都是基於CS架構的產品,而我現在要的是一款BS可以與SSM等主流框架完美整合的報表控件,所以選擇了supcan碩正報表)。

下面附上下載地址:

使用方法在supcan1.0.103.0.chm當中寫的很清楚,項目開發者可以根據自己需要自行設定,項目中的引用方法:

<script src="${ctxStatic}/supcan/dynaload.js" type="text/javascript"></script>
<script src="${ctxStatic}/supcan/supcan.min.js" type="text/javascript"></script>
<script type=‘text/javascript‘ src=‘${ctxStatic}/res/nstd.js‘></script>

首先我們將碩正報表需要的js文件引入進來,碩正自定義報表是通過一個OnReady方法進行初次的加載:

 function OnReady(id)
         {
          FM.func("Build", "${ctxStatic}/supcan/report/report4.xml");
          FM.func("CallFunc", "301\r\n3");
         } 

然後在需要引入報表的地方加入如下代碼:

<script>
             insertReport(‘FM‘,‘Main=102,1074,105,100,20,32,106,107;Print=;UndoAble=false;Border=single,3D;Property=301,2,112,192,144,478,274‘,‘700px‘)
        </script>

現在我們就可以看到報表已經成功引入到項目當中。

技術分享

但是新加載出來的報表控件裏面還是空空如也,現在就來看一看怎麽新建一個報表吧。

一 新建報表

  技術分享

這裏我們可以設置新建的報表格式,生成一張新的報表。

新的報表裏沒有任何內容,那麽我們如何將後臺從數據庫中查詢出來的數據插入報表中呢?

這裏就需要介紹一下數據源這個功能了。

二 創建數據源

技術分享

新建一個臨時數據源,裏面有xml、json格式等文件是用來存儲數據的,在我的項目中,我設置了一個創建報表的按鈕,通過ajax在後臺將所需要的數據轉換成了json格式存入了本地的一個xxx.json格式的文件中,這樣報表加載完成,我直接就可以選擇這個文件作為我項目當中的數據源了。

具體代碼流程如下:

<input id="btnSubmit" class="btn btn-primary" onclick="getReport();" type="button" value="創建報表"/>

  function getReport(){
            
            $.ajax({
                url :"${ctx}/weather/factWeatherCn/report",
                type:‘get‘,
                datatype:‘json‘,
                success:function(data){
                    
                }
            });
            
        }

controller層生成json文件代碼:

/**
    *後臺展示報表數據
    *@version 2017-07-08
    */
    @RequiresPermissions("weather:factWeatherCn:view")
    @RequestMapping(value ="report")
    @ResponseBody
    public String report(FactWeatherCn factWeatherCn, HttpServletRequest request, HttpServletResponse response, Model model) {
        
        Page<FactWeatherCn> page = factWeatherCnService.findPage(new Page<FactWeatherCn>(request, response), factWeatherCn); 
        model.addAttribute("page", page);
        
         ObjectMapper mapper = new ObjectMapper();  
            // Convert object to JSON string  
            String jsonStr = "";
            
                 try {
                    jsonStr =  mapper.writeValueAsString(page.getList());
                } catch (JsonProcessingException e1) {
                    // TODO Auto-generated catch block
                    e1.printStackTrace();
                }
           
            OutputFormat outputFormat = OutputFormat.createPrettyPrint();  
            outputFormat.setLineSeparator("\r\n");//這是為了換行操作  
            Writer writer;
            try {
                writer = new FileWriter("F:/dom4jTest.json");
                XMLWriter outPut = new XMLWriter(writer,outputFormat);  
                
                outPut.write(jsonStr); 
                outPut.close();  
            } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }  
        
        return "";
    }

上面這段代碼當中因為是整合了我的項目,對數據有封裝的分頁類Page,不適合直接Copy使用,大家在使用的時候,只需要將自己的數據json串通過這段代碼當中的生成json文件代碼塊在本地生成一份xxx.json文件即可。

我是在F盤生成了一個dom4jTest.json文件。

這樣我們就有數據源可以選擇了。

新建臨時數據源並且選擇剛剛我們生成的json文件,點擊工具箱圖標技術分享,會在報表右側打開一個工具窗口,如下圖所示。

技術分享

這時我們就可以自由拖拽數據並且自定義報表了。

java 一款可以與ssm框架完美整合的web報表控件