DWZ富客戶端框架框架-combox組件

2018-11-17 14:47 更新

combox組件

在傳統(tǒng)的select 用class 定義:class=”combox”, html 擴(kuò)展:保留原有屬性name,  增加了屬性:ref。
ref 屬性則是為了做級(jí)聯(lián)定義的,ref所指向的則是當(dāng)前combox值改變成引起聯(lián)動(dòng)的下一級(jí)combox,ref用下一級(jí)combox的id屬性來(lái)賦值。
注意:一般combox沒(méi)必要設(shè)置id屬性,只要級(jí)聯(lián)時(shí)需要設(shè)置子級(jí)id等于父級(jí)ref,不同navTab和dialog中combox組件id必須唯一
以下是級(jí)聯(lián)示例:
<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">所有區(qū)縣</option>
</select>

服務(wù)器端返回json格式:
[
    ["all", "所有城市"],
    ["bj", "北京市"]
]

suggest+lookup+主從結(jié)構(gòu)

dwz.database.js主要功能是數(shù)據(jù)庫(kù)操作相關(guān)的界面組件。主要分為2部分,分別是查找?guī)Щ睾椭鲝慕Y(jié)構(gòu)。
  • 查找?guī)Щ兀簂ookup、suggest、lookup附件(文件上傳帶回)、多選查找?guī)Щ豰ultLookup幾個(gè)jQuery插件,以及$.bringBack、$.bringBackSuggest兩個(gè)配套查找?guī)Щ毓ぞ叻椒?br />
  • 主從結(jié)構(gòu):itemDetail

suggest+lookup+主從結(jié)構(gòu) 請(qǐng)參照demo:界面組件 à 常用組件 à suggest+lookup+主從結(jié)構(gòu)


查找?guī)Щ?/strong>


lookup、suggest都支持聯(lián)動(dòng)效果,比如類似選省份、城市聯(lián)動(dòng)效果。支持自定義查找?guī)Щ刂麈IlookupPk, 可選項(xiàng)默認(rèn)為id。
 
lookup 通過(guò)復(fù)選框選擇多個(gè)值查找回帶示例:
請(qǐng)參照dwz-ria中 demo/database/ db_widge.html和demo/database/dwzOrgLookup2.html頁(yè)面
<button type="button" multLookup="orgId" warn="請(qǐng)選擇部門">選擇帶回</button>
 
<input type="checkbox" name="orgId" value="{id:'1', orgName:'技術(shù)部', orgNum:'1001'}"/>
<input type="checkbox" name="orgId" value="{id:'2', orgName:'人事部', orgNum:'1002'}"/>
<input type="checkbox" name="orgId" value="{id:'3', orgName:'銷售部', orgNum:'1003'}"/>

主從結(jié)構(gòu)

針對(duì)主表和從表的數(shù)據(jù)庫(kù)結(jié)構(gòu)設(shè)計(jì),實(shí)現(xiàn)主從結(jié)構(gòu)復(fù)合表單,動(dòng)態(tài)添加、刪除從表字段。
請(qǐng)參照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">從整數(shù)</th>
    <th type="text" name="items.itemFloat" size="12" fieldClass="number">從浮點(diǎn)</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">從日期時(shí)間</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>標(biāo)簽中class=”itemDetail” 必須用于關(guān)聯(lián)主從結(jié)構(gòu)js效果。addButton=”xxx”可選默認(rèn)為”Add New”用來(lái)定義添加從表按鈕的文字。 
  • <th>標(biāo)簽中:type必填項(xiàng),type類型有text、date、lookup、enum、attach、del
  • name必填項(xiàng),定義子表字段名稱
  • size可選項(xiàng),默認(rèn)size=”12”,定義從表input字段的長(zhǎng)度
  • fieldClass可選項(xiàng),用來(lái)定義表input字段的class
  • lookupGroup當(dāng)type=”lookup” 或type=”attach”時(shí)必填
  • lookupUrl當(dāng)type=”lookup”時(shí)lookupUrl和suggesUrl至少填一項(xiàng),當(dāng)type=”attach”時(shí)必填
  • suggestUrl當(dāng)type=”lookup”時(shí)lookupUrl和suggesUrl至少填一項(xiàng)
  • suggestFields當(dāng)type=”lookup”并且有suggestUrl時(shí)必填
  • enumUrl當(dāng)type=”enum”時(shí)必填
以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)