DWZ查询页面布局改造

江南才子

　　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