通過設置標簽class值控制標簽的顯示與隱藏

       

需求背景如下：

原項目居民、單位、計量三模塊共用一個jsp文件，顯示的頁面也順理成章的統一了，幸虧沒有調用同一個js，在此基礎上要求居民和單位計量的分離，即居民的顯示居民的相關信息，單位和計量的顯示相同的信息，時間久遠，僅有的未修改前的頁面截圖如下（紅框內字段已替換成紅字）：

        

需求分析：

（1）項目中添加字段並實現增刪改查功能   

（2）頁面的展示，居民顯示居民相關字段，單位和計量顯示單位相關字段

字段添加這里不再贅述，主要分析頁面的顯示

剛開始拿到這個需求，打算另外新建單位相關的jsp頁面（只包含單位相關字段），使得在居民模塊顯示居民的頁面，單位和計量顯示單位的頁面，但涉及jsp較多（包括增加、修改、復制增加、面積錄入、面積變更、面積信息變更、詳細信息等），且增加頁面后，相關js文件也需要和其匹配，改動量較大，於是采用另一種方法——使用class控制字段的顯示與隱藏，這樣的話，jsp文件和js文件數量不需要增加，只在相關頁面進行增加字段、設置class值和在js里調用方法就可以了。實現如下（以用戶增加頁面為例）：

1.仔細分析在哪個模塊哪些字段需要顯示和隱藏，做好基本排版

比如居民用戶增加時上圖基本信息中的單位名稱就需要隱藏，單位用戶增加時基本信息中的用戶相關的就不應該顯示了，需要顯示單位相關的，小區一欄也需要隱藏，轉而顯示添加的單位相關的賬號、開戶行等字段

2.為需要隱藏的字段設置class，這里注意有的字段需要在不同頁面顯示不同的名稱，但在數據庫里是同一個字段的，應該用同一個輸入框。（如圖中用戶編碼，在用戶增加界面名稱是‘用戶編碼’，在單位增加界面顯示‘單位編碼’，在數據庫用的是同一個字段—【yhbm】）

sf_user_add.jsp

共用一個字段

 <tr>
<!--hideForJlyh: 增加單位和計量用戶時需要隱藏的屬性   jmyhHidden: 增加居民用戶時需要隱藏的屬性   -->
<!-- 為居民時顯示用戶編碼，為單位和計量時顯示單位編碼      共用 yhbm 字段-->
<td  class="labelCss mustWrite hideForJlyh" >
　　 用戶編碼：
</td>
<td  class="labelCss mustWrite jmyhHidden" >
     單位編碼：
</td>
<td class="contentCss">
      <input type="text" id="yhbm" name="sfjmyh.yhbm"   value=""  onchange="checkYhbm(this.value);" 
　　　　　　　　class="easyui-validatebox" data-options="required:true"/>
</td>

互相占坑的

<!-- 用戶時顯示用戶名稱，單位時顯示單位名稱 -->                                
<tr>
<td class="labelCss mustWrite hideForJlyh" >
  用戶名稱：
</td>
<td class="contentCss hideForJlyh">
  <input type="text" id="yhmc" name="sfjmyh.yhmc"  class="easyui-validatebox" value=""   />
</td>
                                    
<td class="labelCss jmyhHidden">
   單位名稱：
</td>
<td class="contentCss jmyhHidden">
　　<input type="text" id="dwmc" name="sfjmyh.dwmc"  value="" />
</td>

<td class="labelCss mustWrite hideForJlyh">
 <!-- 添加計量功能時，由於要隱藏，故去掉必填屬性    required="true" -->    
　　小區：   
</td>
<td class="contentCss  hideForJlyh">
　　<select id="xq" name="sfjmyh.xq" class="easyui-validatebox" >
　　</select>
</td>
                                
<td class="labelCss jmyhHidden">
　　賬戶：
</td>
　　<td class="contentCss jmyhHidden">
　　<input type="text" id="zh" name="sfjmyh.zh"   value="" />
</td>

3.js方法控制字段隱藏與顯示

sf_user_info.js（居民頁面控制js）

function addUserInitSelect() { 
      comboboxInit("");  
    $('#rwrq').val(new Date().format("yyyy-MM-dd"));
    
    //結算方式那默認選擇面積結算，並且不可修改
    $('#jsfs').combobox('setValue','面積結算');
    
    //居民時隱藏
    $(".jmyhHidden").css("display","none");
    //設置用戶名稱為必填
    $("#yhmc").attr("required",true);
}

sf_unitUser_info.js（單位頁面控制js）

function addUserInitSelect() {
      comboboxInit("");
    $('#rwrq').val(new Date().format("yyyy-MM-dd"));
    
    //單位基礎信息增加時，隱藏小區字段，默認值為“單位待定”
    $('#xq').combobox('setValue','單位待定');
    //結算方式那默認選擇面積結算，並且不可修改
    //$("#jsfs").combobox('readonly',true); 
    $('#jsfs').combobox('setValue','面積結算');
    //計量和單位增加時隱藏
    $(".hideForJlyh").css("display","none");
}

 效果：

 

此方法存在以下幾個問題需要注意：

（1）字段排版設計較為費時，因為一個字段隱藏后，它原先占得位置將空出來，造成頁面的不美觀，解決方法是同一個位置最好設置兩個在不同模塊顯示的字段（如小區和賬戶）

（2）原先共用一個jsp，所以必填項在標簽內設置就可以了，但是隱藏字段后，如果該字段是必填項，將不能提交，所以必填項應在各自js里設置

（3）雖然開發時間減少，但對其他開發人員閱讀有影響，因為其他人不一定了解你的這個處理方法，所以要注意溝通好該處理方法，此外在代碼內寫詳細注釋

（4）項目中字段共用問題和新增字段，列出表格，發給一同開發的人員，如下

      

 xiaban...