一种web控件组合方法
【技术领域】
[0001] 本发明涉及一种采用的计算机控件开发领域，尤其是基于iframe技术的将单一 的子控件合并为组合控件的方法。
【背景技术】
[0002] 〈iframe〉标签规定一个内联框架。一个内联框架被用来在当前HTML文档中嵌入 另一个文档。控件对数据和方法的封装，包括用户界面控件等。用户界面控件用于开发构 建用户界面（UI)的控件，帮助完成软件开发中视窗、文本框、按钮、下拉式菜单等界面元素 的开发。
[0003] 现有技术中，当界面需要分别展示多类型的内容时，利用控件来显示不同类别的 内容是一种常用的方式。传统的方式是把每个控件都做一个单独的页面，当选择控件时只 能同时出现一个页面，这时用户分别针对不同的控件操作，比如在人员管理控件中，用户只 能针对这一个控件进行操作，不能在多个其他比如部门控件页面、角色控件页面之间进行 切换。并且传统方式中，当需要上述这种多个不同类型的控件数据时，只能添加多个表单控 件来实现。这样也导致了切换不够灵活，页面紊乱。同时也带来了交互上面的性能问题，会 明显增加用户的工作量。总之，这种单一控件的展示方式灵活性和扩展性都不高。
【发明内容】
[0004] 本发明目的在于提供一种基于iframe技术的web控件组合方法，实现在同一页面 跟组合控件进行交互，减少用户工作量，提高控件扩展性。
[0005] 本发明的web控件组合方法，是基于iframe对web控件进行组合，包括以下步骤： 子控件建立步骤，建立至少一个子控件；页面创建步骤，建立嵌套有iframe的页面，在该页 面中，根据用户选择将组合控件展示在所述iframe中，其中所述组合控件包括至少一个所 述子控件；定义步骤，为所述页面定义调用函数；以及，显示步骤，通过所述调用函数显示 所述组合控件的内容。
[0006] 页面采用iframe，保证了子控件及其框架的可扩展性，对各个子控件样式可以做 灵活的适应性调整。
[0007] 进一步地，所述页面创建步骤包括以下子步骤：子控件选择按钮新建步骤，在所述 页面新建子控件选择按钮，每个所述子控件选择按钮分别对应一个所述子控件，并设计相 应的iframe，每个所述iframe对应一个所述子控件；以及，合成步骤，通过对所述子控件选 择按钮进行选择，将用户所需的子控件合成组合控件。
[0008] 进一步地，所述合成步骤还包括以下子步骤：赋值步骤，每种组合控件对应一个类 型，该类型数字转换成二进制，该二进制的每一位分别表示对应的子控件是否显示，〇表示 不显示，1表示显示；子控件数目判断步骤，根据所述类型，判断所述组合控件中包括的子 控件数目，如果类型数字为〇,则表示没有选择子控件，如果类型数字不为〇则判断是一个 子控件还是多个子控件；以及，封装步骤，当子控件数目为一个或多个时，封装子控件数据 为组合控件数据。
[0009] 进一步地，所述定义步骤还包括以下子步骤：子控件函数绑定步骤，为每个所述子 控件选择按钮分别绑定子控件函数；以及子控件调用页面生成步骤，在所述子控件函数内 部动态生成子控件调用页面，在该子控件调用页面中加入url，并向该子控件调用页面的字 段中传递参数。
[0010] 进一步地，所述子控件调用页面生成步骤还包括以下子步骤：数据标签定义步骤， 定义组合控件数据的接收标签，定义组合控件数据的回写标签，并在所述组合控件数据的 回写标签中定义调用所述子控件函数的单击事件。
[0011] 进一步地，所述显示步骤中，通过发送URL请求，后台返回组合控件数据并将用户 所需的子控件的内容载入相应的iframe中。
[0012] 进一步地，所述显示步骤还包括以下子步骤：接受步骤，通过所述接收回写组合控 件数据的标签接受返回值，该返回值就是封装子控件数据后的字符串结果；返回值判断步 骤，对是否存在返回值进行判断；写入步骤，在所述返回值判断步骤判断为存在返回值的情 况下写入组合控件的内容并显示，在所述域判断步骤判断为不存在返回值的情况下提示需 提供返回值。
[0013] 并且，所述显示步骤还包括以下子步骤：显示控制步骤，控制所述组合控件中的子 控件数据的显示和隐藏。
[0014] 并且，所述显示步骤还包括以下子步骤：控件数据设置步骤，设置对所述组合控件 中的子控件数据的分离和汇总。
[0015] 另外，本发明的web控件组合方法中所述子控件选择按钮新建步骤还包括：动画 效果插入步骤，对所述子控件选择按钮插入动画效果。
[0016] 通过本发明的web控件组合方法，实现的控件集成了多种功能为一身，支持较大 数据量，提高了子控件的载入速度。组合控件分离客户端的信息动态的发送给子控件，子控 件回写的内容以封装方式返回到前台，这种方式也减少了使用者的工作量。从维度上扩展 了控件的展示内容，分门别类的展示了多种内容，方便灵活管理，即通过配置实现单个子控 件显示也可以实现多个子控件显示，通过点击按钮可以动态的实现不同子控件的切换，同 时还可以选择不同的数据源来实现动态组装数据，将过去单一控件只能传递一种参数改善 为可以传递多种参数。并且采用本发明可以支持轻量级的业务页面扩展，使元素简洁明了 的业务页面都可以嵌套进来。
【附图说明】
[0017] 下面将参照附图并结合实施例对本发明进行具体说明。
[0018] 图1为本发明【具体实施方式】的基本方法流程图；
[0019] 图2为本发明页面创建步骤的子步骤流程图；
[0020] 图3为合成步骤的子步骤流程图；
[0021] 图4为定义步骤的子步骤流程图；
[0022] 图5为显示步骤的子步骤流程图；
[0023] 图6为本发明实现后的点击部门按钮时页面效果示意图；
[0024] 图7为本发明实现后的点击人员按钮时页面效果示意图；
[0025] 图8为本发明实现后的点击角色按钮时页面效果示意图；
[0026] 图9为本发明实现后的点击条件按钮时页面效果示意图。
【具体实施方式】
[0027] 下面参照附图并借助本发明的实施例，对本发明的技术方案做详细描述。
[0028] 如图1所示，本发明的web控件组合方法，是基于iframe对web控件进行组合，具 体地，把多个tree (即树形）控件组合成一个tree控件，并能够实现动态灵活显示的一种 方案，包括以下步骤：子控件建立步骤S1，建立至少一个子控件；页面创建步骤S2,建立嵌 套有iframe的页面，在该页面中，根据用户选择将组合控件展示在所述iframe中，其中所 述组合控件包括至少一个所述子控件；定义步骤S3,为所述页面定义调用函数；以及显示 步骤S4，通过所述调用函数显示所述组合控件的内容。
[0029] 通过本发明，可以实现控件灵活显示，可以让其显示一个子控件，也可以显示多个 子控件；将之前的单一子控件只能传递一种参数变为现在可以传递多种参数。
[0030] 具体地，如图2所示，页面创建步骤S2包括以下子步骤：
[0031 ] 子控件选择按钮新建步骤S21，在所述页面新建子控件选择按钮，每个所述子控件 选择按钮分别对应一个所述子控件，并设计相应的iframe，每个所述iframe对应一个所述 子控件；以及合成步骤S22,通过对所述子控件选择按钮进行选择，将用户所需的子控件合 成组合控件。
[0032] 其中在子控件选择按钮新建步骤S21中，在HTML中嵌套iframe框架，而且该 iframe框架里面的页面是可以动态加载的。当用户点击不同的子控件选择按钮时，显示的 页面动态变化。比如，在上述页面添加部门按钮、人员按钮、角色按钮、条件查询按钮，设计 iframe的效果图如图6所示。这样，部门按钮将对应部门子控件、人员按钮对应人员子控 件、角色按钮对应角色子控件、条件查询按钮（或者条件按钮）对应条件查询子控件等。各 个子控件样式适应性调整如子控件大小、子控件选择按钮的隐藏和显示也可自动完成。
[0033] 并且，在子控件选择按钮新建步骤S21中还可以包括动画效果插入步骤，对所述 子控件选择按钮插入动画效果，从而提高视觉体验。
[0034] 进一步地，如图3所示，合成步骤S22进一步包括赋值步骤S221、子控件数目判 断步骤S222、和封装步骤S223。本实施例中，S221赋值步骤中，每种组合控件对应一个类 型，该类型数字转换成二进制，该二进制的每一位分别表示对应的子控件是否显示，0表示 不显示，1表示显示。具体地，例如，人员控件，部门控件，角色控件，条件查询控件分别对应 二进制数1或0。在依次面对人员按钮，部门按钮，角色按钮，条件查询按钮时，若根据用户 所需，激活其中的人员按钮和部门按钮，则后台二进制表示为1100。【具体实施方式】可以是， javascript里面包括type字段，用该字段表示组合信息，具体地： * @param type 控件种类
[0035] *部门人员角色 type 描述
[0036] CN 105117234 A 说明书 4/9 页 * 0 O O Q 无权限控件 * 1 00 4 部门控件 * 0 I 0 2 人员控件 * 0 0 1 1 角色控件 * 1 1 0 6 部门、人员控件 *101 5 部门、角色控件 * 0 1 1 3 人员、角色控件 * I I 1 7 部门控件，人员控件，角色控件
[0037] 比如当type值为数字0时表示的二进制000,则表示无权限控件；type值为数字 4时表示的二进制100,则表示为部门控件；type值为数字2时表示的二进制010,则表示为 人员控件；type值为数字1时表示的二进制001，则表示为角色控件；type值为数字6时表 示的二进制110,则表示为部门控件、人员控件；type值为数字5时表示二进制101，则表示 为部门控件和角色控件；type值为数字3时表示二进制011，则表示人员控件和角色控件； type值为数字7则表示的二进制就是111，则此时应显示为部门控件，人员控件，角色控件 的三个控件。这样用户对子控件的个性化组合可以以更方便的形式表达并传递，并且组合 控件不受子控件数量限制，当需要扩展子控件类型时，只需对增加的子控件增加相应的二 进制位数。
[0038] 子控件数目判断步骤S222中，根据所述类型的数字，判断所述组合控件中包括的 子控件数目，如果类型的数字为〇,则表示没有选择子控件，如果类型数字不为〇则判断一 个子控件还是多个子控件。【具体实施方式】中，可以根据javascript设置的type字段进行 判断的。例如，判断type数字如果为0,换成二进制为都为0表示，没有控件显示，如果数字 不为〇则判断是否是单一控件还是组合控件，如type类型的数字为1、2、4换成二进制分别 为001、010、100,分别表示的是一个子控件的情况。其余值时为多控件情况。
[0039] 封装步骤S223中，当子控件数目为一个或多个时，封装子控件数据为组合控件数 据，具体的可以利用json封装子控件数据。在子控件数目判断步骤S222中判断为仅包括 一个子控