java 一款可以與ssm框架完美整合的web報表控件
碩正套件運行於客戶端(瀏覽器),與應用服務器(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系列操作系統。
自動下載、運行。
碩正套件全部采用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報表控件