CN105117234A - 一种web控件组合方法 - Google Patents

Abstract

本发明公开一种web控件组合方法，基于iframe对web控件进行组合，包括:子控件建立步骤，建立至少一个子控件；页面创建步骤，建立嵌套有iframe的页面，在该页面中，根据用户选择将组合控件展示在所述iframe中，其中所述组合控件包括至少一个所述子控件；定义步骤，为所述页面定义调用函数；以及显示步骤，通过所述调用函数显示所述组合控件的内容。本发明能够达到如下技术效果:第一，灵活显示，可以在页面中显示一个控件，也可以显示多个控件；第二，将之前的单一控件只能传递一种参数升级为现在可以传递多种参数。

Description

一种web控件组合方法

技术领域

本发明涉及一种采用的计算机控件开发领域，尤其是基于iframe技术的将单一的子控件合并为组合控件的方法。

背景技术

<iframe>标签规定一个内联框架。一个内联框架被用来在当前HTML文档中嵌入另一个文档。控件对数据和方法的封装，包括用户界面控件等。用户界面控件用于开发构建用户界面(UI)的控件，帮助完成软件开发中视窗、文本框、按钮、下拉式菜单等界面元素的开发。

现有技术中，当界面需要分别展示多类型的内容时，利用控件来显示不同类别的内容是一种常用的方式。传统的方式是把每个控件都做一个单独的页面，当选择控件时只能同时出现一个页面，这时用户分别针对不同的控件操作，比如在人员管理控件中，用户只能针对这一个控件进行操作，不能在多个其他比如部门控件页面、角色控件页面之间进行切换。并且传统方式中，当需要上述这种多个不同类型的控件数据时，只能添加多个表单控件来实现。这样也导致了切换不够灵活，页面紊乱。同时也带来了交互上面的性能问题，会明显增加用户的工作量。总之，这种单一控件的展示方式灵活性和扩展性都不高。

发明内容

本发明目的在于提供一种基于iframe技术的web控件组合方法，实现在同一页面跟组合控件进行交互，减少用户工作量，提高控件扩展性。

本发明的web控件组合方法，是基于iframe对web控件进行组合，包括以下步骤：子控件建立步骤，建立至少一个子控件；页面创建步骤，建立嵌套有iframe的页面，在该页面中，根据用户选择将组合控件展示在所述iframe中，其中所述组合控件包括至少一个所述子控件；定义步骤，为所述页面定义调用函数；以及，显示步骤，通过所述调用函数显示所述组合控件的内容。

页面采用iframe，保证了子控件及其框架的可扩展性，对各个子控件样式可以做灵活的适应性调整。

进一步地，所述页面创建步骤包括以下子步骤：子控件选择按钮新建步骤，在所述页面新建子控件选择按钮，每个所述子控件选择按钮分别对应一个所述子控件，并设计相应的iframe，每个所述iframe对应一个所述子控件；以及，合成步骤，通过对所述子控件选择按钮进行选择，将用户所需的子控件合成组合控件。

进一步地，所述合成步骤还包括以下子步骤：赋值步骤，每种组合控件对应一个类型，该类型数字转换成二进制，该二进制的每一位分别表示对应的子控件是否显示，0表示不显示，1表示显示；子控件数目判断步骤，根据所述类型，判断所述组合控件中包括的子控件数目，如果类型数字为0，则表示没有选择子控件，如果类型数字不为0则判断是一个子控件还是多个子控件；以及，封装步骤，当子控件数目为一个或多个时，封装子控件数据为组合控件数据。

进一步地，所述定义步骤还包括以下子步骤：子控件函数绑定步骤，为每个所述子控件选择按钮分别绑定子控件函数；以及子控件调用页面生成步骤，在所述子控件函数内部动态生成子控件调用页面，在该子控件调用页面中加入url，并向该子控件调用页面的字段中传递参数。

进一步地，所述子控件调用页面生成步骤还包括以下子步骤：数据标签定义步骤，定义组合控件数据的接收标签，定义组合控件数据的回写标签，并在所述组合控件数据的回写标签中定义调用所述子控件函数的单击事件。

进一步地，所述显示步骤中，通过发送URL请求，后台返回组合控件数据并将用户所需的子控件的内容载入相应的iframe中。

进一步地，所述显示步骤还包括以下子步骤：接受步骤，通过所述接收回写组合控件数据的标签接受返回值，该返回值就是封装子控件数据后的字符串结果；返回值判断步骤，对是否存在返回值进行判断；写入步骤，在所述返回值判断步骤判断为存在返回值的情况下写入组合控件的内容并显示，在所述域判断步骤判断为不存在返回值的情况下提示需提供返回值。

并且，所述显示步骤还包括以下子步骤：显示控制步骤，控制所述组合控件中的子控件数据的显示和隐藏。

并且，所述显示步骤还包括以下子步骤：控件数据设置步骤，设置对所述组合控件中的子控件数据的分离和汇总。

另外，本发明的web控件组合方法中所述子控件选择按钮新建步骤还包括：动画效果插入步骤，对所述子控件选择按钮插入动画效果。

通过本发明的web控件组合方法，实现的控件集成了多种功能为一身，支持较大数据量，提高了子控件的载入速度。组合控件分离客户端的信息动态的发送给子控件，子控件回写的内容以封装方式返回到前台，这种方式也减少了使用者的工作量。从维度上扩展了控件的展示内容，分门别类的展示了多种内容，方便灵活管理，即通过配置实现单个子控件显示也可以实现多个子控件显示，通过点击按钮可以动态的实现不同子控件的切换，同时还可以选择不同的数据源来实现动态组装数据，将过去单一控件只能传递一种参数改善为可以传递多种参数。并且采用本发明可以支持轻量级的业务页面扩展，使元素简洁明了的业务页面都可以嵌套进来。

附图说明

下面将参照附图并结合实施例对本发明进行具体说明。

图1为本发明具体实施方式的基本方法流程图；

图2为本发明页面创建步骤的子步骤流程图；

图3为合成步骤的子步骤流程图；

图4为定义步骤的子步骤流程图；

图5为显示步骤的子步骤流程图；

图6为本发明实现后的点击部门按钮时页面效果示意图；

图7为本发明实现后的点击人员按钮时页面效果示意图；

图8为本发明实现后的点击角色按钮时页面效果示意图；

图9为本发明实现后的点击条件按钮时页面效果示意图。

具体实施方式

下面参照附图并借助本发明的实施例，对本发明的技术方案做详细描述。

如图1所示，本发明的web控件组合方法，是基于iframe对web控件进行组合，具体地，把多个tree(即树形)控件组合成一个tree控件，并能够实现动态灵活显示的一种方案，包括以下步骤：子控件建立步骤S1，建立至少一个子控件；页面创建步骤S2，建立嵌套有iframe的页面，在该页面中，根据用户选择将组合控件展示在所述iframe中，其中所述组合控件包括至少一个所述子控件；定义步骤S3，为所述页面定义调用函数；以及显示步骤S4，通过所述调用函数显示所述组合控件的内容。

通过本发明，可以实现控件灵活显示，可以让其显示一个子控件，也可以显示多个子控件；将之前的单一子控件只能传递一种参数变为现在可以传递多种参数。

具体地，如图2所示，页面创建步骤S2包括以下子步骤：

子控件选择按钮新建步骤S21，在所述页面新建子控件选择按钮，每个所述子控件选择按钮分别对应一个所述子控件，并设计相应的iframe，每个所述iframe对应一个所述子控件；以及合成步骤S22，通过对所述子控件选择按钮进行选择，将用户所需的子控件合成组合控件。

其中在子控件选择按钮新建步骤S21中，在HTML中嵌套iframe框架，而且该iframe框架里面的页面是可以动态加载的。当用户点击不同的子控件选择按钮时，显示的页面动态变化。比如，在上述页面添加部门按钮、人员按钮、角色按钮、条件查询按钮，设计iframe的效果图如图6所示。这样，部门按钮将对应部门子控件、人员按钮对应人员子控件、角色按钮对应角色子控件、条件查询按钮(或者条件按钮)对应条件查询子控件等。各个子控件样式适应性调整如子控件大小、子控件选择按钮的隐藏和显示也可自动完成。

并且，在子控件选择按钮新建步骤S21中还可以包括动画效果插入步骤，对所述子控件选择按钮插入动画效果，从而提高视觉体验。

进一步地，如图3所示，合成步骤S22进一步包括赋值步骤S221、子控件数目判断步骤S222、和封装步骤S223。本实施例中，S221赋值步骤中，每种组合控件对应一个类型，该类型数字转换成二进制，该二进制的每一位分别表示对应的子控件是否显示，0表示不显示，1表示显示。具体地，例如，人员控件，部门控件，角色控件，条件查询控件分别对应二进制数1或0。在依次面对人员按钮，部门按钮，角色按钮，条件查询按钮时，若根据用户所需，激活其中的人员按钮和部门按钮，则后台二进制表示为1100。具体实施方式可以是，javascript里面包括type字段，用该字段表示组合信息，具体地：

比如当type值为数字0时表示的二进制000，则表示无权限控件；type值为数字4时表示的二进制100，则表示为部门控件；type值为数字2时表示的二进制010，则表示为人员控件；type值为数字1时表示的二进制001，则表示为角色控件；type值为数字6时表示的二进制110，则表示为部门控件、人员控件；type值为数字5时表示二进制101，则表示为部门控件和角色控件；type值为数字3时表示二进制011，则表示人员控件和角色控件；type值为数字7则表示的二进制就是111，则此时应显示为部门控件，人员控件，角色控件的三个控件。这样用户对子控件的个性化组合可以以更方便的形式表达并传递，并且组合控件不受子控件数量限制，当需要扩展子控件类型时，只需对增加的子控件增加相应的二进制位数。

子控件数目判断步骤S222中，根据所述类型的数字，判断所述组合控件中包括的子控件数目，如果类型的数字为0，则表示没有选择子控件，如果类型数字不为0则判断一个子控件还是多个子控件。具体实施方式中，可以根据javascript设置的type字段进行判断的。例如，判断type数字如果为0，换成二进制为都为0表示，没有控件显示，如果数字不为0则判断是否是单一控件还是组合控件，如type类型的数字为1、2、4换成二进制分别为001、010、100，分别表示的是一个子控件的情况。其余值时为多控件情况。

封装步骤S223中，当子控件数目为一个或多个时，封装子控件数据为组合控件数据，具体的可以利用json封装子控件数据。在子控件数目判断步骤S222中判断为仅包括一个子控件的情况下封装后的字符串结果是数组格式。其中json可以将JavaScript对象中表示的一组数据转换为字符串，然后就可以在函数之间传递这个字符串，或者在异步应用程序中将字符串从Web客户机传递给服务器端程序。其中json可以表示数组和复杂的对象。所述字符串结果就是组合控件数据，即显示步骤S4中的返回值。

进一步地，如图4所示，定义步骤S3还包括以下子步骤：子控件函数绑定步骤S31、和子控件调用页面生成步骤S32，在步骤S31中，为每个所述子控件选择按钮分别绑定子控件函数，例如为部门按钮、人员按钮、角色按钮、条件查询按钮分别绑定一个JavaScript函数。

在子控件调用页面生成步骤S32中，在所述子控件函数内部动态生成子控件调用页面，可以是form表单形式，在该子控件调用页面中如表单form的action属性加入各子控件地址url，用于完成表单跳转动作。并向该子控件调用页面的字段中传递参数，比如el(expresslanguage)表达式。

进一步地，子控件调用页面生成步骤S32中还包括数据标签定义步骤，对组合控件数据的接收标签进行定义，对组合控件数据的回写标签进行定义，并在所述组合控件数据的回写标签中定义调用所述子控件函数的单击事件。具体地，可以是定义一个input标签负责接收组合控件数据，定义一个textarea标签，用来回写组合控件数据，并在textarea标签中定义一个onclick事件用来调用Javascript函数，本实施例中定义为selectMoreDeptUserRole。当用户点击的时候，调用selectMoreDeptUserRole向后台请求数据。当用户点击不同的按钮时，参数不同，请求的页面不同，分别如图6、图7、图8和图9所示，其中图6为本发明实现后的点击部门按钮时页面效果示意图，图7为本发明实现后的点击人员按钮时页面效果示意图，图8为本发明实现后的点击角色按钮时页面效果示意图，图9为本发明实现后的点击条件按钮时页面效果示意图。

例如，代码如下：

a)<inputname＝"viewDeptIds"id＝"viewDeptIds"type＝"hidden">主要用来回写数据使用的

b)<textareaname＝"viewPeoples"title＝"查看范围"id＝"viewPeoples"onclick＝"selectMoreDeptUserRole('root','viewDeptIds','viewPeoples',true,”,”,7,true,”)"rows＝"3"cols＝"50"></textarea>

以上两个标签是在调用子控件的页面接受返回值时的域，本实施例中，域为隐藏式的文本控件，将input标签设置为隐藏域。

显示步骤S4中，通过发送URL请求，后台返回组合控件数据并将用户所需的子控件的内容载入相应的iframe中，在本实施方式中，通过post方式将用户所需的子控件调用并载入相应的iframe中。并且，将其他子控件，如角色控件、条件查询控件等即用户没有选择的子控件隐藏不显示。其中post是传输数据的方法，支持较大数据量，可以提高数据的访问速度的可靠性。

进一步地，如图5所示，S4显示步骤还包括以下子步骤。

接受步骤S41，通过所述接收回写组合控件数据的标签接受返回值，该返回值就是封装子控件数据后的字符串结果。例如，通过上述a)代码中的input标签接受回写的组合控件数据。

返回值判断步骤S42，对是否存在返回值进行判断。因为有时候会发生用户对任何一个子控件都未加选择的情况。增加该域判断步骤可以减少节省系统的无谓运行。

写入步骤S43，在所述返回值判断步骤判断为存在返回值的情况下写入组合控件的内容并显示，将返回的字符串结果放入隐藏域，在所述域判断步骤判断为不存在返回值的情况下提示需提供返回值。所述的组合控件的内容仅包括子控件的参数，因此将返回的字符串结果隐藏。

本发明具体实施方式的代码可以为如下形式：

通过实施本发明，能够达到如下技术效果：第一，灵活显示，可以让其显示一个控件，也可以显示多个控件；第二，之前的单一控件只能传递一种参数，现在可以传递多种参数。

另外，所述显示步骤还包括显示控制步骤，控制所述组合控件中的子控件数据的显示和隐藏。例如，采用JavaScript语言在部门控件中设置是否显示机构标志。并且用户在没有做出上述显示和隐藏设置指令时给予默认推荐设置。

并且，所述显示步骤还包括控件数据设置步骤，设置对所述组合控件中的子控件数据的分离和汇总。例如采用JavaScript语言在人员控件中设置是否增加人员、是否组织白名单等。并且用户在没有做出上述分离和汇总设置指令时给予默认推荐设置。

应当理解，以上借助本发明的优选实施例对本发明的技术方案进行了详细说明，应当理解，以上说明是示意性的而非限制性的，方法的步骤之间也不限于本实施例中提供的顺序。本领域的普通技术人员在阅读本发明说明书的基础上可以对各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。本发明的保护范围仅由随附权利要求书限定。

Claims (10)

1.一种web控件组合方法，基于iframe对web控件进行组合，其特征在于，

包括:

子控件建立步骤，建立至少一个子控件；

页面创建步骤，建立嵌套有iframe的页面，在该页面中，根据用户选择将组合控件展示在所述iframe中，其中所述组合控件包括至少一个所述子控件；

定义步骤，为所述页面定义调用函数；以及，

显示步骤，通过所述调用函数显示所述组合控件的内容。

2.根据权利要求1所述的web控件组合方法，其特征在于，

所述页面创建步骤包括以下子步骤：

子控件选择按钮新建步骤，在所述页面新建子控件选择按钮，每个所述子控件选择按钮分别对应一个所述子控件，并设计相应的iframe，每个所述iframe对应一个所述子控件；以及，

合成步骤，通过对所述子控件选择按钮进行选择，将用户所需的子控件合成组合控件。

3.根据权利要求2所述的web控件组合方法，其特征在于，

所述合成步骤还包括以下子步骤：

赋值步骤，每种组合控件对应一个类型，该类型数字转换成二进制，该二进制的每一位分别表示对应的子控件是否显示，0表示不显示，1表示显示；

子控件数目判断步骤，根据所述类型，判断所述组合控件中包括的子控件数目，如果类型数字为0，则表示没有选择子控件，如果类型数字不为0则判断是一个子控件还是多个子控件；以及，

封装步骤，当子控件数目为一个或多个时，封装子控件数据为组合控件数据。

4.根据权利要求2或3所述的web控件组合方法，其特征在于，

所述定义步骤包括以下子步骤：

子控件函数绑定步骤，为每个所述子控件选择按钮分别绑定子控件函数；以及

子控件调用页面生成步骤，在所述子控件函数内部动态生成子控件调用页面，在该子控件调用页面中加入url，并向该子控件调用页面的字段中传递参数。

5.根据权利要求4所述的web控件组合方法，其特征在于，

所述子控件调用页面生成步骤还包括以下子步骤：

数据标签定义步骤，定义组合控件数据的接收标签，定义组合控件数据的回写标签，并在所述组合控件数据的回写标签中定义调用所述子控件函数的单击事件。

6.根据权利要求5所述的web控件组合方法，其特征在于，

所述显示步骤中,通过发送URL请求，后台返回组合控件数据并将用户所需的子控件的内容载入相应的iframe中。

7.根据权利要求6所述的web控件组合方法，其特征在于，

所述显示步骤包括以下子步骤：

接受步骤，通过所述接收回写组合控件数据的标签接受返回值，该返回值就是封装子控件数据后的字符串结果；

返回值判断步骤，对是否存在返回值进行判断；

写入步骤，在所述返回值判断步骤判断为存在返回值的情况下写入组合控件的内容并显示，在所述域判断步骤判断为不存在返回值的情况下提示需提供返回值。

8.根据权利要求7所述的web控件组合方法，其特征在于，

所述显示步骤还包括以下子步骤：

显示控制步骤，控制所述组合控件中的子控件数据的显示和隐藏。

9.根据权利要求8所述的web控件组合方法，其特征在于，

所述显示步骤还包括以下子步骤：

控件数据设置步骤，设置对所述组合控件中的子控件数据的分离和汇总。

10.根据权利要求2、3、5～9中任一项所述的web控件组合方法，其特征在于，

所述子控件选择按钮新建步骤还包括：

动画效果插入步骤，对所述子控件选择按钮插入动画效果。