hlsForm表单 ----------------- <h:hlsForm>包括两个titile部分和body部分,body通常由<h:hlsBox>和<h:hlsMaskedTextBox>、<h:hlshlsNumericTextBox>等标记组成。 #### 一般用法 ```html <!-- hlsForm子标签的使用请参见相应文档,这里不再说明--> <h:hlsForm title="hlsForm" width="100%"> <h:hlsHBox> <h:hlsDatePicker name="transactionDate" id="transactionDate" bind="enabled: enabled,value:data.transactionDate" colspan="4" style="width:50%" placeholder="退款日期" prompt="退款日期:" promptColspan="2" required="true"/> <h:hlsCombobox name="paymentMethod" id="paymentMethod" bind="enabled: enabled, source:cshPayments , value:data.paymentMethod" colspan="4" dataTextField="description" dataValueField="value" placeholder="退款方式" prompt="退款方式:" promptColspan="2" required="true" valuePrimitive="true" style="width:50%"/> </h:hlsHBox> <h:hlsHBox> <h:hlsNumericTextBox name="returnDueAmount" id="returnDueAmount" bind="enabled: enabled, value:data.returnDueAmount" style="width:50%" colspan="4" prompt="退款金额:" promptColspan="2" required="true" validationMessage="Enter {0}"/> <h:hlsMaskedTextBox name="bankSlipNum" id="bankSlipNum" bind="enabled: enabled, value:data.bankSlipNum" colspan="4" prompt="银行流水号:" promptColspan="2" style="width:50%"/> </h:hlsHBox> <h:hlsHBox> <h:hlsLov name="bankAccountName" id="bankAccountName" code="BANK_ACCOUNT_INFO" colspan="4" contextPath="${base.contextPath}" data-bind="enabled: enabled, value:data.bankAccountId,text:data.bankAccountName" locale="${base.locale}" placeholder="退款账户" prompt="退款账户:" promptColspan="2" query="bankAccountNameQuery" change="bankAccountNameChange" select="bankAccountNameSelect" required="true" style="width:50%" /> <h:hlsMaskedTextBox name="bankAccountNum" id="bankAccountNum" bind="enabled: isEnabled, value:data.bankAccountNum" colspan="4" prompt="账号:" promptColspan="2" style="width:50%" /> </h:hlsHBox> </h:hlsForm> ``` ### **主要属性** | 属性名 | 类型 | 描述 | | --- | --- | --- | | width | String | form组件的宽度| |hlsClassName | String |组件的类样式| | title | String | 标题文字| > **注意:** ```javascript $('#query-form input').keydown(function (e) { if (e.keyCode == 13) { e.target.blur(); viewModel.queryResource(e); } }); ``` >**详解:** > - query-form 是表单id,input指表单内所有输入框 (样式选择器选到input) > - viewModel.queryResource(e)当按下回车按钮时都执行查询方法 --------------- #### viewModel在多处出现,这里粗略的介绍一下 ``` viewModel用法 Kendo MVVM是一种MVVM的实现,当然可以跟Kendo 组件(widgets)和数据源(datasource)进行无缝结合 ```javascript var viewModel = kendo.observable({ model: { //model 中可设置绑定初值 id:5 }, //可以自定义函数方法 :如saveFunction方法 saveFunction: function () { $('#grid').data('kendoGrid').saveChanges(); }, queryResource: function (e) { $('#grid').data('kendoGrid').dataSource.page(1); } }); ``` 使用:(**注意data-bind**) ```html <div id="view"> <input data-bind="value: model.id" /> <button data-bind="click: saveFunction">Display</button> </div> ``` 关于绑定 ```html <div id="view" data-bind="value: model.name"></div> <script> var viewModel = kendo.observable({ model: { name: "John Doe" } }); kendo.bind($("#view"), viewModel); </script> ``` > **注意:** > - viewModel中绑定是实时的,即viewModel中的name字段发生变化,则input中的value会一起变化,反之,当input中的value值变化,则viewModel中的name字段也会一同发生变化 > - viewModel中的所有字段属性都是可自定义的 > - 绑定需要input中data-bind 和kendo-bind两次绑定 第一是将数值绑定到model上,第二次是将此div绑定到viewModel上,这样才能访问到viewModel的model属性,也就是第一次绑定才有效 重置按钮 ```javascript resetForm : function(e) { var formData = viewModel.model.toJSON(); for ( var k in formData) { viewModel.model.set(k, null); } } ``` ```html <span class="btn btn-default" data-bind="click:resetForm" type="button"><@spring.message "hap.reset"/></span> ``` > **注意:** > - viewModel与表单绑定后,model里面的字段变化,input框里的value里一起变化,所以在清空viewModel的同时,清空了表单里的数据