9.4.一体化查询
硕正报表从1.0.101.0开始,支持以 jQuery Mobile 的语法规则的动态嵌入模板, 如果一体化查询的报表有专门用于输入查询条件的工作表, 该工作表将能被转换成比较符合移动设备的界面展示:![]() | ![]() | ![]() |
9.4.1 模版分析
模版文件是 template_search.txt:<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <script src="../uploadxml.js"></script> <script> <!--SUPCAN_REPORT_JS--> $(document).ready(function() { //"开始查询" 按钮点击事件, 打开新页面 $("#search").click(function() { var s = $("#form1").serialize(); //取得 Form 的提交串 window.open("../query.aspx?page=2&" + s); }); }); </script> </head> <body> <div data-role="page"> <div data-role="header" data-theme="b"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a> <h1><!--SUPCAN_REPORT_WorkSheetName--></h1> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">搜索</a> </div> <div data-role="main" class="ui-content" data-theme="b"> <form id="form1"> <div class="ui-field-contain"> <!--SUPCAN_REPORT_dMain--> </div> <input id="search" type="button" value="开始查询"> </form> </div> </div> </body> </html>前 8 行是 jQuery Mobile固定的引用, 第 9 行使用了硕正的 uploadxml.js 文件, 该文件原本是用于上报的, 但本例只是共享了其中下拉关联、以及数据源的 ajax 访问的部分代码. 文件在 uploadmobile.zip 包中. 部署 uploadxml.js 时请注意相对URL的位置: 它是相对于最终生成的 html,而不是这个模版的位置。
<label for="sup_dat_E4">请选择区域:</label> <select id="sup_dat_E4" name="E4" droplistName="sup_droplist2" affectTo="sup_dat_E6" value="1"> </select><br> <label for="sup_dat_E6">国家:</label> <select id="sup_dat_E6" name="E6" droplistName="sup_droplist1" dependent="sup_dat_E4" value="Austria"> </select><br> <label for="sup_dat_E7">仅百吨以上货物</label> <input id="sup_dat_E7" name="RADIOGROUP1" type="radio" value="E7"/><br> <label for="sup_dat_E8">全部货物</label> <input id="sup_dat_E8" name="RADIOGROUP1" type="radio" value="E8" checked="true"/><br> <input name="allfieldname" type="text" value="E4,E6,RADIOGROUP1" style="display:none;"/>
9.4.2 C#源码分析
C# 源码文件为 query.aspx, 里面大部分代码和服务器专版的其它演示功能的代码都差不多, 下面只分析关键实现部分。if(page == "1") { //第一个页面 // jQueryMobile 模版文件, 它位于当前目录下 String TemplateFile = Server.MapPath("template_search.txt"); //转换 dll.func("callfunc", "105\r\n type=htm; isQueryPage=true; Template=" +TemplateFile+ "; filename=" + TempFilename); }调用 105 功能号且设置 isQueryPage=true , 以及 jQueryMobile 模板,这就是关键所在了。
else if(page == "2") { //第二个页面 //取得 Form 内容, 设置到报表第一个工作表中 String[] arrCellname = Request.Params["allfieldname"].Split(new Char[] {','}); foreach(String CellName in arrCellname) { String Data = Request.Params[CellName]; if(Data == null) Data = ""; if(CellName.Length > 10) { if(CellName.Substring(0, 10) == "RADIOGROUP") { dll.func("SetCellDataEx", Data + "\r\n1"); continue; } } dll.func("SetCellDataEx", CellName + "\r\n" + Data); } //切换到工作表二 dll.func("SetCurrentWorksheet", "1"); //计算当前工作表 dll.func("calc", "range=current"); //转换 dll.func("callfunc", "105\r\n type=htm; filename=" + TempFilename); }由于查询条件是 Form 提交上来的,所以必须分拆这些条件, 分别设置到指定单元格中去, 然后模拟常规的客户端功能:执行计算、转换输出.