銳浪報表+條件查詢
人事專案快要結束了,但是報表問題還是得不到解決。我們前臺採用MVC開發模式,但是MVC和銳浪不能很好的結合。如果是一下查詢所有的資料還是比較簡單的,但是使用者需求是能對報表直接操作,按條件查詢。無奈,找到一個解決辦法,那就是將報表單獨釋出一個系統,當人事系統呼叫報表時則跳轉到報表系統的獨立連線。下面來說說如何給銳浪報表單獨釋出。
報表外掛執行在客戶端電腦上,可以用報表外掛的程式設計介面將網頁客戶端上的資料載入到報表中,如將網頁上的UI介面上的資料傳入到報表中進行列印等。
在設計報表模板時,通常會設定資料來源連線串與查詢SQL語句,如果在報表外掛中沒有為報表關聯伺服器URL資料,報表模板中的資料來源設定將會被應用,報表外掛將嘗試從對應資料來源中獲取報表資料。此種方式會存在嚴重的弊端,因為連線串中的資料庫使用者與密碼資訊是固定的,客戶端必須具有直接訪問資料庫的許可權,這樣會有很大的安全侷限性,特別是對於Internet網(廣域網)來說,客戶端肯定不能直接訪問資料庫。WEB報表應該關聯報表資料DataURL,從
DataURL 處獲取 XML 資料, 這樣客戶端肯定能訪問WEB伺服器,這樣肯定不存在訪問許可權限制。除此之外,這種方式獲取報表資料需要Windows 客戶端提供對應資料庫的 OLE DB 驅動程式,如 Oracle、MySQL 等很多資料庫在 Windows 下並沒有直接安裝有其 OLEDB 驅動程式,這樣就需要為每個客戶端安裝 OLE DB 驅動程式,這樣也會極大增加軟體部署的難度。所以強烈建議不採用這種方式為WEB報表提供資料。
一、在網頁中插入報表外掛
在網頁中通過插入 object標籤將各種瀏覽器外掛嵌入到網頁中,Grid++Report報表外掛也是通過這樣的方式將其嵌入到網頁中。Grid++Report為此定義了專門的javascript 函式來簡化此任務,相關函式定義在例子程式的 CreateControl.js程式碼檔案中,每個函式的引數說明在程式碼中都有詳細註釋說明。下面是CreateControl.js 程式碼:
//1、變數 gr_InstallPath 等號後面的引數是外掛安裝檔案的所在的網站目錄,一般從網站的根目 // 錄開始定址,外掛安裝檔案一定要存在於指定目錄下。 //2、gr_Version 等號後面的引數是外掛安裝包的版本號,如果有新版本外掛安裝包,應上傳新版 // 本外掛安裝檔案到網站對應目錄,並更新這裡的版本號。 //3、更多詳細資訊請參考幫助中“報表外掛(WEB報表)->在伺服器部署外掛安裝包”部分 var gr_InstallPath = "grinstall"; //實際專案中應該寫從根目錄定址的目錄,如gr_InstallPath="/myapp/report/grinstall"; var gr_Version = "6,0,15,0819"; //以下注冊號為本機開發測試註冊號,報表訪問地址為localhost時可以去掉試用標誌 //購買註冊後,請用您的註冊使用者名稱與註冊號替換下面變數中值 var gr_UserName = '銳浪報表外掛本機開發測試註冊'; var gr_SerialNo = '8PJH495VA61FLI5TG0L4KB2337F1G7AKLD6LNNA9F9T28IKRU6N33P8Z6XX4BUYB5E9NZ6INMD5T8EN47IX63VV7F9BJHB5ZJQQ6MX3J3V12C4XDHU97SXX6X3VA57KCB6'; //報表外掛目前只能在32位瀏覽器中使用 var _gr_platform = window.navigator.platform; if (_gr_platform.indexOf("64") > 0) alert("銳浪Grid++Report報表外掛不能執行在64位瀏覽器中,相關報表與列印功能將無法正常運新,請改用32位瀏覽器!"); //區分瀏覽器(IE or not) var _gr_agent = navigator.userAgent.toLowerCase(); var _gr_isIE = (_gr_agent.indexOf("msie")>0)? true : false; var gr_CodeBase; if( _gr_isIE ) gr_CodeBase = 'codebase="' + gr_InstallPath + '/grbsctl6.cab#Version=' + gr_Version + '"'; else gr_CodeBase = ''; //建立報表物件,報表物件是不可見的物件,詳細請檢視幫助中的 IGridppReport //Name - 指定外掛物件的ID,可以用js程式碼 document.getElementById("%Name%") 獲取報表物件 //EventParams - 指定報表物件的需要響應的事件,如:"<param name='OnInitialize' value=OnInitialize> <param name='OnProcessBegin' value=OnProcessBegin>"形式,可以指定多個事件 function CreateReport(PluginID, EventParams) { var typeid; if( _gr_isIE ) typeid = 'classid="clsid:396841CC-FC0F-4989-8182-EBA06AA8CA2F" '; else typeid = 'type="application/x-grplugin6-report" '; typeid += gr_CodeBase; document.write('<object id="' + PluginID + '" ' + typeid); document.write(' width="0" height="0" VIEWASTEXT>'); if (EventParams != undefined) document.write(EventParams); document.write('</object>'); document.write('<script type="text/javascript">'); document.write(PluginID + '.Register("' + gr_UserName + '", "' + gr_SerialNo + '");'); document.write('</script>'); } //用更多的引數建立報表列印顯示外掛,詳細請檢視幫助中的 IGRPrintViewer //PluginID - 外掛的ID,可以通過 var ReportViewer = document.getElementById("%PluginID%"); 這樣的方式獲取外掛引用變數 //Width - 外掛的顯示寬度,"100%"為整個顯示區域寬度,"500"表示500個螢幕畫素點 //Height - 外掛的顯示高度,"100%"為整個顯示區域高度,"500"表示500個螢幕畫素點 //ReportURL - 獲取報表模板的URL //DataURL - 獲取報表資料的URL //AutoRun - 指定外掛在建立之後是否自動生成並展現報表,值為false或true //ExParams - 指定更多的外掛屬性闡述,形如: "<param name="%ParamName%" value="%Value%">"這樣的引數串 function CreatePrintViewerEx2(PluginID, Width, Height, ReportURL, DataURL, AutoRun, ExParams) { var typeid; if( _gr_isIE ) typeid = 'classid="clsid:ABB64AAC-D7E8-4733-B052-1B141C92F3CE" ' + gr_CodeBase; else typeid = 'type="application/x-grplugin6-printviewer"'; document.write('<object id="' + PluginID + '" ' + typeid); document.write(' width="' + Width + '" height="' + Height + '">'); document.write('<param name="ReportURL" value="' + ReportURL + '">'); document.write('<param name="DataURL" value="' + DataURL + '">'); document.write('<param name="AutoRun" value=' + AutoRun + '>'); document.write('<param name="SerialNo" value="' + gr_SerialNo + '">'); document.write('<param name="UserName" value="' + gr_UserName + '">'); document.write(ExParams); document.write('</object>'); } //用更多的引數建立報表列印顯示外掛,詳細請檢視幫助中的 IGRDisplayViewer //PluginID - 外掛的ID,可以通過 var ReportViewer = document.getElementById("%PluginID%"); 這樣的方式獲取外掛引用變數 //Width - 外掛的顯示寬度,"100%"為整個顯示區域寬度,"500"表示500個螢幕畫素點 //Height - 外掛的顯示高度,"100%"為整個顯示區域高度,"500"表示500個螢幕畫素點 //ReportURL - 獲取報表模板的URL //DataURL - 獲取報表資料的URL //AutoRun - 指定外掛在建立之後是否自動生成並展現報表,值為false或true //ExParams - 指定更多的外掛屬性闡述,形如: "<param name="%ParamName%" value="%Value%">"這樣的引數串 function CreateDisplayViewerEx2(PluginID, Width, Height, ReportURL, DataURL, AutoRun, ExParams) { var typeid; if( _gr_isIE ) typeid = 'classid="clsid:600CD6D9-EBE1-42cb-B8DF-DFB81977122E" ' + gr_CodeBase; else typeid = 'type="application/x-grplugin6-displayviewer"'; document.write('<object id="' + PluginID + '" ' + typeid); document.write(' width="' + Width + '" height="' + Height + '">'); document.write('<param name="ReportURL" value="' + ReportURL + '">'); document.write('<param name="DataURL" value="' + DataURL + '">'); document.write('<param name="AutoRun" value=' + AutoRun + '>'); document.write('<param name="SerialNo" value="' + gr_SerialNo + '">'); document.write('<param name="UserName" value="' + gr_UserName + '">'); document.write(ExParams); document.write('</object>'); } //以 ReportDesigner 為 ID 建立報表設計器外掛(Designer),詳細請檢視幫助中的 IGRDesigner //Width - 外掛的顯示寬度,"100%"為整個顯示區域寬度,"500"表示500個螢幕畫素點 //Height - 外掛的顯示高度,"100%"為整個顯示區域高度,"500"表示500個螢幕畫素點 //LoadReportURL - 讀取報表模板的URL,執行時從此URL讀入報表模板資料並載入到設計器外掛 //SaveReportURL - 儲存報表模板的URL,儲存設計後的結果資料,由此URL的服務在WEB服務端將報表模板持久儲存 //DataURL - 獲取報表執行時資料的URL,在設計器中進入列印檢視與查詢檢視時從此URL獲取報表資料 //ExParams - 指定更多的外掛屬性闡述,形如: "<param name="%ParamName%" value="%Value%">"這樣的引數串 function CreateDesignerEx(Width, Height, LoadReportURL, SaveReportURL, DataURL, ExParams) { var typeid; if( _gr_isIE ) typeid = 'classid="clsid:CE666189-5D7C-42ee-AAA4-E5CB375ED3C7" ' + gr_CodeBase; else typeid = 'type="application/x-grplugin6-designer"'; document.write('<object id="ReportDesigner" ' + typeid); document.write(' width="' + Width + '" height="' + Height + '">'); document.write('<param name="LoadReportURL" value="' + LoadReportURL + '">'); document.write('<param name="SaveReportURL" value="' + SaveReportURL + '">'); document.write('<param name="DataURL" value="' + DataURL + '">'); document.write('<param name="SerialNo" value="' + gr_SerialNo + '">'); document.write('<param name="UserName" value="' + gr_UserName + '">'); document.write(ExParams); document.write('</object>'); } //以 ReportViewer 為 ID 建立報表列印顯示器外掛(PrintViewer),引數說明參考 CreatePrintViewerEx2 function CreatePrintViewerEx(Width, Height, ReportURL, DataURL, AutoRun, ExParams) { CreatePrintViewerEx2("ReportViewer", Width, Height, ReportURL, DataURL, AutoRun, ExParams) } //以 ReportViewer 為 ID 建立報表查詢顯示器外掛(DisplayViewer),引數說明參考 CreateDisplayViewerEx2 function CreateDisplayViewerEx(Width, Height, ReportURL, DataURL, AutoRun, ExParams) { CreateDisplayViewerEx2("ReportViewer", Width, Height, ReportURL, DataURL, AutoRun, ExParams) } //以 ReportViewer 為 ID 建立報表列印顯示器外掛(PrintViewer),外掛大小為100%充滿位置區域,外掛建立後會自動執行,引數說明參考 CreatePrintViewerEx2 function CreatePrintViewer(ReportURL, DataURL) { CreatePrintViewerEx("100%", "100%", ReportURL, DataURL, true, ""); } //以 ReportViewer 為 ID 建立報表查詢顯示器外掛(DisplayViewer),外掛大小為100%充滿位置區域,外掛建立後會自動執行,引數說明參考 CreateDisplayViewerEx2 function CreateDisplayViewer(ReportURL, DataURL) { CreateDisplayViewerEx("100%", "100%", ReportURL, DataURL, true, ""); } //以 ReportDesigner 為 ID 建立報表設計器外掛(Designer),外掛大小為100%充滿位置區域,引數說明參考 CreateDesignerEx function CreateDesigner(LoadReportURL, SaveReportURL, DataURL) { CreateDesignerEx("100%", "100%", LoadReportURL, SaveReportURL, DataURL, ""); }
CreateDisplayViewerEx2方法是向網頁中插入報表查詢顯示外掛(DisplayViewer),CreateDisplayViewerEx 與 CreateDisplayViewer 是CreateDisplayViewerEx2 的簡化版本,目的是為了減少呼叫引數。開發者應該統一採用 CreateControl.js中的函式來向網頁中插入報表外掛。
二、在網頁中插入報表物件
Grid++Report報表物件是一個不可顯示的控制元件,報表物件在網頁中沒有直接的顯示輸出,但呼叫其方法可以實現很多與報表生成與輸出相關的任務。如實現無介面的列印報表,匯出報表資料等。報表物件不要求插入在網頁BODY 節中,我們一般將其插入在 HEAD 節中。如下程式碼所示:
<script type="text/javascript">
CreateReport("Report");
//在網頁初始載入時向報表提供資料
functionwindow_onload()
{
Report.LoadFromURL("../grf/1a.grf");
}
</script>
三、在網頁中插入報表設計器外掛
Grid++Report報表設計器外掛是一個視覺化控制元件,報表設計器外掛在網頁中視覺化地設計報表模板,為使用者提供視覺化的自定義報表設計功能。下面是在網頁中插入設計器外掛:
<script language="javascript">
CreateDesignerEx("100%", "100%","grf/a.grf", "DesignReportSave.aspx?Report=../grf/a.grf","", "");
</script>
CreateDesignerEx可以通過最後一個引數可以在建立外掛時指定外掛的屬性值
<script language="javascript">
CreateDesignerEx("100%", "100%","grf/a.grf", "DesignReportSave.aspx?Report=../grf/a.grf","", "<paramname=ViewStyle value=6>");
</script>
四、外掛安裝包檔案部署至伺服器
在部署用 Grid++Report開發的WEB報表時,需要將外掛安裝包檔案一同分發在WEB伺服器上,將兩個檔案(grbsctl6.cab 與grbsctl6.exe)複製到WEB伺服器的可下載目錄。
另還要根據實際情況,調整 CreateControl.js檔案中的外掛部署目錄變數值,這樣才能保證客戶端能找到外掛安裝包的下載位置。開啟 CreateControl.js,將開始處的 gr_InstallPath變數值修改為外掛安裝包檔案所在的網站目錄(特別注意:不是檔案的磁碟目錄),一般採用相對目錄或從網站根目錄進行定址的目錄。
舉例說明:如將外掛安裝包複製到網站根目錄的 grinstall 子目錄下,則CreateControl.js 中 gr_InstallPath 變數應該修改為(vargr_InstallPath = "/grinstall";)。假設伺服器 IP 為192.168.1.10,則在瀏覽器中輸入“http://192.168.1.10/grinstall/grbsctl6.cab”,如果能正常下載檔案就說明外掛安裝包已經在伺服器成功部署。
五、建立報表門戶(入口)網頁
報表門戶(入口)網頁是指在開啟各個具體報表網頁前的目錄(索引/導航)網頁,在此網頁中實現外掛是否已經安裝的判斷,並實現外掛的下載安裝。外掛在此安裝成功後,再開啟其它的報表展現網頁就可以讓報表成功顯示出來。
報表門戶(入口)網頁既可以是一個專門的網頁,也可以是其它目錄(索引/導航)網頁中加入外掛安裝的程式碼。
六、瀏覽器下載安裝報表外掛說明
如果已經將外掛安裝包部署到伺服器,且已經建立報表門戶網頁,則未安裝外掛的客戶端電腦在訪問報表門戶網頁時將會出現外掛安裝的相關提示介面。以下內容就是對外掛自動下載安裝的說明,也是對外掛部署是否正確的檢驗。銳浪報表外掛支援多瀏覽器,在不同的瀏覽器下安裝行為有所區別。
至此為止,銳浪報表系統就做好了,接下來將其釋出到IIS即可使用。