easyui各种input框的格式示例

本文展示了EasyUI中各种类型的input框使用示例,包括普通输入框和箭头数字框,详细说明了如何设置必填、最小值等属性。
摘要由CSDN通过智能技术生成
一般文本框
<td nowrap><label for="dianzixinxiang" class="field">电子信箱:</label></td>
<td><input class="easyui-validatebox"
data-options="validType:'length[3,50]'" type="text"
id="dianzixinxiang" name="dianzixinxiang" style="width: 200px;"
value="${model.dianzixinxiang }" /></td>
外键下拉框1
<td nowrap><label for="fromuser_id" class="field">购入业务员:</label></td>
<td><input class="easyui-combobox" editable="false"
data-options="valueField: 'id',   
        textField:'name',url:'../system/user!selectoptions.action?moduleid=${module.id}'"
type="text" id="fromuser_id" name="fromuser_id"
style="width: 200px;" value="${model.fromuser.id }" /></td>
外键下拉框2
<td><label for="bankinfo_id" class="field">贷款银行:</label></td>
<td><input class="easyui-combobox" editable="false"
data-options="valueField: 'id', textField:'name',url:'bankinfo!selectoptions.action?moduleid=${module.id}'"
id="bankinfo_id" name="bankinfo_id" style="width: 200px;"
value="${model.bankinfo.id}" /></td>
基础设置下拉框
<td nowrap><label for="leixing" class="field">汇票类型:</label></td>
<td><input class="easyui-combobox"
data-options="valueField: 'name',   
        textField:'name',url:'../basedata/basedata!basedataSelections.action?moduleid=${module.id}&typekey=HUIPIAOLEIXING ',panelHeight:'auto'"
id="leixing" name="leixing" style="width: 200px;"
value="${model.leixing }" /></td>
数字框
<td nowrap><label for="gourudianshu" class="field">购入点数:</label></td>
<td><input class="easyui-numberbox"
data-options="precision:2,groupSeparator:','" type="text"
id="gourudianshu" name="gourudianshu" style="width: 200px;"

value="${model.gourudianshu}" /></td>

箭头数字框

<td nowrap><label for="daikuanniandu" class="field">贷款年度:</label></td>
<td><input class="easyui-numberspinner" type="text" required
data-options="min:1"
id="daikuanniandu" name="daikuanniandu" style="width: 200px;"
value="${model.daikuanniandu}" /></td>

日期框
<td nowrap><label for="huifangriqi" class="field">回访日期:</label></td>
<td><input class="easyui-datebox" id="huifangriqi"
name="huifangriqi" style="width: 200px;" editable="false"
value="${model.huifangriqi }" /></td>
复文本框
<td nowrap><label for="beizhu" class="field">备注:</label></td>
<td colspan="4"><textarea id="beizhu"
name="beizhu" style="width: 500px;" rows="5">${model.beizhu }</textarea></td>
Easyui下拉的使用是通过在input标签上添加class为"easyui-combobox"的属性来实现的。在引用中的前端代码中可以看到示例input标签如下所示: ``` <input type="text" id="city_name" name="city_name" class="easyui-combobox" data-options="editable:true ,valueField: 'id',textField: 'text',url:'${pageContext.request.contextPath}/admin/main/getcity',prompt: '城市名称',validType:'length中的代码示例中,通过onSelect事件获取到选中的城市,并使用Ajax向服务端发送请求,获取该城市下的其他数据,并将数据展示在页面中的相应元素中。 综上所述,Easyui下拉的使用是通过在input标签上添加class为"easyui-combobox"的属性,并通过data-options属性设置组件的配置选项来实现。在JavaScript代码中可以监听onSelect事件获取选择的值,并进行相应的操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Jquery Easyui自定义下拉组件使用详解(21)](https://download.csdn.net/download/weixin_38506713/14805938)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [easyui下拉选中触发事件](https://blog.csdn.net/qq_36746327/article/details/80111119)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值