DWZ富客户端框架框架-combox组件

2018-11-17 14:47 更新

combox组件

在传统的select 用class 定义:class=”combox”, html 扩展:保留原有属性name,  增加了属性:ref。
ref 属性则是为了做级联定义的,ref所指向的则是当前combox值改变成引起联动的下一级combox,ref用下一级combox的id属性来赋值。
注意:一般combox没必要设置id属性,只要级联时需要设置子级id等于父级ref,不同navTab和dialog中combox组件id必须唯一
以下是级联示例:
<select class="combox" name="province" ref="combox_city"refUrl="city.do?code={value}">
    <option value="all">所有省市</option>
    <option value="bj">北京</option>
    <option value="sh">上海</option>
</select>
<select class="combox" name="city" id="combox_city"ref="combox_area" refUrl=" area.do?code={value}">
    <option value="all">所有城市</option>
</select>
<select class="combox" name="area" id="combox_area">
    <option value="all">所有区县</option>
</select>

服务器端返回json格式:
[
    ["all", "所有城市"],
    ["bj", "北京市"]
]

suggest+lookup+主从结构

dwz.database.js主要功能是数据库操作相关的界面组件。主要分为2部分,分别是查找带回和主从结构。
  • 查找带回:lookup、suggest、lookup附件(文件上传带回)、多选查找带回multLookup几个jQuery插件,以及$.bringBack、$.bringBackSuggest两个配套查找带回工具方法
  • 主从结构:itemDetail

suggest+lookup+主从结构 请参照demo:界面组件 à 常用组件 à suggest+lookup+主从结构


查找带回


lookup、suggest都支持联动效果,比如类似选省份、城市联动效果。支持自定义查找带回主键lookupPk, 可选项默认为id。
 
lookup 通过复选框选择多个值查找回带示例:
请参照dwz-ria中 demo/database/ db_widge.html和demo/database/dwzOrgLookup2.html页面
<button type="button" multLookup="orgId" warn="请选择部门">选择带回</button>
 
<input type="checkbox" name="orgId" value="{id:'1', orgName:'技术部', orgNum:'1001'}"/>
<input type="checkbox" name="orgId" value="{id:'2', orgName:'人事部', orgNum:'1002'}"/>
<input type="checkbox" name="orgId" value="{id:'3', orgName:'销售部', orgNum:'1003'}"/>

主从结构

针对主表和从表的数据库结构设计,实现主从结构复合表单,动态添加、删除从表字段。
请参照dwz-ria中 demo/database/ db_widge.html
<table class="list nowrapitemDetail" addButton="新建从表1条目" width="100%">
<thead>
<tr>
    <th type="text" name="items.itemString" size="12" fieldClass="required">从字符串</th>
    <th type="text" name="items.itemInt" size="12" fieldClass="digits">从整数</th>
    <th type="text" name="items.itemFloat" size="12" fieldClass="number">从浮点</th>
    <th type="date" name="items.itemDate" size="12">从日期</th>
    <th type="date" format="yyyy-MM-dd HH:mm:ss" name="items.itemDataTime" size="16">从日期时间</th>
    <th type="lookup" name="dwz.items.org.orgName" lookupGroup="items.org" lookupUrl="xxxUrl" suggestUrl="xxxUrl" suggestFields="orgName"size="12">部门名称</th>
    <th type="enum" name="items.itemEnum" enumUrl="xxxUrl" size="12">从枚举</th>
    <th type="attach" name="dwz.items.attachment.fileName" lookupGroup="items.attachment" lookupUrl="xxxUrl" size="12">从附件</th>
    <th type="del" width="60">操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
<table>标签中class=”itemDetail” 必须用于关联主从结构js效果。addButton=”xxx”可选默认为”Add New”用来定义添加从表按钮的文字。 
  • <th>标签中:type必填项,type类型有text、date、lookup、enum、attach、del
  • name必填项,定义子表字段名称
  • size可选项,默认size=”12”,定义从表input字段的长度
  • fieldClass可选项,用来定义表input字段的class
  • lookupGroup当type=”lookup” 或type=”attach”时必填
  • lookupUrl当type=”lookup”时lookupUrl和suggesUrl至少填一项,当type=”attach”时必填
  • suggestUrl当type=”lookup”时lookupUrl和suggesUrl至少填一项
  • suggestFields当type=”lookup”并且有suggestUrl时必填
  • enumUrl当type=”enum”时必填
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号