DWZ（三）：常用组件了解

上篇博客中已经介绍了DWZ一些UI组件的使用，接下来再给大家介绍一些。仅供参考。具体使用还需要在自己的项目中对应。

 

     CSS Table

     原生 html + CSS 实现，无 js 处理效果、最简单、最基本、性能最高的 table。

     在 table 标签上增加 class="list", table 外面包一个<div layoutH="xx">实现 table 固定高度

 

 

 

     Table 扩展

     在 table 标签上增加 class="table"

<table layoutH="170" class="table">

<thead>

<tr>

<th width="80">客户号</th>

<th width="100">客户名称</th>

<th align="right">证件号码</th>

<th width="100">建档日期</th>

</tr>

</thead>

<tbody>

<tr>

<td>iso127309</td>

<td>北京市政府</td>

<td>0-0001027766351528</td>

<td>2009-05-21</td>

</tr>

</tbody>

</table>

 

     在线编辑器

     在 textarea 标签上增加 class="editor"

     示例:

    <textarea class="editor" name="description" rows="15" cols="80">内容</textarea>

 

    分页组件

    分页思路服务器返回当前页的数据，总条数，再由 js 来生成分页标签。分页是配合服务器端来处理的, 不是存 js 做的分页。因为如果数据量很大，比如有好几百页，存 js 分页就是悲剧了，存 js 分页是必须一次载入所有数据，性能很慢。

    分页组件参数要由服务器传过来 targetType，totalCount，numPerPage，pageNumShown，currentPage

    框架会自动把下面的 form 中 pageNum 修改后，ajax 重新发请求。下面这个 form 是用来存查询条件的

<form id="pagerForm" action="xxx" method="post">

    <input type="hidden" name="pageNum" value="1" />/><!--【必须】value=1可以写死-->

    <input type="hidden" name="numPerPage" value="20" /><!--【可选】每页显示多少条-->

    <input type="hidden" name="orderField" value="xxx" /><!--【可选】查询排序-->

    <input type="hidden" name="orderDirection" value="asc" /><!--【可选】升序降序-->

    <!--【可选】其它查询条件，业务有关，有什么查询条件就加什么参数。也可以在searchForm上设置属性rel=”pagerForm”，js框架会自动把searchForm搜索条件复制到pagerForm中 -->

    <input type="hidden" name="name" value="xxx" />

    <input type="hidden" name="status" value="active" />

</form>

    分页组件处理分页流程：

    1) pagerForm 中缓存了当前的查询条件，加上一个 pageNum 字段

    2) 点击分页时动态修改 pageNum,重新提交 pagerForm

    分页组件使用方法：

    <div class="pagination" targetType="navTab" totalCount="200" numPerPage="20" pageNumShown="10"

currentPage="1"></div>

 

    Panel 扩展

    <div class="panel [close collapse]" [defH="200"|minH=”100”]>

        <h1>标题</h1>

        <div>

            内容

        </div>

    </div>

    顶层 div 以 class=”panel”标识即可, 其中的<h1>为 panel 的标题, <h1>后的<div>则是放置内容的容器.Class 中的 close 与 collapse 为可选项, close 表示 panel 默认为关闭状态, 没有则默认为打开状态. collapse 再表示此panel 是否为可折叠的 panel, 没有则此 panel 不可折叠. 扩展属性 defH 则表示 panel 内容部分的固定高度, 没有则panel 内容部分的高度为实际内容的高度, minH 可以指定 panel 内容部分的最小高度。