[發(fā)明專利]一種基于IOP平臺(tái)的多級(jí)聯(lián)動(dòng)組件的方法

在審

• 申請(qǐng)?zhí)枺?/td>: 201711205010.9
• 申請(qǐng)日: 2017-11-27
• 公開（公告）號(hào): CN107870764A
• 公開（公告）日: 2018-04-03
• 發(fā)明（設(shè)計(jì)）人: 馮永青
• 申請(qǐng)（專利權(quán)）人: 鄭州云海信息技術(shù)有限公司
• 主分類號(hào): G06F8/36
• 分類號(hào): G06F8/36
• 代理公司: 濟(jì)南信達(dá)專利事務(wù)所有限公司37100
• 代理人: 張靖

技術(shù)領(lǐng)域

本發(fā)明涉及IPO平臺(tái)軟件技術(shù)領(lǐng)域，具體涉及一種基于IOP平臺(tái)的多級(jí)聯(lián)動(dòng)組件的方法。

背景技術(shù)

近年來(lái)隨著大數(shù)據(jù)、云計(jì)算的發(fā)展，云平臺(tái)也越來(lái)越多。云平臺(tái)許多資源類型是有聯(lián)動(dòng)關(guān)系的，比如虛擬環(huán)境-租戶-實(shí)例，實(shí)例-節(jié)點(diǎn)組-節(jié)點(diǎn)-組件等等這種聯(lián)動(dòng)關(guān)系。在查看實(shí)例或者組件的基本信息、監(jiān)控等信息的時(shí)候，就需要實(shí)現(xiàn)一個(gè)多個(gè)聯(lián)動(dòng)的選擇組件，來(lái)進(jìn)行選擇。IOP平臺(tái)上聯(lián)動(dòng)關(guān)系繁多，且應(yīng)用場(chǎng)景也很多，每個(gè)地方都去用js代碼去實(shí)現(xiàn)，就會(huì)造成代碼冗余，并且耗費(fèi)開發(fā)人員的時(shí)間。

發(fā)明內(nèi)容

本發(fā)明要解決的技術(shù)問(wèn)題是：針對(duì)上述問(wèn)題，本發(fā)明提供一種基于IOP平臺(tái)的多級(jí)聯(lián)動(dòng)組件的方法，該發(fā)明的聯(lián)動(dòng)級(jí)數(shù)是可以自定義的，并且支持傳入數(shù)據(jù)或者請(qǐng)求數(shù)據(jù)的url來(lái)獲取下一菜單的數(shù)據(jù)。這樣不僅僅提高了代碼的復(fù)用率，也大大減少了開發(fā)人員的開發(fā)時(shí)間，提高了開發(fā)效率。

本發(fā)明所采用的技術(shù)方案為：

一種基于IOP平臺(tái)的多級(jí)聯(lián)動(dòng)組件的方法，所述方法通過(guò)封裝一個(gè)jQuery的多級(jí)聯(lián)動(dòng)組件，然后通過(guò)多級(jí)聯(lián)動(dòng)組件對(duì)外提供一個(gè)初始化方法，通過(guò)該元素調(diào)用多級(jí)聯(lián)動(dòng)組件對(duì)外提供的初始化方法，生成一個(gè)多級(jí)聯(lián)動(dòng)的實(shí)例。

所述多級(jí)聯(lián)動(dòng)組件的聯(lián)動(dòng)級(jí)數(shù)通過(guò)自定義方式設(shè)置。

所述多級(jí)聯(lián)動(dòng)組件的聯(lián)動(dòng)級(jí)數(shù)能夠通過(guò)傳入數(shù)據(jù)，或者根據(jù)請(qǐng)求數(shù)據(jù)的url來(lái)獲取下一菜單的數(shù)據(jù)。這樣不僅僅提高了代碼的復(fù)用率，也大大減少了開發(fā)人員的開發(fā)時(shí)間，提高了開發(fā)效率。

所述初始化方法通過(guò)option參數(shù)進(jìn)行設(shè)置，option參數(shù)的配置項(xiàng)包括：

type，該多級(jí)聯(lián)動(dòng)實(shí)例的擺放方式，有兩個(gè)值：horizontal（水平擺放）、vertical（垂直擺放）；

levels，將要生成的多級(jí)聯(lián)動(dòng)實(shí)例的級(jí)數(shù)；

label，多級(jí)聯(lián)動(dòng)實(shí)例的這一級(jí)的標(biāo)題；

data，渲染此級(jí)的數(shù)據(jù)，可以是數(shù)組對(duì)象，也可以是url字符串或者函數(shù)。為數(shù)組時(shí)直接用此數(shù)組的數(shù)據(jù)，為url字符串時(shí)，會(huì)先向后臺(tái)發(fā)送請(qǐng)求獲取數(shù)據(jù)，為函數(shù)時(shí)會(huì)獲取該函數(shù)的返回值；

dataFilter，對(duì)data數(shù)據(jù)的處理函數(shù)，若是data數(shù)據(jù)符合要求，該函數(shù)可以為空。

所述option參數(shù)的配置項(xiàng)中的data，渲染此級(jí)的數(shù)據(jù)，渲染的數(shù)據(jù)為數(shù)組，數(shù)組中的對(duì)象形式包括：

name為菜單中每個(gè)選項(xiàng)的text值；

value為每個(gè)選項(xiàng)的value值；

selected 為此項(xiàng)是否在初始化的時(shí)候選中；

pValue為該選項(xiàng)的對(duì)應(yīng)的父級(jí)的value值，第一級(jí)的此項(xiàng)為空。

所述方法通過(guò)在需要多級(jí)聯(lián)動(dòng)的實(shí)例的地方定義一個(gè)html元素，通過(guò)html元素的jQuery對(duì)象調(diào)用組件的初始化方法并傳入?yún)?shù)option，頁(yè)面根據(jù)傳入的參數(shù)生成相對(duì)應(yīng)的多級(jí)聯(lián)動(dòng)組件的實(shí)例。

所述方法在多級(jí)聯(lián)動(dòng)組件的每一級(jí)渲染完成后，調(diào)用該級(jí)的callback函數(shù)，在切換一級(jí)的選項(xiàng)時(shí)調(diào)用該級(jí)的changed函數(shù)。

所述callback函數(shù)和changed函數(shù)中可以根據(jù)該級(jí)的value，對(duì)下一級(jí)的data做出過(guò)濾，選擇出該級(jí)的value對(duì)應(yīng)的下一級(jí)的子選項(xiàng)。

所述方法通過(guò)對(duì)外提供一個(gè)jQuery對(duì)象調(diào)用的接口，通過(guò)調(diào)用該接口并傳入相關(guān)參數(shù)，生成多級(jí)聯(lián)動(dòng)組件。

本發(fā)明的有益效果為：

本發(fā)明方法通過(guò)封裝組件的方法不僅提高了代碼的復(fù)用率，也減少了開發(fā)人員的開發(fā)時(shí)間，提高了開發(fā)效率。

具體實(shí)施方式

根據(jù)具體實(shí)施方式對(duì)本發(fā)明進(jìn)一步說(shuō)明：

一種基于IOP平臺(tái)的多級(jí)聯(lián)動(dòng)組件的方法，所述方法具體實(shí)施過(guò)程如下：

（1）封裝的多級(jí)聯(lián)動(dòng)組件對(duì)外提供一個(gè)jQuery對(duì)象調(diào)用的方法$.fn.mutliLinkage()，該方法可以接受option參數(shù)；

（2）option參數(shù)中的配置項(xiàng)為：option={

type: string,

levels: num,

lable: string,

data: Array|string|function,

dataFilter: function

children: object,

callback: function,

changed: function

}。