DWX框架的HTML扩展(2)

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" /><!--【可选】升序降序-->
    <!--【可选】其它查询条件,业务有关,有什么查询条件就加什么参数。
    也可以在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
分页组件使用方法:
<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。只要把这个页面碎片组装好就行。
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部