form
大约 5 分钟easyui
概述
案例
模板创建与动态创建
模板创建表单只要在 html 中写标签即可，如果 input 比较多，要格式化显示很多控件，通过 table 控制行列如下
<div id="editDialog" class="easyui-dialog" data-options="closed:true,left:0,top:0">
<form id="form_setBadQty" style="width: 100%;height: 100%;">
<div class="easyui-layout" data-options="fit:true">
<div id="west" data-options="region:'west',split:false" title="基础信息" style="width:500px;">
<div class="input-group">
<input type="hidden" id="iid" name="iid" >
<input type="hidden" id="product_plan_dtl_id" name="product_plan_dtl_id">
</div>
<table id="table01">
<tr>
<td><input class="easyui-textbox" id="plan_date" name="plan_date" data-options="label:'生产计划日期：', labelAlign:'right', readonly:true," style="width: 100%"></td>
<td><input class="easyui-textbox" id="order_code" name="order_code" data-options="label:'订单号：', labelAlign:'right', readonly:true," style="width: 100%"></td>
</tr>
<tr>
<td><input class="easyui-textbox" id="ct_name" name="ct_name" data-options="label:'客户：', labelAlign:'right', readonly:true," style="width: 100%"></td>
<td><input class="easyui-textbox" id="product_coded" name="product_coded" data-options="label:'存货编码：', labelAlign:'right', readonly:true," style="width: 100%"></td>
</tr>
<tr>
<td><input class="easyui-textbox" id="pf_name" name="pf_name" data-options="label:'存货名称：', labelAlign:'right', readonly:true," style="width: 100%"></td>
<td><input class="easyui-numberbox" id="qty_total" name="qty_total" data-options="onChange:function(e){
const val =
$('#qty_good').numberbox('setValue',);
},label:'过机数量：', labelAlign:'right', readonly:false," style="width: 100%"></td>
</tr>
<tr>
<td><input class="easyui-numberbox" id="qty_good" name="qty_good" data-options="label:'良品数：', labelAlign:'right', readonly:false," style="width: 100%"></td>
<td><input class="easyui-numberbox" id="qty_bad" name="qty_bad" data-options="label:'不良数：', labelAlign:'right', readonly:false," style="width: 100%"></td>
</tr>
</table>
</div>
<div data-options="region:'center',split:false" title="不良原因1">
<table id="table02">
<tr>
<td><input class="easyui-numberbox" id="bad01" name="bad01" data-options="onChange:function(e){ updateBadQty(e) },label:'bad01：', labelAlign:'right', readonly:false," style="width: 100%"></td>
<td><input class="easyui-numberbox" id="bad02" name="bad02" data-options="onChange:function(e){ updateBadQty(e) },label:'bad02：', labelAlign:'right', readonly:false," style="width: 100%"></td>
</tr>
<tr>
<td><input class="easyui-numberbox" id="bad03" name="bad03" data-options="onChange:function(e){ updateBadQty(e) },label:'bad03：', labelAlign:'right', readonly:false," style="width: 100%"></td>
<td><input class="easyui-numberbox" id="bad04" name="bad04" data-options="onChange:function(e){ updateBadQty(e) },label:'bad04：', labelAlign:'right', readonly:false," style="width: 100%"></td>
</tr>
<tr>
<td><input class="easyui-numberbox" id="bad05" name="bad05" data-options="onChange:function(e){ updateBadQty(e) },label:'bad05：', labelAlign:'right', readonly:false," style="width: 100%"></td>
<td><input class="easyui-numberbox" id="bad06" name="bad06" data-options="onChange:function(e){ updateBadQty(e) },label:'bad06：', labelAlign:'right', readonly:false," style="width: 100%"></td>
</tr>
<tr>
<td><input class="easyui-numberbox" id="bad07" name="bad07" data-options="onChange:function(e){ updateBadQty(e) },label:'bad07：', labelAlign:'right', readonly:false," style="width: 100%"></td>
<td><input class="easyui-numberbox" id="bad08" name="bad08" data-options="onChange:function(e){ updateBadQty(e) },label:'bad08：', labelAlign:'right', readonly:false," style="width: 100%"></td>
</tr>
<tr>
<td><input class="easyui-numberbox" id="bad09" name="bad09" data-options="onChange:function(e){ updateBadQty(e) },label:'bad09：', labelAlign:'right', readonly:false," style="width: 100%"></td>
<td><input class="easyui-numberbox" id="bad10" name="bad10" data-options="onChange:function(e){ updateBadQty(e) },label:'bad10：', labelAlign:'right', readonly:false," style="width: 100%"></td>
</tr>
<tr>
<td><input class="easyui-numberbox" id="bad11" name="bad11" data-options="onChange:function(e){ updateBadQty(e) },label:'bad11：', labelAlign:'right', readonly:false," style="width: 100%"></td>
<td><input class="easyui-numberbox" id="bad12" name="bad12" data-options="onChange:function(e){ updateBadQty(e) },label:'bad12：', labelAlign:'right', readonly:false," style="width: 100%"></td>
</tr>
</table>
</div>
<div data-options="region:'east',split:false" title="不良原因2" style="width:480px;">
<table id="table03">
<tr>
<td><input class="easyui-numberbox" id="bad13" name="bad13" data-options="onChange:function(e){ updateBadQty(e) },labelWidth:'100px',label:'bad13：', labelAlign:'right', readonly:false," style="width: 100%"></td>
<td><input class="easyui-numberbox" id="bad14" name="bad14" data-options="onChange:function(e){ updateBadQty(e) },labelWidth:'100px',label:'bad14：', labelAlign:'right', readonly:false," style="width: 100%"></td>
</tr>
<tr>
<td><input class="easyui-numberbox" id="bad15" name="bad15" data-options="onChange:function(e){ updateBadQty(e) },labelWidth:'100px',label:'bad15：', labelAlign:'right', readonly:false," style="width: 100%"></td>
<td><input class="easyui-numberbox" id="bad16" name="bad16" data-options="onChange:function(e){ updateBadQty(e) },labelWidth:'100px',label:'bad16：', labelAlign:'right', readonly:false," style="width: 100%"></td>
</tr>
<tr>
<td><input class="easyui-numberbox" id="bad17" name="bad17" data-options="onChange:function(e){ updateBadQty(e) },labelWidth:'100px',label:'bad17：', labelAlign:'right', readonly:false," style="width: 100%"></td>
<td><input class="easyui-numberbox" id="bad18" name="bad18" data-options="onChange:function(e){ updateBadQty(e) },labelWidth:'100px',label:'bad18：', labelAlign:'right', readonly:false," style="width: 100%"></td>
</tr>
<tr>
<td><input class="easyui-numberbox" id="bad19" name="bad19" data-options="onChange:function(e){ updateBadQty(e) },labelWidth:'100px',label:'bad19：', labelAlign:'right', readonly:false," style="width: 100%"></td>
<td><input class="easyui-numberbox" id="sales_price_withtax" name="sales_price_withtax" data-options="labelWidth:'100px',label:'含税销售单价：', labelAlign:'right', readonly:true," style="width: 100%"></td>
</tr>
<tr>
<td><input class="easyui-numberbox" id="bad_money" name="bad_money" data-options="labelWidth:'100px',label:'不良损失金额：', labelAlign:'right', readonly:true," style="width: 100%"></td>
</tr>
<tr>
<td><input class="easyui-textbox" id="bad_source_mill" name="bad_source_mill" data-options="labelWidth:'100px',label:'不良原因-厂家：', labelAlign:'right', readonly:false," style="width: 100%"></td>
<td><input class="easyui-textbox" id="bad_source_project" name="bad_source_project" data-options="labelWidth:'100px',label:'不良原因-工程内：', labelAlign:'right', readonly:false," style="width: 100%"></td>
</tr>
</table>
</div>
</div>
</form>
</div>
在 js 中动态创建时只要将上面的代码放在字符串模板中，代码如下。editDialog 是整个对话框的 id。即动态创建对话框。
let devEle = `把上面的代码贴进来`;
if ($('#editDialog').length <= 0) {
$(devEle).appendTo($('body'));
}
冲突
在为旭纸业制作质检录入页面时采用了上面的两种方法，使用模板方法时为 form 赋值出现问题，后来采用动态生成的方式，并且动态绑定 onChange 事件（通过遍历 bad 控件创建），此种方法会导致中间栏的 input 不显示宽度，之后修改为将 onChange 事件写入 input 的 data-options 中。当 input 采用了 data-options 时，事件必须写在 data-options 内，不可写在外面。注意使用 textbox 和 numberbox 的区别。
动态创建时的validate
旭纸业项目中生产计划登记页的弹出模态窗是在 js 中动态创建的，其中表单的校验功能要求动态实现。根据原票信息印版123和刀模是变动的，即显示出来的印版和刀模才与原票信息对比进行校验。被隐藏（实际代码中是通过 display = none 移除了元素）的不进行校验。在模板字符串中指定好自定义的校验方法，但是不设置 require:true 在变动事件下动态给 input 设置 require 。代码路径是 C:\software\ideaProjs\xzy-management-system\src\main\resources\static\js\pages\jh\jh_plan_bill_registe_sub.js 行号 1933 的代码如下：
let div = `<div class="easyui-dialog" id="barcode_dialog" >
开头是创建模态窗的代码。行号 2429 的代码如下：
if( !check1 ) {
是动态为 input 设置 require