查询控件源码解析

阅读(445) 标签: 查询控件源码, js, api,

Ø  JS API控制初始化界面

使用Tag标签属性只是可以对一些初始的指标数据的显示做控制,但如果要对查询界面的样式做修改,那么就需要通过润乾报表提供的JS API来实现了。

JS API缺省在[安装根目录]/report/web/webapps/demo/raqsoft/guide/jsp/qyx.jsp的尾部,如下所示:

/*这些参数可以控制查询页面的初始状态

guideConf.queryType = "group"; //detail明细查询/group分组查询/mix混合模式

guideConf.analysePage = "raqsoft/guide/jsp/olap.jsp"; //分析界面,用来显示查询结果

guideConf.dataPage = "raqsoft/guide/jsp/data.jsp";//查询结果界面,用来显示查询结果,主要用来显示大结果集

guideConf.fixedTable = '';//设置查询页面要显示的表,为空全显示;可设置一个或多个,多个时用逗号隔开

guideConf.showToolBar = 'yes';//是否显示查询界面上部的工具条

guideConf.showDataSources = 'yes';//是否显示工具条上的数据源切换

guideConf.emptyReport = "yes";//跳转到分析界面时,是否默认生成明细列表

guideConf.defaultSaveName = "";//qyx默认的保存名称

guideConf.fieldAreaWidth = 350;//树状表字段区域的宽度

guideConf.detectLevel = '0';//广义字段自动检测的层数,默认40表示让用户在界面上选择

guideConf.maxDimSize = 5000;//自动加载维数据到guideConf.dimDataOnServer文件时,限制每个维得值个数,多出的丢弃

guideConf.dimAreaWidth = 100;//维区域宽度

guideConf.dqlCategory = ['国内公司','海外公司'];//字典里设置的分类项,多个以分号隔开。不设置表示显示全部分类项;否则默认第一个,后面的是可选的

guideConf.showNullGroup = 'user'; //是否显示空分组,yes/no/user,默认yesuser表示让用户在界面上自己选

guideConf.reSort = "yes";// 默认yes,按照拼音重新排序,否则按照lmd里的顺序显示

guideConf.treeStatus = "open";//树上的表是否处于展开状态,默认openclose

guideConf.showSubTable = 'yes';//是否显示子表

guideConf.filter="default";//设置缺省需要使用的权限条件

guideConf.autoReloadDimDataOnServer = 'yes';//每次进入jsp,是否重新生成dimData.json

 */

 

示例:

缺省在查询界面demo上方会显示默认toolbar工具条,用户如果不想显示toolbar工具可通过在<script/>脚本中添加如下js代码实现。

guideConf.showToolBar = 'no';

效果如下图:

除了修改查询界面已有的菜单样式外,用户还可以自定义查询、保存qyx、打开qyx等按钮,直接调用/raqsoft/guide/js/raqsoftApi.js里定义的queryApi.submitQuery()queryApi. saveQyx()queryApi.openQyx()等方法就可以,具体有哪些方法可参考[安装根目录]/report/web/webapps/demo/raqsoft/guide/js/raqsoftApi.js

 

示例:

在查询界面demo上方的toolbar工具条上添加一个名为"自定义查询按钮"的查询按钮,可通过如下方法实现:

将下面代码添加到[安装根目录]\report\web\webapps\demo\raqsoft\guide\jsp目录下的template.jsp中,添加位置为id="queryView" <div>标签下的class='ui-layout-toolbar'<div>标签里面,刷新页面后即可看到效果。

<input type="button" onclick="queryApi.submitQuery()" style="color:#fe4164;vertical-align:20px;text-decoration: none;" value="自定义查询按钮"/>

效果如下图:

Ø  js对初始化后的界面进行修改

通过Tag标签或者JS API都可以控制查询界面初始化前的显示。但查询界面初始化之后,如果用户还需要修改一些样式或图片,那么可以通过浏览器的开发者工具找到页面元素的一些idclassName,通过这些属性可以直接对页面元素进行修改。查询界面初始化之后,还可以添加按钮,修改编辑风格等。js代码需要写在[安装根目录]\report\web\webapps\demo\raqsoft\guide\jsp\qyx.jsp的尾部。

示例1

//把查询页面demo上部的工具条的背景色改成红色

$(document).ready(function(){

$('.ui-layout-toolbar').css('background-color','red');

});

效果如下图:

示例2

//增加查询按钮

$(document).ready(function(){

$('body').append('<a href="javascript:queryApi.submitQuery();" style="position:absolute;top:10px;left:600px;z-index:50000;color:white;">查询</a>');

});

效果如下图:

 

示例3

//"雇员"表中的"雇员"字段的编辑风格设置为"供应商",也就是将显示值改为供应商。

$(document).ready(function(){

//queryApi.setEditStyle()具体参数定义请参考raqsoft/guide/js/raqsoftApi.js,里面有详细注释

queryApi.setEditStyle("雇员","雇员","供应商");

});

将示例代码添加到[安装根目录]\report\web\webapps\demo\raqsoft\guide\jsp\qyx.jsp中,刷新页面后拖拽"雇员"维度,点击"雇员"对应的过滤条件,在"设置查询条件"窗口中鼠标定位到编辑框即可看到效果。

效果如下图:

 

示例4

//对所有日期型数据设置yy/mm/dd类型的编辑风格,即通过日期控件选择相应日期后,日期呈现yy/mm/dd类型

$(document).ready(function(){

queryApi.setEditStyleDef({name:'_date',type:3,dateFormat:'yy/mm/dd'});

});

将上述示例代码添加到[安装根目录]\report\web\webapps\demo\raqsoft\guide\jsp\ qyx.jsp中,刷新页面后拖拽"日期"维度,点击"日期"对应的过滤条件,在"设置查询条件"窗口中通过日期控件选择日期2018-01-02后即可看到效果。

效果如下图:

 

示例5

//使用函数 id="dqlDataSources"的页面元素前插入内容test

$(document).ready(function(){

var test = $('<a style="color:#FF00FF;vertical-align:20px;text-decoration: none;" href="javascript:void(0);"><img style="vertical-align:-7px;margin:0 10px;" src="/demo/raqsoft/guide/img/guide/save.png">保存</a>');

$('#dqlDataSources').before(test);

test.click(function(){

alert(' test ');

});

});

将上述示例代码添加到 [安装根目录]\report\web\webapps\demo\raqsoft\guide\jsp目录下的qyx.jsp中,刷新页面后点击红框中的内容即可看到效果。

效果如下图: