DWX框架的HTML扩展(2)

2018-11-23 14:48 更新

4. Tab组件扩展

开发人员不需写任何javacsript,只要使用下面的html结构就可以.

<div class="tabs">
    <div class="tabsHeader">
       <div class="tabsHeaderContent">
           <ul>
              <li class="selected"><a href="#"><span>标题1</span></a></li>
              <li><a href="#"><span>标题2</span></a></li>
           </ul>
       </div>
    </div>
    <div class="tabsContent"style="height:150px;">
       <div>内容1</div>
       <div>内容2</div>
    </div>
    <div class="tabsFooter">
       <div class="tabsFooterContent"></div>
    </div>
</div>
Accordion组件


<div class="accordion"[fillSpace=”xxxKey”]>
    <div class="accordionHeader">
       <h2><span>icon</span>面板1</h2>
    </div>
    <div class="accordionContent"style="height:200px">
       内容1
    </div>
    <div class="accordionHeader">
       <h2><span>icon</span>面板2</h2>
    </div>
    <div class="accordionContent">
       内容2
    </div>
    <div class="accordionHeader">
       <h2><span>icon</span>面板3</h2>
    </div>
    <div class="accordionContent">
       内容3
    </div>
</div>

4.1 容器高度自适应

容器高度自适应, 只要增加扩展属性layoutH=”xx”, 单位是像素.
LayoutH表示容器内工具栏高度. 浏览器窗口大小改变时容器高度自适应, 但容器内工具栏高度是固定的, 需要告诉js工具栏高度来计算出内容的高度.
示例:
<div class=”layoutBox”>
<div layoutH=“150”>内容</div>
</div>

注意： layoutH=“150”的高度是根据含有class=”layoutBox”的父容器div动态更新的

4.2 CSS Table

原生html + CSS实现，无js处理效果、最简单、最基本、性能最高的table。
在table标签上增加class="list", table外面包一个<div layoutH="xx">实现table固定高度

<div layoutH="120">
<table class="list" width="98%">
    <thead>
       <tr>
           <th colspan="2">客户信息</th>
           <th colspan="2">基本信息</th>
           <th colspan="3">资料信息</th>
       </tr>
       <tr>
           <th width="80">客户号</th>
           <th width="100">客户名称</th>
           <th width="100">客户划分</th>
           <th>证件号码</th>
           <th align="right" width="100">信用等级</th>
           <th width="100">企业性质</th>
           <th width="100">建档日期</th>
       </tr>
    </thead>
<tbody>
       <tr>
           <td>iso127309</td>
           <td>北京市政府咿呀哟</td>
           <td>政府单位</td>
           <td>0-0001027766351528</td>
           <td>四等级</td>
           <td>政府单位</td>
           <td>2009-05-21</td>
       </tr>
    </tbody>
</table>
</div>

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

5.1 在线编辑器
在textarea标签上增加class="editor"
示例:

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

5.2 分页组件

分页思路服务器返回当前页的数据，总条数，再由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" /><!--【可选】升序降序-->

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

分页组件处理分页流程：
1) pagerForm中缓存了当前的查询条件，加上一个pageNum字段
2) 点击分页时动态修改pageNum,重新提交pagerForm
分页组件使用方法：

<divclass="pagination" targetType="navTab"totalCount="200" numPerPage="20"pageNumShown="10" currentPage="1"></div>

测试方法，currentPage从1改为2，就是第2页了，把上面那句改为：

<divclass="pagination" targetType="navTab"totalCount="200" numPerPage="20"pageNumShown="10" currentPage="2"></div>

参数说明:

targetType: navTab或dialog，用来标记是navTab上的分页还是dialog上的分页
totalCount: 总条数
numPerPage: 每页显示多少条
pageNumShown: 页标数字多少个
currentPage: 当前是第几页

注意：
服务器端返回一个页面碎片，其中包括pagerForm, table, 和分页的div。只要把这个页面碎片组装好就行。

以上内容是否对您有帮助：