一種基于flex多層次布局的方法
【專利摘要】本發(fā)明公開了一種基于flex多層次布局的方法，該方法通過設(shè)置flex圖表的頂層，創(chuàng)建新的圖層用于顯示flex信息，然后設(shè)置flex頂層和子圖層的關(guān)系，設(shè)置父級(jí)圖層和子級(jí)圖層的關(guān)系，雙擊進(jìn)入下一圖層或者返回上一圖層，顯示flex圖表信息。通過多層次布局，可以在同一個(gè)flex頁面顯示不同的flex圖表信息，通過雙擊不同位置的圖標(biāo)，可以進(jìn)入flex的下一層頁面，也可以返回flex的上一層頁面，無需跳轉(zhuǎn)到新的頁面顯示，方便用戶查看flex圖表信息。
【專利說明】—種基于f I ex多層次布局的方法

【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及互聯(lián)網(wǎng)【技術(shù)領(lǐng)域】，尤其涉及一種基于flex多層次布局的方法。

【背景技術(shù)】
[0002]報(bào)表就是用表格、圖表等格式來動(dòng)態(tài)顯示數(shù)據(jù)，報(bào)表的主要特點(diǎn)是數(shù)據(jù)動(dòng)態(tài)化，格式多樣化，并且實(shí)現(xiàn)報(bào)表數(shù)據(jù)和報(bào)表格式的完全分離，用戶可以只修改數(shù)據(jù)，或者只修改格式。利用報(bào)表可以很直觀、明了的查看數(shù)據(jù)信息，常見的報(bào)表格式有柱狀圖、餅形圖、曲線圖等。因?yàn)閳?bào)表查看數(shù)據(jù)的直觀性，所以現(xiàn)在很多網(wǎng)站和應(yīng)用系統(tǒng)都有用到報(bào)表，但是有些報(bào)表是對(duì)瀏覽器和操作系統(tǒng)是有要求的，有些報(bào)表只能在windows操作系統(tǒng)下運(yùn)行，無法做到跨平臺(tái)運(yùn)行；有些報(bào)表只能在IE瀏覽器運(yùn)行，并不能很好的兼容其它瀏覽器，而flex圖表卻可以跨平臺(tái)和跨瀏覽器運(yùn)行。大部分報(bào)表工具在同一層次只能顯示一個(gè)報(bào)表，或者不能對(duì)報(bào)表進(jìn)行操作，而flex圖表可以做到這一點(diǎn)，通過flex多層次布局，可以在同一層次顯示多種flex報(bào)表，還可以對(duì)報(bào)表進(jìn)行操作。


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

[0003]本發(fā)明的目的是為了克服現(xiàn)有技術(shù)的缺陷，提供一種基于flex多層次布局的方法，包括:
[0004]S1.設(shè)置flex圖表的頂層；
[0005]s2.創(chuàng)建新的圖層用于顯示flex信息；
[0006]s3.設(shè)置flex頂層和子圖層的關(guān)系；
[0007]s4.設(shè)置父級(jí)圖層和子級(jí)圖層的關(guān)系；
[0008]s5.雙擊進(jìn)入下一圖層或者返回上一圖層；
[0009]s6.顯示flex圖表信息。
[0010]本發(fā)明技術(shù)方案帶來的有益效果:
[0011]本發(fā)明技術(shù)方案通過利用flex的多層次布局解決同一個(gè)flex頁面顯示多種類型flex圖表信息的問題。通過雙擊操作，可以進(jìn)入上一圖層或者進(jìn)入子圖層，這樣就可以在同一個(gè)flex容器顯示多張flex圖表，在多張flex報(bào)表之間進(jìn)行切換，可以很方便的查看圖表數(shù)據(jù)，還可以通過雙擊操作彈出一個(gè)查詢列表，顯示圖表的詳細(xì)信息。通過多層次布局將多張flex圖表集合在一起并在同一個(gè)功能模塊顯不,而不是一個(gè)功能模塊顯不一張flex圖表，加深了用戶體驗(yàn)。

【專利附圖】

【附圖說明】
[0012]為了更清楚地說明本發(fā)明實(shí)施例或現(xiàn)有技術(shù)中的技術(shù)方案，下面將對(duì)實(shí)施例或現(xiàn)有技術(shù)描述中所需要使用的附圖作簡單地介紹，顯而易見地，下面描述中的附圖僅僅是本發(fā)明的一些實(shí)施例，對(duì)于本領(lǐng)域普通技術(shù)人員來講，在不付出創(chuàng)造性勞動(dòng)的前提下，還可以根據(jù)這些附圖獲得其它的附圖。
[0013]圖1是本發(fā)明的方法流程圖。

【具體實(shí)施方式】
[0014]下面將結(jié)合本發(fā)明實(shí)施例中的附圖，對(duì)本發(fā)明實(shí)施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實(shí)施例僅僅是本發(fā)明一部分實(shí)施例，而不是全部的實(shí)施例?；诒景l(fā)明中的實(shí)施例，本領(lǐng)域普通技術(shù)人員在沒有作出創(chuàng)造性勞動(dòng)前提下所獲得的所有其他實(shí)施例，都屬于本發(fā)明保護(hù)的范圍。
[0015]本發(fā)明的主要?jiǎng)?chuàng)新點(diǎn)在于利用flex的SubNetwork層次切換原理對(duì)flex進(jìn)行多層次布局。首先，設(shè)置好flex圖表的頂層，給頂層設(shè)置一個(gè)ID以及相關(guān)信息，然后在創(chuàng)建一個(gè)新的圖層用于顯示子圖層的信息，將子圖層的父級(jí)引用指向頂層，這樣雙擊的時(shí)候就會(huì)根據(jù)圖層的子級(jí)進(jìn)入下一圖層，根據(jù)圖層的父級(jí)返回上一個(gè)圖層，這樣就可以在同一個(gè)容器層顯示多個(gè)flex圖表信息，還可以在子圖層創(chuàng)建屬于自己的子圖層，將屬于自己的子圖層的父級(jí)引用指向自己，這樣就可以在同一個(gè)容器層創(chuàng)建多個(gè)子圖層，層層進(jìn)行調(diào)用。當(dāng)觸發(fā)“雙擊”事件時(shí)，首先會(huì)獲取當(dāng)前圖層的信息，判斷當(dāng)前圖層是屬于哪一個(gè)圖層，當(dāng)前圖層的父級(jí)圖層是什么，當(dāng)前圖層的子圖層是什么，然后根據(jù)父級(jí)圖層返回上一圖層，根據(jù)子級(jí)圖層進(jìn)入下一個(gè)圖層，如果當(dāng)前圖層沒有父級(jí)圖層或子級(jí)圖層則不進(jìn)行跳轉(zhuǎn)，留在當(dāng)前圖層，還可以指定雙擊圖標(biāo)時(shí)彈出一個(gè)窗口顯示當(dāng)前圖標(biāo)的信息，當(dāng)雙擊圖層的空白處時(shí)就會(huì)返回上一圖層頁面。
[0016]如圖1所示為本發(fā)明的方法流程圖，其具體實(shí)現(xiàn)步驟如下:
[0017](I)設(shè)置flex圖表的頂層；
[0018](2)創(chuàng)建新的圖層用于顯示flex信息；
[0019](3)設(shè)置flex頂層和子圖層的關(guān)系；
[0020](4)設(shè)置父級(jí)圖層和子級(jí)圖層的關(guān)系；
[0021](5)雙擊進(jìn)入下一圖層或者返回上一圖層；
[0022](6)顯示flex圖表信息。
[0023]通過本發(fā)明解決了在同一個(gè)flex頁面顯示多種類型flex圖表信息的問題，通過多層次布局，可以在同一個(gè)flex頁面顯示不同的flex圖表信息，通過雙擊不同位置的圖標(biāo)，可以進(jìn)入flex的下一層頁面，也可以返回flex的上一層頁面，無需跳轉(zhuǎn)到新的頁面顯示，方便用戶查看flex圖表信息。
[0024]此外，本發(fā)明還可以一個(gè)容器顯示一個(gè)flex圖層，當(dāng)有多個(gè)圖層是就要定義多個(gè)容器來顯示，不能對(duì)圖層進(jìn)行操作，還需要多個(gè)模塊來顯示flex圖表，當(dāng)flex圖表過多時(shí)要進(jìn)行過多的頁面跳轉(zhuǎn)，不利于用戶查看數(shù)據(jù)，降低用戶體驗(yàn)。
[0025]以上對(duì)本發(fā)明實(shí)施例所提供的一種基于flex多層次布局的方法進(jìn)行了詳細(xì)介紹，本文中應(yīng)用了具體個(gè)例對(duì)本發(fā)明的原理及實(shí)施方式進(jìn)行了闡述，以上實(shí)施例的說明只是用于幫助理解本發(fā)明的方法及其核心思想；同時(shí)，對(duì)于本領(lǐng)域的一般技術(shù)人員，依據(jù)本發(fā)明的思想，在【具體實(shí)施方式】及應(yīng)用范圍上均會(huì)有改變之處，綜上所述，本說明書內(nèi)容不應(yīng)理解為對(duì)本發(fā)明的限制。
【權(quán)利要求】
1.一種基于flex多層次布局的方法,其特征在于,包括: s1.設(shè)置flex圖表的頂層； s2.創(chuàng)建新的圖層用于顯示flex信息； S3.設(shè)置flex頂層和子圖層的關(guān)系； s4.設(shè)置父級(jí)圖層和子級(jí)圖層的關(guān)系； s5.雙擊進(jìn)入下一圖層或者返回上一圖層； s6.顯示flex圖表信息。
2.根據(jù)權(quán)利要求1所述的方法，其特征在于，還能夠給頂層設(shè)置一個(gè)ID及相關(guān)信息。
3.根據(jù)權(quán)利要求1所述的方法，其特征在于，創(chuàng)建新的圖層用于顯示子圖層的信息，將子圖層的父級(jí)引用指向頂層，這樣雙擊的時(shí)候就會(huì)根據(jù)圖層的子級(jí)進(jìn)入下一圖層，根據(jù)圖層的父級(jí)返回上一個(gè)圖層，能夠在同一個(gè)容器層顯示多個(gè)flex圖表信息。
4.根據(jù)權(quán)利要求3所述的方法，其特征在于，還能夠在子圖層創(chuàng)建屬于自己的子圖層，將屬于自己的子圖層的父級(jí)引用指向自己，在同一個(gè)容器層創(chuàng)建多個(gè)子圖層，層層進(jìn)行調(diào)用。
5.根據(jù)權(quán)利要求1或3或4所述的方法，其特征在于，當(dāng)觸發(fā)“雙擊”事件時(shí)，首先會(huì)獲取當(dāng)前圖層的信息，判斷當(dāng)前圖層是屬于哪一個(gè)圖層，當(dāng)前圖層的父級(jí)圖層是什么，當(dāng)前圖層的子圖層是什么，然后根據(jù)父級(jí)圖層返回上一圖層，根據(jù)子級(jí)圖層進(jìn)入下一個(gè)圖層；如果當(dāng)前圖層沒有父級(jí)圖層或子級(jí)圖層則不進(jìn)行跳轉(zhuǎn)，留在當(dāng)前圖層。
6.根據(jù)權(quán)利要求5所述的方法，其特征在于，還能夠指定雙擊圖標(biāo)時(shí)彈出一個(gè)窗口顯示當(dāng)前圖標(biāo)的信息，當(dāng)雙擊圖層的空白處時(shí)就會(huì)返回上一圖層頁面。
7.根據(jù)權(quán)利要求1所述的方法，其特征在于，本發(fā)明還能夠一個(gè)容器顯示一個(gè)flex圖層，當(dāng)有多個(gè)圖層是就要定義多個(gè)容器來顯示，不能對(duì)圖層進(jìn)行操作，還需要多個(gè)模塊來顯示flex圖表，當(dāng)flex圖表過多時(shí)要進(jìn)行過多的頁面跳轉(zhuǎn)，但不利于用戶查看數(shù)據(jù)，降低用戶體驗(yàn)。
【文檔編號(hào)】G06F9/44GK104281454SQ201410515376
【公開日】2015年1月14日 申請(qǐng)日期:2014年9月29日 優(yōu)先權(quán)日:2014年9月29日
【發(fā)明者】楊育斌, 古奕奎 申請(qǐng)人:藍(lán)盾信息安全技術(shù)股份有限公司