DWZ查询页面布局改造

灰太狼 2021-05-10 11:18 405阅读 0赞

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再现  
![这里写图片描述][20150514104138959]  
窗口足够大的时候，正常。

![这里写图片描述][20150514104212936]  
缩小窗口宽度后，一部分查询条件不见了。

使用firebug看的话，会发现  
![这里写图片描述][20150514104227990]

注意红色标出的部分被隐藏在上一层内容下面，导致“肉眼”无法看到了，哈哈。

改造的部分代码如下

<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>

看页面效果：  
![这里写图片描述][20150514104506068]

宽度足够大的时候，没有问题，继续缩小测试  
![这里写图片描述][20150514104337847]

出现了滚动条，基本上保证了条件显示，但是，条件的部分导语不见了。  
![这里写图片描述][20150514104732817]  
商品名称的查询条件被隐藏了。

为什么这样子呢？因为有标签label在缩小的时候被挤占了，那么去掉label标签看看如何。

代码改造：

先来看看窗口缩小后的效果：  
![这里写图片描述][20150514104957648]

出现了滚动条，页面查询条件内容都存在了。但是如果查询条件是单行的时候，我们来看看效果图：  
![这里写图片描述][20150514105023294]

红色标出的，有下拉框的部分，成了上下对齐格式，这不符合我们的要求！我们要水平对齐。

改造的部分代码：

效果图  
![这里写图片描述][20150514104922545]

再次恢复到双行，我们来看一下效果：  
![这里写图片描述][20150514105428168]

发现红色标出的内容上下没有对齐，为了追求完美，我们继续改造，在商品名称上也加上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>

再来看效果：  
![这里写图片描述][20150514104940734]

再缩小一些：  
![这里写图片描述][20150514105320620]

发现红色标出的内容又不见了， 我暂时没有想到好的办法解决掉这个麻烦，小伙伴可有方法，请告知。

**总结**：一个小小的布局，都需要不断的调试才能做到最优。对于这个问题解决的办法就是：

*  ul标签需要替换为table标签
 *  有combo的地方，文字说明需要加上标签label
 *  有textinput的地方，文字说明不要加标签label

[20150514104138959]: /images/20210506/83b1869ac06740d3a137b92e31adb6d6.png
[20150514104212936]: /images/20210506/94d715f82ffc43699885e4a3295038d2.png
[20150514104227990]: /images/20210506/8fde684972144fef8f05c129189ae801.png
[20150514104506068]: /images/20210506/184ec2fa922642bfb29194a10a5c5682.png
[20150514104337847]: /images/20210506/f7e3f532b1ad4defbb1754e16c4840f7.png
[20150514104732817]: /images/20210506/a6ccef9e06a64eba947418536b2c47de.png
[20150514104957648]: /images/20210506/fdbebbd9121d4691ab4bb70d7403e040.png
[20150514105023294]: /images/20210506/0d167d6b99154ce29ab2367bf89f34c9.png
[20150514104922545]: /images/20210506/f9deb37faa1d47409a0a391e91ae9a85.png
[20150514105428168]: /images/20210506/0d1b9fdcb65c4d1d9cbb766926e23712.png
[20150514104940734]: /images/20210506/8656eeb376ef4ae3b6344d1fb52a1077.png
[20150514105320620]: /images/20210506/8382968268b24629a960e397a574d664.png