碼上快樂

相關內容    簡體    繁體

帆軟報表之 超級鏈接-3

本文轉載自   查看原文   2022-01-05 15:37   3994    帆軟
超級鏈接解決Internet腳本運行慢示例
1. 描述
當頁面上填報控件非常多的時候，可能會比較慢，出現“Internet腳本運行慢示例”。
此章節我們以一個示例介紹如何使用超級鏈接解決頁面控件太多導致卡的問題，我們要做到效果是，點擊某個值將對應的值傳遞到填報模板中進行填報，如下圖：
0
2. 示例
由於超級鏈接到的是填報模板，因此我們需要將子報表中定義成填報表，然后設置主報表的超級鏈接是以填報的方式打開子報表的。
2.1 子模板設置
打開模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\DetailReport\數據顯示格式.cpt。
1）控件設置
批量選中A2-H2，設置控件類型為文本型，設置完效果如下圖：
0
2）增加參數
點擊菜單模板>模板參數，增加一個參數名為orderID的參數，並設置默認值為整形的10001。
給A2增加訂單ID等於參數$orderID的過濾條件。
最后給報表設置 報表填報屬性，在此就不多做介紹。
3）保存模板
保存模板。已完成模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\SpecialSubject\HyplinkReport\超級鏈接解決Internet腳本運行慢示例子報表.cpt。
2.2 主模板設置
打開模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\數據鑽取主報表.cpt。
將超級鏈接的模板修改成剛剛建立的超級鏈接解決Internet腳本運行慢示例子報表.cpt，並設置是以填報方式訪問，將參數的名稱修改為子模板定義的報表參數即orderID，具體的設置如下圖：
0
保存模板
已完成模板可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\SpecialSubject\HyplinkReport\超級鏈接解決Internet腳本運行慢示例主報表.cpt。
2.3 效果查看
分頁預覽主模板，如果想修改某個值，只需點擊超級鏈接到子模板進行修改，這樣減少了大量控件，大大提高了報表的效率。
報表和圖表聯動
1. 描述
點擊超鏈接的值，直接傳給圖表，只刷新圖表部分，而不是全部頁面都刷新。
0
2. 原理
通過超級鏈接圖表超鏈-聯動懸浮元素方法將報表中的數據傳遞給圖表，或通過超級鏈接-動態參數方法將報表的數據傳遞給圖表的數據集，從而實現報表和圖表之間的聯動。
3. 示例
3.1 打開報表
以報表%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\Chart\懸浮元素圖表.cpt為例，在此基礎上設計報表和圖表聯動。
3.2 圖表數據集
1）定義圖表數據集ds2
獲取超級鏈接選中地區的值，查詢地區內銷售員銷量情況，sql語句：SELECT * FROM 銷量 where 1=1 ${if(len(地區) == 0,"","and 地區 = '" + 地區 + "'")}。
2）修改圖表數據集
選中圖表，在圖表屬性表中選擇圖表屬性表-數據，選擇數據集ds2，分類軸：銷售員，系列名稱使用選擇字段名作為圖例項(系列)名稱，字段名選擇銷量。
3.3 超級鏈接設置
點擊地區A2單元格，右擊選擇超級鏈接，點擊
0
，選擇圖表超鏈-聯動懸浮元素，設置如下：
方法一：通過超級鏈接圖表超鏈-聯動懸浮元素方法實現聯動
添加圖表超鏈-聯動懸浮元素1，選擇懸浮元素，添加參數地區，值選擇公式輸入：$$$，如下圖：
0
 
如果圖表的數據集是單元格數據集，則添加圖表超鏈-聯動單元格。
注：下拉框選擇懸浮元素時，如果模板中懸浮元素過多，則需要知道懸浮元素的名稱，可以通過右擊懸浮圖表，選擇設置懸浮元素名稱，則可自定義懸浮元素名稱。
方法二：通過超級鏈接-動態參數實現聯動
添加動態參數，添加參數地區，值選擇公式輸入：$$$，如下圖：
0
 
注：動態參數是將參數值直接傳遞給數據集，改變圖表數據集的結果，以實現報表和圖表的聯動。同樣要實現圖表聯動報表也可使用動態參數來實現。
3.4 預覽與保存
保存模板，點擊分頁預覽，即可看到效果。
已完成模板可參考%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\SpecialSubject\HyplinkReport\報表-圖表聯動.cpt。
在線查看示例效果請點擊 報表-圖表聯動.cpt。
 
動態顯示圖表系列或分類軸
1. 描述
上一節中介紹了報表跟圖表的聯動，即點擊報表中的數據讓圖表的分類軸數據或系列值跟着變化，那么如果點擊報表數據列的名稱，使圖表的系列名稱或者分類軸動態變化又該如何實現呢 ，效果如下：
0
2. 思路
動態顯示圖表的系列名稱和分類軸，那么該圖表只能使用單元格數據集，只需要讓單元格動態顯示數據列就行，在 ds1.select()和ds1.group()函數的使用章節中有介紹到ds1.group()這個方法來獲取數據集中的數據列，我們這里將數據列名稱以動態參數的形式傳遞到該函數中，使數據列的數據動態顯示在單元格中，然后圖表數據源就來自於該動態變化的單元格。
3. 示例
3.1 新建數據集
新建一張空白模板，添加數據集ds1：SELECT * FROM 銷量。
3.2 模板設計
1）動態數據列的實現
新增一個col的模板參數，默認值為：“銷售員”，標題單元格B1直接使用公式=$col，動態數據列值所在單元格B2輸入使用公式=ds1.group($col,,true)，報表主體設計如下圖：
0
 
注：B2單元格為圖表的系列名稱（動態變化），父格為A2，A2單元格是顯示圖表的分類軸數據，C2單元格為圖表的系列值，對銷量進行求和，根據B2單元格的變化而變化（動態變化）。
另：ds1.group($col,,true)公式的意思是，獲取ds1數據集中col參數值數據列的所有值，並合並所有相同項，注意中間有一個空白的條件，需要兩個逗號。
2）圖表設計
合並動態列下方的一片單元格，插入圖表，圖表類型為柱形圖，圖表數據源為單元格數據源，分類軸為A2，系列名為B2，系列值為C2，如下圖：
0
3）動態參數
在圖表上方，動態列下方插入一行，輸入各數據列的名稱（即需要動態展現的數據列的名稱），整個報表設計如下圖：
0
選中所有數據列名稱的單元格，即A3到C3單元格，右鍵，選擇超級鏈接，點擊
0
按鈕，增加一個名為col的動態參數，如下圖：
0
注：該動態參數的意義為：點擊該超級鏈接時，就將當前被點擊的單元格的值傳遞給參數col，參數col是動態列中使用的到的參數，因此動態列所在單元格就會顯示被點擊數據列的值，圖表也就隨着變化。
隱藏動態列所在的第一行和第二行，模板便完成了。
3.3 效果查看
保存該模板，點擊分頁預覽，即可查看上面所展示的效果。
注：如果要動態展示分類軸，只需要將圖表的分類軸數據源設置為動態列中動態變化的一列即可，同上。
已完成模板可參照：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\SpecialSubject\HyplinkReport\動態顯示圖表系列.cpt
在線查看示例效果請點擊 動態顯示圖表系列.cpt
  鼠標懸浮/點擊/離開超級鏈接時改變顏色
1. 描述
在使用超級鏈接的時候，希望實現鼠標移至超級鏈接，該超級鏈接就改變字體顏色，以便區分當前選中的是哪個超級鏈接，提升用戶體驗，如下圖所示：
0
2. 思路
當模板加載完成之后，我們給它添加一個加載結束事件，用jQuery在事件中獲取到超級鏈接單元格對象，然后添加鼠標滑過事件，鼠標放到該對象上的時候就改變字體顏色，離開時就恢復原來的顏色。
3. 操作步驟
我們以模板 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\SpecialSubject\HyplinkReport\超級鏈接解決Internet腳本運行慢示例主報表.cpt 為例，實現當鼠標移至超級鏈接的時候改變顏色。
3.1 添加加載結束后事件
方法一：
打開模板，點擊 模板>模板web屬性>分頁預覽設置 ，設置為為該模板單獨設置，在下方添加一個加載結束后事件，如下圖：
0
添加加載結束事件之后，在js輸入框中輸入如下所示語句：
  1. $("span.linkspan div").bind("mouseover",function(){  
  2. $(this).css("color","red");  
  3. }).bind("mouseleave",function(){  
  4. $(this).css("color","blue");  
  5. })  
方法二：
添加加載結束事件之后，在js輸入框中輸入如下所示語句：
  1. $('.linkspan').mouseover(function(){$(this).css('color','red');}); //鼠標移上   
  2. $('.linkspan').mouseleave(function(){$(this).css('color','blue');}); //鼠標離開   
  3. $('.linkspan').mousedown(function(){$(this).css('color','gray');}); //鼠標點擊   
3.2 效果查看
點擊分頁預覽，將鼠標移至超級鏈接上的時候就能實現如上圖所示的效果。
模板保存在 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\SpecialSubject\HyplinkReport\超級鏈接顏色變化.cpt
在線查看模板效果請點擊 超級鏈接顏色變化.cpt
關鍵字：鼠標懸浮/點擊/離開超鏈時改變顏色
根據超級鏈接的內容跳轉不同頁面
1. 描述
有時候同一個超鏈接節點下，經常會需要根據不同的需求自動判斷並分別進行頁面鏈接跳轉。
例如：點擊超鏈接A，當A的值>50時，跳轉為http://www.baidu.com
2. 示例
2.1 模板設計
在B2單元格輸入公式： =RAND()*(100-1)+1 ，目的是為了在0-100中隨機取數。
報表主體設計如下圖：
0
2.2 條件屬性設置
選中B2單元格，點擊 右鍵>條件屬性 ，點擊左上角 “+”，添加一個條件屬性，並點擊右側屬性處“+”，選取“超級鏈接”，進入超級鏈接屬性設置頁面，在公式處輸入判斷條件 $$$>50  ($$$，代表當前值)，如下圖所示：
0
設置完成后，勾選超級鏈接右側“使用鏈接”選框，點擊編輯，進入詳細超級鏈接設置界面，如下圖所示：
注：此處的URL必須包含http協議，否則會報404錯誤。
0
注：需要在超鏈接中進行參數傳遞時，在參數欄，加入需要傳遞的參數，即可實現動態條件判斷超級鏈接並攜帶參數傳遞。
2.3 效果查看
預覽報表，點擊隨機生成的數字，即可查看到如下效果：
0
 
根據(不同)內容超鏈接到不同網址
1. 描述
當表中某字段保存的是網頁地址，如何實現點擊單元格彈出一個對話框顯示該網頁，如圖一：
0
超級鏈接的URL格式固定，但其中的某（多個）值不同。如何通過點擊單元格替換對應的URL值打開對應的頁面呢…？如圖二：
0
2. 示例（一）
准備數據集Embedded1，如下：
0
將數據集字段拖入單元格中：
0
選中A1、B1單元格，右鍵選擇超級鏈接，添加JavaScript，在參數欄添加兩個參數title、url，參數值分別為公式A1、B1，並添加下面的JavaScript代碼：
0
 
  1. var iframe = $("); // 對話框內iframe參數的命名，默認寬高占比是100%，可向下滾動    
  2. iframe.attr("src", url); // 給iframe添加src屬性  
  3. var o = {    
  4. width : 960,  //對話框寬度  
  5. height: 550  //對話框高度  
  6. };    
  7. FR.showDialog(title, o.width, o.height, iframe,o);//彈出對話框  
保存模板，點擊分頁預覽即可看到上面的效果。
另提供一種更簡潔的方法：
直接在B1單元格設置超級連接，添加參數a:
0
傳遞當前URL使用 window.open 以新頁面方式打開URL。
 
3. 示例（二）
另一種情況：超鏈的URL格式統一，但某個值不同。通過在URL后面直接傳參，不好實現。
如圖：[URL]格式一樣，但[主頁ID]值不同。
0
 
1）准備數據集：
0
2）選中A2，右鍵選擇[超級鏈接]，添加[JavaScript]，在參數欄添加參數[p_name]，參數值為公式[B2]，並添加下面的JavaScript代碼：
0
 
  1. window.open('http://bbs.fanruan.com/home.php?mod=space&uid='+p_name+'&do=profile','_blank');  
保存模板，點擊分頁預覽即可看到上面的效果。
注：url格式-http://www.baidu.com;不要少了http://
 
鼠標懸浮/點擊/離開超級鏈接時改變顏色
1. 描述
在使用超級鏈接的時候，希望實現鼠標移至超級鏈接，該超級鏈接就改變字體顏色，以便區分當前選中的是哪個超級鏈接，提升用戶體驗，如下圖所示：
0
2. 思路
當模板加載完成之后，我們給它添加一個加載結束事件，用jQuery在事件中獲取到超級鏈接單元格對象，然后添加鼠標滑過事件，鼠標放到該對象上的時候就改變字體顏色，離開時就恢復原來的顏色。
3. 操作步驟
我們以模板 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\SpecialSubject\HyplinkReport\超級鏈接解決Internet腳本運行慢示例主報表.cpt 為例，實現當鼠標移至超級鏈接的時候改變顏色。
3.1 添加加載結束后事件
方法一：
打開模板，點擊 模板>模板web屬性>分頁預覽設置 ，設置為為該模板單獨設置，在下方添加一個加載結束后事件，如下圖：
0
添加加載結束事件之后，在js輸入框中輸入如下所示語句：
  1. $("span.linkspan div").bind("mouseover",function(){  
  2. $(this).css("color","red");  
  3. }).bind("mouseleave",function(){  
  4. $(this).css("color","blue");  
  5. })  
方法二：
添加加載結束事件之后，在js輸入框中輸入如下所示語句：
  1. $('.linkspan').mouseover(function(){$(this).css('color','red');}); //鼠標移上   
  2. $('.linkspan').mouseleave(function(){$(this).css('color','blue');}); //鼠標離開   
  3. $('.linkspan').mousedown(function(){$(this).css('color','gray');}); //鼠標點擊   
3.2 效果查看
點擊分頁預覽，將鼠標移至超級鏈接上的時候就能實現如上圖所示的效果。
模板保存在 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\SpecialSubject\HyplinkReport\超級鏈接顏色變化.cpt
在線查看模板效果請點擊 超級鏈接顏色變化.cpt
關鍵字：鼠標懸浮/點擊/離開超鏈時改變顏色
 
點擊單元格空白處可實現超級鏈接
1. 描述
給單元格添加超級鏈接后，預覽時必須將鼠標放在單元格的文字上超級鏈接才會生效（即點擊可跳轉或傳遞動態參數）。當單元格較大時，文字內容較小或較少時，鼠標無法快速的點擊到單元格內容。
0
2. 解決方案
將設置了超級鏈接的單元格以圖片的方式顯示內容，即可實現點擊單元格的空白處也能實現超級鏈接的效果。
在單元格的其他屬性中，將顯示內容設置為用圖片顯示內容，設置如下：
0
保存模板后預覽效果如下：
0
 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 帆軟報表之 超級鏈接-2 帆軟報表之 超級鏈接-1 帆軟基礎之超級鏈接 帆軟報表參數 帆軟報表之 動態報表 帆軟報表之 排序（總結） 一 帆軟報表之 排序（總結） 二 帆軟報表之 工作目錄 帆軟報表之 控件示例 -2 帆軟報表之 控件示例 -5
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM