DWZ查询页面布局改造

简介: 版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/45717613 DWZ查询页面布局改造,dwz的页面查询条件部分如果使用标签ul、li进行布局的话,在页面分辨率较小时,或者窗口缩小时,就会隐藏部分查询条件,为了防止这种情况出现,就需要改造成table来实现,但是可能不会轻而易举的完成,那么就随我来看看吧。
版权声明:欢迎转载,请注明沉默王二原创。 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
相关文章
|
6月前
|
前端开发 数据格式
jeecgboot前端antd Table组件动态合并单元格
jeecgboot前端antd Table组件动态合并单元格
196 0
|
JavaScript
【Vue3从零开始-实战】S16:详情页样式优化及tab栏内容联动功能实现
【Vue3从零开始-实战】S16:详情页样式优化及tab栏内容联动功能实现
187 0
【Vue3从零开始-实战】S16:详情页样式优化及tab栏内容联动功能实现
|
7月前
|
开发者
【 uniapp - 黑马优购 | 商品列表 】如何实现数据获取、结构渲染、自定义组件的封装
【 uniapp - 黑马优购 | 商品列表 】如何实现数据获取、结构渲染、自定义组件的封装
213 0
|
10月前
|
JSON PHP 数据格式
layui框架实战案例(1):layui组件table异步加载数据结合php后台动态翻页的解决方案
layui框架实战案例(1):layui组件table异步加载数据结合php后台动态翻页的解决方案
209 0
|
5月前
|
容器
会议OA项目-首页->flex弹性布局,轮播图后台数据获取及组件使用(后台数据交互mockjs),首页布局
会议OA项目-首页->flex弹性布局,轮播图后台数据获取及组件使用(后台数据交互mockjs),首页布局
37 0
|
10月前
|
前端开发 JavaScript 数据可视化
漏刻有时数据可视化大屏核心框架模版更换前端模版操作(1)HTML文件分离及访问显示
漏刻有时数据可视化大屏核心框架模版更换前端模版操作(1)HTML文件分离及访问显示
63 0
|
前端开发
给 Antd Table 组件编写缩进指引线、子节点懒加载等功能,如何二次封装开源组件?
在业务需求中,有时候我们需要基于 antd 之类的组件库定制很多功能,本文就以我自己遇到的业务需求为例,一步步实现和优化一个树状表格组件,这个组件会支持:
|
前端开发
前端项目实战102-postgrest下拉框搜索接口衍生
前端项目实战102-postgrest下拉框搜索接口衍生
58 0
|
前端开发
前端工作总结245-uni-修改其他页面整体样式
前端工作总结245-uni-修改其他页面整体样式
86 0
前端工作总结245-uni-修改其他页面整体样式
|
前端开发
前端工作小结71-修改首页布局样式
前端工作小结71-修改首页布局样式
71 0
前端工作小结71-修改首页布局样式