DWZ查詢頁面布局改造

版權聲明：歡迎轉載，請注明沉默王二原創。 https://blog.csdn.net/qing_gee/article/details/45717613

DWZ查詢頁面布局改造，dwz的頁面查詢條件部分如果使用标簽ul、li進行布局的話，在頁面分辨率較小時，或者視窗縮小時，就會隐藏部分查詢條件，為了防止這種情況出現，就需要改造成table來實作，但是可能不會輕而易舉的完成，那麼就随我來看看吧。

先來看看問題出現的原因：

部分代碼

<ul class="searchContent">
    <li>
     <label>商品代碼：</label>
     <input type="text" name="vscode" value="${vo.mo.vscode}" <c:if test="${vo.mo.codeflag == 1}">readonly</c:if> id="xiweidinghuohuizongListPage_vscode"/>
    </li>           

bug再現

視窗足夠大的時候，正常。

縮小視窗寬度後，一部分查詢條件不見了。

使用firebug看的話，會發現

注意紅色标出的部分被隐藏在上一層内容下面，導緻“肉眼”無法看到了，哈哈。

改造的部分代碼如下

<table class="searchContent">
    <tr>
     <td>
      <label>商品代碼：</label><input type="text" name="vscode" value="${vo.mo.vscode}" <c:if test="${vo.mo.codeflag == 1}">readonly</c:if> id="xiweidinghuohuizongListPage_vscode"/>
     </td>           

看頁面效果：

寬度足夠大的時候，沒有問題，繼續縮小測試

出現了滾動條，基本上保證了條件顯示，但是，條件的部分導語不見了。

商品名稱的查詢條件被隐藏了。

為什麼這樣子呢？因為有标簽label在縮小的時候被擠占了，那麼去掉label标簽看看如何。

代碼改造：

<table class="searchContent">
    <tr>
     <td>
      會員編号：
      <input type="text" name="vuid" value="${vo.mo.vuid}"/>
     </td>

     <td>
      交易類型：
      <select class="combox" name="vtype">           

先來看看視窗縮小後的效果：

出現了滾動條，頁面查詢條件内容都存在了。但是如果查詢條件是單行的時候，我們來看看效果圖：

紅色标出的，有下拉框的部分，成了上下對齊格式，這不符合我們的要求！我們要水準對齊。

改造的部分代碼：

<td>
      <label>交易類型：</label>
      <select class="combox" name="vtype">           

效果圖

再次恢複到雙行，我們來看一下效果：

發現紅色标出的内容上下沒有對齊，為了追求完美，我們繼續改造，在商品名稱上也加上label标簽。

部分代碼：

<td>
      <label>商品名稱：</label>
      <input type="text" name="vsname" value="${vo.mo.vsname}" <c:if test="${vo.mo.codeflag == 1}">readonly</c:if> id="xiweidinghuohuizongListPage_vsname"/>
     </td>
<td>
      <label>交易類型：</label>
      <select class="combox" name="vtype">
       <option value="-1" <c:if test="${vo.mo.vtype==-1}">selected="selected"</c:if>>全部</option>
       <option value="1" <c:if test="${vo.mo.vtype==1}">selected="selected"</c:if>>賣</option>
       <option value="0" <c:if test="${vo.mo.vtype==0}">selected="selected"</c:if>>買</option>
      </select>
     </td>
           

再來看效果：

再縮小一些：

發現紅色标出的内容又不見了， 我暫時沒有想到好的辦法解決掉這個麻煩，小夥伴可有方法，請告知。

總結：一個小小的布局，都需要不斷的調試才能做到最優。對于這個問題解決的辦法就是：

• ul标簽需要替換為table标簽
• 有combo的地方，文字說明需要加上标簽label
• 有textinput的地方，文字說明不要加标簽label