语源科技BlogJava-Java软件报表软件技术博客

FineReport中如何用JavaScript解决控件值刷新不及时

FineReport——报表技术领跑者 — Wed, 15 Mar 2017 03:31:00 GMT

我们经常利用按钮进行一些页面值的处理工作，但是默认的逻辑造成，每次新填报的值，需要点击下空白区域或是执行某个其他操作才可以被正确读取，那么我们如何处理呢？

例：当我们用常规取值的时候，虽然B3单元格录入了值，但是在光标不离开B3的前提下，用JS只获取到了控制而不是实际的值“2”。

想获得B3的值，需要在空白处点击下鼠标，让文本框的左上角的红三角出现才可以。

优化过后则可以将光标强制跳转到A2单元格，使其获得光标，进而强制B3单元格刷新值。

既然任意点击空白处就可以，那么我们就用JS来强制跳转光标实现同样的功能。

模板制作

模板样式设计如下，A3和B3单元格添加文本控件，C3单元格为A3和B3相加值，D3和E3单元格添加按钮控件：

“直接相加”按钮的JS

D3控件名称为直接相加，添加一个点击事件

var B3 = contentPane.curLGP.getCellValue("B3");
var A3 = contentPane.curLGP.getCellValue("A3");
alert("a3的值:"+A3);
alert("b3的值:"+B3);

“优化后”按钮的JS

E3控件名称为优化后，添加一个点击事件

contentPane.curLGP.selectTDCell("A2");

var B3 = contentPane.curLGP.getCellValue("B3");
var A3 = contentPane.curLGP.getCellValue("A3");
alert("a3的值:"+A3);
alert("b3的值:"+B3);

contentPane.curLGP.selectTDCell(“A2”)：表示的是，将光标强制跳转到A2单元格，也就相当于用鼠标点击了一下A2单元格，使其获得光标，进而强制B3单元格刷新值。

常见场景

用户通过文本框填报了值，而需要对这个值进行取出判断的时候，经常会取空值，只有用户点击了空白区域，才可以正常取值。

比如：用户填写了手机号码，就可以跳转到领取奖品的页面，若手机号码是最后一个填报栏，填写后，用户直接提交，系统则会认为，手机号码一栏为空。

FineReport——报表技术领跑者 2017-03-15 11:31 发表评论

FineReport中如何实现自动滚屏效果

FineReport——报表技术领跑者 — Mon, 06 Mar 2017 02:27:00 GMT

对于一些特殊的模板，可能为了展示的更加丰富、全面会在一个页面放置很多图表。表格等内容。由于内容过多，超出了浏览器窗口的大小导致内容展示不全的情况。这样我们就需要用到JS滚屏效果来解决，这里主要介绍在FineReport中的具体制作方法。

添加加载结束事件

点击菜单模板>模板web属性>分页预览设置，选择“为该模板单独设置”，添加一个“加载结束”后事件，如下图所示：

JS代码如下：

//从页面加载结束后延迟2000MS执行事件（滚动）
setTimeout(function(){
//当鼠标点击时
$(".content-container").click(function()
{
//如果页面正在执行事件（滚动）
  if(interval)
  {
//取消事件（滚动）
  clearInterval(interval);
  }
})
var old=-1;
//按照指定周期不断的调用滚动事件
var interval=setInterval(function()
{
currentpos=$(".content-container")[0].scrollTop;
if (currentpos==old){
//取消事件（滚动）
clearInterval(interval);
//重新加载页面
window.location.reload();
}
else
{
old=currentpos;
//以25MS的速度每次滚动3.5PX
$(".content-container")[0].scrollTop=currentpos+3.5;
}
}
,25);
},2000)

保存与预览

保存模板，点击分页预览，就会出现上面的自动滚动效果。如果想要停止滚动的话，用鼠标左键点击一下窗口即可。

FineReport——报表技术领跑者 2017-03-06 10:27 发表评论

FineReport中JS如何自定义按钮导出

FineReport——报表技术领跑者 — Tue, 28 Feb 2017 02:31:00 GMT

FineReport支持多种不同的导出方式，直接使用FineReport内置导出按钮可以非常快捷方便的来对各种格式的输出，但是我们在web页面集成中的时候，往往只想将报表内容嵌入到iframe中，而工具栏以及工具栏上的按钮都会隐藏掉，而使用web页面自定义的按钮，那么，此时，这种自定义按钮如何实现导出呢？

如上图所示，新建一个html页面，定义一个工具栏和一个iframe，工具栏中定义上图所示的按钮，iframe中嵌入FineReport中的报表，如下图：

FineReport报表设置

打开设计器，找到上面web页面中嵌入的那张模板，由于要使用自定义按钮作为工具栏，那么FineReport报表内置的工具栏就无需显示出来。点击模板>模板web属性>分页预览设置，去掉使用工具栏前面的勾选，如下图：

自定义导出按钮

Web页面中定义了9个自定义导出按钮，那么怎样才能实现导出操作呢？

FineReport导出操作的JS接口为：

导出PDF：exportReportToPDF()

导出[Excel](分页)：exportReportToExcel('page')

导出[Excel](原样)：exportReportToExcel('simple')

导出[Excel](分页分sheet)：exportReportToExcel('sheet')

导出[Excel](分页导出xls格式)：exportReportToExcel('page_isExcel2003')

导出[Excel](原样导出xls格式)：exportReportToExcel('page_isExcel2003')

导出[Excel](分页分sheet导出xls格式)：exportReportToExcel('page_isExcel2003')

导出[图片]：exportReportToImage('gif')【括号里面可以更换参数，比如说png，jpg等等图片类型】

导出[word]：exportReportToWord()

故，各个按钮的点击事件应用调用上述的JS接口来实现其对应的导出格式，比如说导出PDF，那么其按钮的onclick时间为：

onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToPDF()"

docment.getElementById('reportFrame')是获取到iframe框架，然后通过contentWindow得到报表窗口，并拿到contentPane这个报表容器，最后就可以从容器中调用各种导出接口的方法了。

其他的几个按钮的导出事件这里就不一一讲解了。

完整代码

根据上述同样的方法为其他几个按钮添加导出事件，完整代码如下：

<html>
  <head>
  <title>FineReport自定义导出title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  head>
  <body>

    <fieldset>
    <div id="toolbar">
    <button type="button"  onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToPDF()">导出[PDF]button>
    <button type="button"  onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('page')">导出[Excel](分页)button>
    <button type="button"  onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('simple')">导出[Excel](原样)button>
    <button type="button"  onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('sheet')">导出[Excel](分页分sheet)button>
    <button type="button"  onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('page_isExcel2003')">导出[Excel](分页导出xls格式)button>
    <button type="button"  onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('simple_isExcel2003')">导出[Excel](原样导出xls格式)button>
    <button type="button"  onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('sheet_isExcel2003')">导出[Excel](分页分sheet导出xls格式)button>
    <button type="button"  onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToImage('png')">导出[图片]button>
    <button type="button"  onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToWord()">导出[Word]button>
    div>
    fieldset>
    <iframe id="reportFrame" width="100%" height="100%" src='/WebReport/ReportServer?reportlet=doc/Primary/DetailReport/Details.cpt' >iframe>
  body>
html>

效果查看

点击不同的按钮，即可看到其导出的结果：

FineReport——报表技术领跑者 2017-02-28 10:31 发表评论

FineReport中如何用JavaScript自定义地图标签

FineReport——报表技术领跑者 — Wed, 22 Feb 2017 02:18:00 GMT

在日常使用地图过程中，通常会遇到地图标签，提示点等显示不满足我们的需求，需要进行JavaScript代码编写。

例如：在使用地图过程中，会发现很多地名显示的位置偏离。这时候就需要使用JavaScript进行调控。以黑龙江和内蒙古为例，来介绍下如何在FineReport中利用JavaScript自定义地图标签。

新建地图

以区域地图为例，新建表单，拖入地图（新特性）组件，地图边界选择区域地图下的中国（省级）：

数据准备

新建工作簿，添加数据集ds1，SELECT*FROM地图1，选中图表，选择图表属性表-数据，如下图所示：

选择图表属性表-样式>系列，如下图设置，边框设为蓝色：

自定义JS显示标签

选择图表属性表-样式>标签，内容选择自定义，JS如下：

function(){ var points = this.points;
var total = '';
if(this.name=="内蒙古自治区")
{total += '

' +FR.contentFormat(points[2].value, '#0.00')+''+this.name+'

';}
else if(this.name=="黑龙江省")
{total += '

'+ FR.contentFormat(points[2].value, '#0.00')+''+this.name+'';}
else{total += '

'+FR.contentFormat(points[2].value, '#0.00')+''+this.name+'';}
for(var i = 0, len = points.length-2; i < len; i++)
{total += (''+FR.contentFormat(points[i].value, '#0.00')+'');}
total+=''; return total;}

div align=center style="margin-top当读取名字为内蒙古自治区时候，我们进行margin显示位置的调整，使其不显示偏离

FR.contentFormat(value, '#.##%')进行数值格式自定义，后面的'#.##%'可以根据实际需求进行更改；

this.points这个参数在地图中使用时表示同一个区域上的不同的系列的点

自定义JS显示提示点

选择图表属性表-样式>提示，内容选择自定义，JS如下：

function(){var points = this.points ;
var total = 'background-color:#808080;color:white">';
total +=''+this.name+'

';
for(var i = 0, len = points.length-1; i < len; i++)
{total +='●'+points[i].seriesName+':'+FR.contentFormat(points[i].value, '')+'';}
return total;}

此处做一个简单的循环，循环展示我们前端设置的参数，并对参数做单独的处理，包括控制字体大小，以及显示格式。

保存与预览

调整后效果如下，标签位置正确，提示采用了自定义格式：

FineReport——报表技术领跑者 2017-02-22 10:18 发表评论

如何在FineReport中解析数据库内XML文件

FineReport——报表技术领跑者 — Mon, 13 Feb 2017 03:09:00 GMT

摘要: 在数据库表中，其中字段XML所存的为xml格式数据在表xmltest中。那么在使用该表进行报表制作时，需要将存于xml字段中的值读取出来作为报表数据源。XML每条记录数据格式如下：MemoryFreeSizeint1962阅读全文

FineReport——报表技术领跑者 2017-02-13 11:09 发表评论

FineReport和泛微OA(Ecology)的单点登录集成方案

FineReport——报表技术领跑者 — Tue, 17 Jan 2017 08:27:00 GMT

最近出现了很多关于帆软报表和泛微OA的集成问题，均出现在“单点登录”上。直接也有相关的文章介绍一些FineReport和泛微集成的背景、价值等，以及FineReport和OA的深度集成的方案，但是并没有提到单点登录的集成方案，今天就简单介绍下FineReport和OA单点登录集成方式。

同步用户信息

单点登录的基础，就是用户信息的同步，FineReport的决策系统中有一个很强大的功能，可以自动帮助用户实现用户信息同步。具体菜单：决策系统-管理系统-用户管理。点击用户管理菜单后，右侧页面右上角有一个“设置”按钮，如下图：

点击“设置”，则会出现如下图的界面。按照下图中的配置进行对应的配置。

认证方式：选择平台内置认证。单点登录的集成是通过平台内置认证进行集成的。

用户同步数据集：选择“已开启”

服务器数据集：服务器数据集是需要去帆软报表的开发工具上进行配置。如下图：

进入设计器，点击菜单服务器-服务器数据集，新增一个数据集，选择OA的数据源，写入SQL“select * from hrmresource”，保存即可。

保存后，需要去本地的开发环境上找到对应的xml，复制到决策系统服务器端，才可使用。本地开发环境的xml路径见上图“保存路径”后面的对应文件路径。

通过EditPlus编辑器打开datasource.xml文件后，找到“OA用户”这块xml代码。将这块代码复制到服务器上的datasource.xml上，路径和/WebReport/WEB-INF/resourcr/datasource.xml，粘贴格式参见本地的开发环境。如下图：

注：不要用记事本打开xml，保存可能会损坏xml。更新服务器文件时，做好备份。

继续配置用户同步

用户名：XXX

姓名:XXX

密码：XXX，注意，OA的密码已经进行了32位大写的MD5加密。

加密方式：不设置密码加密

其他选填。

点击保存，OK，决策系统已经开始在后台执行了用户同步了。只需要在决策系统中的用户管理上查看同步的用户信息结果即可。

泛微OA的登录方式和如何编写单点登录

了解单点登录之前，先了解下OA的登录方式。泛微OA的登录方式有2种。第一种，是通过页面登录进OA；第二种是，是通过E-Message上的快捷方式进入到OA。

这样的话，如果实现FineReport和泛微OA集成的单点登录，以上的两种登录方式均瑶实现这个效果。很多用户和泛微的实施团队会在OA的login.jsp上编写单点登录代码。在login.jsp上编写单点登录代码智能解决第一种登录方式“通过页面登录进OA”。而通过E-Message上的快捷方式进入到OA是不能实现帆软决策系统的单点登录的。如果要实现两种登录方式的单点登录，可以在泛微OA登录后页面上编写单点登录代码。泛微OA登录后页面的jsp为“/ecology/wui/theme/ecology7/page/main.jsp”。

第一步，引入js代码：

第二步，获取当前用户的登录名和密码的java代码：

　　String nodeSql ="select loginid,password from HrmResource where id = " + user.getUID();

        RecordSet.executeSql(nodeSql);
        if (RecordSet.next()){
                userpasswordstr = RecordSet.getString("password");
                loginidstr = RecordSet.getString("loginid");
        }

从上面的代码可以很明显的看到，这个和sql和rs的取值字段跟之前配置用户同步信息对应的表和字段是一样的。

第三步，编写js代码：

var username =FR.cjkEncode("<%=loginidstr%>");  
var password ="<%=userpasswordstr%>";
password = password.toUpperCase();//把密码小写字母转换成大写字母
var scr = document.createElement("iframe");                
scr.src = "http://***.***.***.***:**/WebReport/ReportServer?op=touchfs&username="+username+"&__redirect__=false&password="+password; 

这里是采用iframe的跨域单点登录方式，所以在JS中需要创建一个iframe，然后在iframe上设置SRC。

第四步，保存main.jsp，备份服务器的main.jsp，更新main.jsp。

第五步，重新登录OA，单点登录成功。校验方式，在OA的浏览器上，新建一个页签，输入“http://***.***.***.***:**/WebReport/ReportServer?op=fs”，如果出现如下图，且登录名为自己的用户，则表示单点登录成功。但是。。。还没完。

在泛微OA上配置决策系统入口

完成了上述的配置，但是OA用户通过什么方式进入决策平台呢？提供2个方式供参考。

第一，用系统管理员配置自定义左侧菜单。

第二，设置用户元素。

以上3点完成后，FineReport和OA的集成工作就大功告成了。

FineReport——报表技术领跑者 2017-01-17 16:27 发表评论

FineReport中以jws方式调用WebService数据源方案

FineReport——报表技术领跑者 — Wed, 11 Jan 2017 03:39:00 GMT

在使用WebService作为项目的数据源时，希望报表中也是直接调用这个WebService数据源，而不是定义数据连接调用对应的数据库表，这样要怎么实现呢？

在程序中访问WebService应用服务，将WebService返回的数据转为程序数据集，然后在设计器中调用。

以axis1.4上的WebService为例，介绍其取数方式以及将数据转换为WebService的程序数据集的过程。

WebService应用服务

如在Tomcat下的Axis工程中以jwa方式发布了一个WebService应用服务下TestWS2TDClient.jws，返回一个数组数据，如下：

public class TestWS2TDClient {

public String[][] getTD() {

String[][] a = {{"城市", "销售员", "销售额"},{"江苏", "Anna", "230"},{"江苏", "Alex", "190"},{"江苏","Jack","320"},{"江苏","Apple","210"},{"浙江","Faye","150"},{"浙江","Sammi","280"}};

return a;

}

以jws方式发布WebService：将写好的TestWS2TDClient.java文件重命名TestWS2TDClient.jws，放在Tomcat\webapps\axis即可。

在java类中访问WebService数据源

Java中发布一个soap请求，访问TestWS2TDClient.java，得到返回的数据，代码如下：

try {
    String endpoint = "http://localhost:8080/axis/TestWS2TDClient.jws";
    Service service = new Service(); //创建一个服务(service)调用(call)
    Call call = (Call) service.createCall(); // 通过service创建call对象
    call.setTargetEndpointAddress(new java.net.URL(endpoint)); // 设置service所在URL
    call.setOperationName(new QName("http://localhost:8080/axis/TestWS2TDClient.jws","getTD"));  // 调用service中的getTD方法
    String[][] ret = (String[][])call.invoke(new Object[] {}); // getTD方法没有参数，因此传一个空的对象，得到service中getTD返回的数据
    return ret;
} catch (Exception e) {
    e.printStackTrace();
}

Soap即简单对象访问协议，客户端发送一个请求，调用相应的对象，然后服务器返回结果。这些消息是XML格式的，并且封装成符合HTTP协议的消息。

在此期间需要引入axis.jar、commons-discovery-0.2.jar、commons-logging-1.0.4.jar、wadl4j-a.5.a.jar、log4j-1.2.8.jar、jaxrpc.jar六个包，可以在zxis\WEB-INF\lib下找到。

将获得数据转为程序数据集

访问WebService后，该服务会返回数据给客户端，该例中返回一个字符串数组。定义WebServiceTableData.java类，扩展AbstractTableData，将获得的数组数据转为程序数据集。完整代码如下：

package com.fr.data;

import javax.xml.namespace.QName;
import org.apache.axis.client.Call;
import org.apache.axis.client.Service;
import com.fr.data.AbstractTableData;
import com.fr.general.data.TableDataException;

public class WebServiceTableData extends AbstractTableData{
    private String[][] data;

    public WebServiceTableData() {
        this.data = this.getData();
    }

    //获取列数
    public int getColumnCount() throws TableDataException {
        return data[0].length;
    }

    //获取列的名称为数组中第一行的值
    public String getColumnName(int columnIndex) throws TableDataException {
        return data[0][columnIndex];
    }

    //获取行数为数据的长度-1
    public int getRowCount() throws TableDataException {
        return data.length - 1;
    }

    //获取值
    public Object getValueAt(int rowIndex, int columnIndex) {
        return data[rowIndex + 1][columnIndex];
    }

    public String[][] getData() {
        try {
            String endpoint = "http://localhost:8080/axis/TestWS2TDClient.jws";
            Service service = new Service();
            Call call = (Call) service.createCall();
            call.setTargetEndpointAddress(new java.net.URL(endpoint));
            call.setOperationName(new QName("http://localhost:8080/axis/TestWS2TDClient.jws",
                    "getTD"));
            String[][] ret = (String[][])call.invoke(new Object[] {});
            return ret;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return new String[][] {};
    }
}

将编译好的class文件拷贝到%FR_HOME%/WebReport/WEB-INF/classes/com/fr/data文件夹下。

设计器中调用程序数据集

新建报表，定义数据集，选择程序数据集，选择定义好的程序数据集WebServiceTableData.class，自定义数据集的名称为ds1，启动tomcat服务器，点击预览，效果如下：

FineReport——报表技术领跑者 2017-01-11 11:39 发表评论

上传文件至数据库并下载

FineReport——报表技术领跑者 — Thu, 05 Jan 2017 02:18:00 GMT

在FineReport中，会出现希望直接将txt、excel等文件整个保存在数据库中进行备份，并且希望通过FineReport制作报表将这些文件下载下来的情况。

上传：使用文件控件上传文件，以二进制流保存至数据库字段中（字段类型必须是用于保存二进制数据的）；

下载：直接将二进制数据拖入单元格，设置单元格的其他属性>用下载链接显示二进制内容，就可以下载文件。

下面通过上传一个txt文件至sql server数据库中并下载为例来说明实现过程。Sqlite数据库仅支持上传，不支持下载的。

前提准备

准备一个txt文件，数据库中创建一张数据库表file，包含字段(filename[文本]、file[Blob对象])

数据库不同可以保存文件的字段类型是不同的，以下列出常用数据库保存二进制数据的字段类型：

上传文件至数据库

模板制作

前提准备好后，就可以制作一张填报模板，上传文件到数据库，文件以二进制数据流保存在数据库字段中，模板设计界面如下，并按照图上说明设置报表填报属性：

如果是单文件上传，则可严格控制，勾选只支持单文件上传，还可以设置允许上传的文件类型；如果是多文件上传，就不需要勾选只支持单文件上传这个勾选项了。

上传提交

保存模板，进行填报预览，上传文件并提交，文件就会以二进制数据保存到数据库中：

鼠标移至文件控件所在单元格，即B2，单击右上角的编辑按钮，进入编辑状态，点击上传按钮即可上传文件，如下图：

提交成功之后，在数据库中可以看到数据。

下载

重新打开模板，添加数据库查询ds1，SQL语句为select *from file，将保存的数据查询出来；将字段拖入到单元格中，并设置文件字段所在单元格的其他属性>用下载链接显示二进制内容，并设置下载后的文件名：

再次保存模板，填报预览，就可以点击下载了：

FineReport——报表技术领跑者 2017-01-05 10:18 发表评论

FineReport:任意时刻只允许在一个客户端登陆账号的插件

FineReport——报表技术领跑者 — Tue, 20 Dec 2016 06:31:00 GMT

摘要: 在使用FineReport报表系统中，处于账户安全考虑，有些企业希望同一账号在任意时刻智能在统一客户端登录。那么当A用户在C1客户端登陆后，该账号又在另外一个C2客户端登陆，服务器如何取判断呢？开发原理当服务器在得知A在C1登陆后，在cookie里面写入一个标识ID~将浏览器标记，然后以后的访问自然就能够根据匹配用户名和对应的标记来确定这个用户是不是在换浏览器登陆了，当匹配到用户异地登陆，... 阅读全文

FineReport——报表技术领跑者 2016-12-20 14:31 发表评论

如何开发FineReport的自定义控件？

FineReport——报表技术领跑者 — Thu, 15 Dec 2016 07:35:00 GMT

FineReport作为插件化开发的报表软件，有些特殊需求的功能需要自己开发，开发的插件包帆软官方有提提供，可以去帆软论坛上找，本文将主要介绍如何开发一个自定义控件，这里讲讲方法论。

第一步：实例化一个注册控件的接口

给四个信息我们的控件类，界面类，图标路径，控件类型名字

package com.hg.free.plugin.customcombo.param;

import com.fr.design.designer.creator.XComboBox;

import com.fr.design.fun.impl.AbstractParameterWidgetOptionProvider;

import com.fr.form.ui.Widget;

public class WidgetRegister extends AbstractParameterWidgetOptionProvider {

        @Override

        public Class extends Widget> classForWidget() {

                return CustomComboBox.class;

        }



        @Override

        public Class appearanceForWidget() {

                return XComboBox.class;

        }

        @Override

        public String iconPathForWidget() {

                return "/com/fr/web/images/combobox.png";

        }

        @Override

        public String nameForWidget() {

                return "自定义下拉框";

        }

}

第二步，重写控件类

package com.hg.free.plugin.customcombo.param;

import com.fr.form.ui.ComboBox;

import com.fr.ui.DataFilter;

public class CustomComboBox extends ComboBox {

        private static final long serialVersionUID = 7169771062153345236L;



        @Override

        public String getXType() {

        return "customcombo";

    }



        @Override

        protected DataFilter createDataFilter() {

        return new CustomComboBoxDataFilter();

    }

}

因为要改变过滤方式，就要重写一个过滤器

package com.hg.free.plugin.customcombo.param;

import com.fr.form.ui.ComboBoxDataFilter;

public class CustomComboBoxDataFilter extends ComboBoxDataFilter {

        @Override

        public boolean isMatch(String txt, String filter) {

                if(null==txt && null!=filter)return false;

                if(null==txt && null==filter)return true;

                return txt.indexOf(filter)!=-1;

        }

}

第三步，继承前端控件JS

;

(function($){

        FR.CustomComboBoxEditor = FR.extend(FR.ComboBoxEditor, {

                _init: function () {

                        FR.CustomComboBoxEditor.superclass._init.apply(this, arguments);

                }

        });

        $.shortcut("customcombo", FR.CustomComboBoxEditor);

})(jQuery);

好了~以上就是全部的代码开发~然后写个xml用ant打包成插件就可以了。

代码解释：

首先来看这段代码是什么意思呢？

就是我定义了一个控件类型为CustomComboBoxEditor的控件，他继承了ComboBoxEditor的全部方法和属性，并且我把新定义的控件类型的标记声明为customcombo，这个标记有啥用勒，其他用途就不说了，单单说在这里的用途，就是JAVA 本身是不能让前端取生成什么控件的~而是通过告诉前端一个配置，前端的JS引擎（姑且这么称呼他吧）~根据这个配置去执行对应的脚本生成对应的dom样式之类的~shortcut你就这么理解~后台返回一个配置是要生成customcombo这个控件~那么它就像一个map一样找到了对应的键值FR.CustomComboBoxEditor~然后把该控件的配置丢到这个方法里面去执行。就生成我们的控件了。

因为这个例子中并没有对前端有任何修改的要求~所以就没做任何改动~下面看后台。

我们这个例子是要修改模糊匹配的方式。

那么原来控件匹配的机制是怎么搞的，是这样的：假设我是一个老板（妈蛋也只能假设一下了），现在我想了解一份纸质合同的细节，但是公司有一大坨纸质合同我怎么找呢~当然是请个秘书了（美女最好），我告诉她我要的合同大概是有些什么信息~然后她去找出来把最后找到的合同给我就可以了。

我们这里控件ComboBox就是老板，ComboBoxDataFilter就是秘书，就是这么个意思，这里每个秘书肯定都有自己找合同的一套方法，以前那个秘书是只要有点相关的就都找出来了，新来的这个秘书是只找老板提示的信息匹配到的合同~查找匹配的方法就是isMatch，这个代码就是这样的，代码的开发其实只要仔细分析就能够映射到现实生活中的很多事务处理上面~因为代码也是人设计的，逻辑总逃脱不了人处理事务的思维。

FineReport——报表技术领跑者 2016-12-15 15:35 发表评论