填報動態隱藏列

1.1 問題描述

在設計填報報表時，某些資訊需要根據其他資訊的結果來決定是否展示。

例如當獲得過榮譽資訊時，才展示榮譽列表，有工作經驗時，才展示工作經驗列表，效果如下圖所示：

1.2 解決思路

利用 JavaScript 事件，動態展示或隱藏對應的行。

2.1 儲存格設計

儲存格設計如下所示：

2.2 元件設定

按住 CTRL 鍵，選中 C3、C4 儲存格，設定資料字典，如下圖所示：

2.3 新增狀態改變事件

C3 儲存格元件新增狀態改變事件，程式碼如下：

if(this.getValue()=="是"){
	$("tr[tridx=4],tr[tridx=5],tr[tridx=6]").css("display","");
	}else{
		$("tr[tridx=4],tr[tridx=5],tr[tridx=6]").css("display","none");
		}

C4 儲存格元件新增狀態改變事件，程式碼如下：

if(this.getValue()=="是"){
	$("tr[tridx=7],tr[tridx=8],tr[tridx=9]").css("display","");
	}else{
		$("tr[tridx=7],tr[tridx=8],tr[tridx=9]").css("display","none");
		}

2.4 預覽效果

點選儲存，PC端使用填報預覽開啟，效果如下圖所示：

注：不支援行動端。

點選下載範本：填报动态隐藏行.cpt