表单例一 · 全栈中心

## 表单例一 ![](https://box.kancloud.cn/5c7195b5a36bffa1a0655fe6c9cbdbfe_401x710.png) html ~~~ <body> <header class="rbk-titlebar"></header> <div class="rbk-content"> <div class="rbk-tab"> <div class="rbk-tabitem" text="检验单"> <form id="jyddemo" class="rbk-form"></form> <button class="rbk-btn" navurl='checkList.html'>查询</button> </div> <div class="rbk-tabitem" text="检查单"> <form id="jcddemo" class="rbk-form"></form> <button class="rbk-btn" navurl='checkList.html'>查询</button> </div> </div> </div> </body> ~~~ js ~~~ //表结构配置 //UI2.0新增配置 //hasImg（表单左侧有图标，可以是head、code、phone、password，其他待扩充）、 //hasBtn（右侧出现按钮，按钮内容为hasBtn的值） //hasCode（为true时，右侧出现扫码按钮，按钮事件需要自己加） var reportForm = { jydDemo:[{ id: 'username', labelName: '姓名', ctype: 'frmtxt', defValue: '', options: [], hasImg:"head" },{ id: 'userid', labelName: '条码', ctype: 'frmtxt', defValue: '', options: [], hasCode: true, hasImg:"code" },{ id: 'phone', labelName: '手机', ctype: 'frmtxt', defValue: '', options: [], hasImg:"phone" },{ id: 'yzm', labelName: '验证码', ctype: 'frmtxt', defValue: '', options: [], hasBtn: '发送验证码', hasImg:"password" }], jcdDemo:[{ id: 'username2', labelName: '姓名', ctype: 'frmtxt', defValue: '', options: [], hasImg:"head" },{ id: 'userid2', labelName: '条码', ctype: 'frmtxt', defValue: '', options: [], hasCode: true, hasImg:"code" }] } <script> rbk.ready(function(opt) { var titleBar = rbk.getCmp('titlebar'); titleBar.title('取报告单'); titleBar.canBack(true, true); var content = rbk.getCmp('content'); var tab = content.down("tab"); var jydform = content.down("form"); jydform.doLayout(reportForm.jydDemo); var jcdform = content.down("#jcddemo"); jcdform.doLayout(reportForm.jcdDemo); //为扫码按钮添加点击事件 var codeBtn = content.down("#userid").down("btn"); codeBtn.bindClick(function(){ rbk.platform.QRCodeScanning(function(m){ var form = codeBtn.up("frmtxt"); var t = m.code; form.setVal(t); }); }); var code1 = content.down("#userid2").down("btn"); code1.bindClick(function(){ rbk.platform.QRCodeScanning(function(m){ var form = code1.up("frmtxt"); var t = m.code; form.setVal(t); }); }); }); </script> ~~~ 说明：form表单由js动态构造。form元素有（既ctype的值）：frmlbl 数据展示；frmtxt 输入框；frmsel 下拉选择框；frmrdgrp 单选框radio组。 hasCode: true 显示扫码功能。