[发明专利]一种基于IOP平台的多级联动组件的方法

说明书

技术领域

本发明涉及IPO平台软件技术领域，具体涉及一种基于IOP平台的多级联动组件的方法。

背景技术

近年来随着大数据、云计算的发展，云平台也越来越多。云平台许多资源类型是有联动关系的，比如虚拟环境-租户-实例，实例-节点组-节点-组件等等这种联动关系。在查看实例或者组件的基本信息、监控等信息的时候，就需要实现一个多个联动的选择组件，来进行选择。IOP平台上联动关系繁多，且应用场景也很多，每个地方都去用js代码去实现，就会造成代码冗余，并且耗费开发人员的时间。

发明内容

本发明要解决的技术问题是：针对上述问题，本发明提供一种基于IOP平台的多级联动组件的方法，该发明的联动级数是可以自定义的，并且支持传入数据或者请求数据的url来获取下一菜单的数据。这样不仅仅提高了代码的复用率，也大大减少了开发人员的开发时间，提高了开发效率。

本发明所采用的技术方案为：

一种基于IOP平台的多级联动组件的方法，所述方法通过封装一个jQuery的多级联动组件，然后通过多级联动组件对外提供一个初始化方法，通过该元素调用多级联动组件对外提供的初始化方法，生成一个多级联动的实例。

所述多级联动组件的联动级数通过自定义方式设置。

所述多级联动组件的联动级数能够通过传入数据，或者根据请求数据的url来获取下一菜单的数据。这样不仅仅提高了代码的复用率，也大大减少了开发人员的开发时间，提高了开发效率。

所述初始化方法通过option参数进行设置，option参数的配置项包括：

type，该多级联动实例的摆放方式，有两个值：horizontal（水平摆放）、vertical（垂直摆放）；

levels，将要生成的多级联动实例的级数；

label，多级联动实例的这一级的标题；

data，渲染此级的数据，可以是数组对象，也可以是url字符串或者函数。为数组时直接用此数组的数据，为url字符串时，会先向后台发送请求获取数据，为函数时会获取该函数的返回值；

dataFilter，对data数据的处理函数，若是data数据符合要求，该函数可以为空。

所述option参数的配置项中的data，渲染此级的数据，渲染的数据为数组，数组中的对象形式包括：

name为菜单中每个选项的text值；

value为每个选项的value值；

selected 为此项是否在初始化的时候选中；

pValue为该选项的对应的父级的value值，第一级的此项为空。

所述方法通过在需要多级联动的实例的地方定义一个html元素，通过html元素的jQuery对象调用组件的初始化方法并传入参数option，页面根据传入的参数生成相对应的多级联动组件的实例。

所述方法在多级联动组件的每一级渲染完成后，调用该级的callback函数，在切换一级的选项时调用该级的changed函数。

所述callback函数和changed函数中可以根据该级的value，对下一级的data做出过滤，选择出该级的value对应的下一级的子选项。

所述方法通过对外提供一个jQuery对象调用的接口，通过调用该接口并传入相关参数，生成多级联动组件。

本发明的有益效果为：

本发明方法通过封装组件的方法不仅提高了代码的复用率，也减少了开发人员的开发时间，提高了开发效率。

具体实施方式

根据具体实施方式对本发明进一步说明：

一种基于IOP平台的多级联动组件的方法，所述方法具体实施过程如下：

（1）封装的多级联动组件对外提供一个jQuery对象调用的方法$.fn.mutliLinkage()，该方法可以接受option参数；

（2）option参数中的配置项为：option={

type: string,

levels: num,

lable: string,

data: Array|string|function,

dataFilter: function

children: object,

callback: function,

changed: function

}。