动态创建form

本文介绍了一个使用ExtJS实现的数据导入功能,通过表单验证、参数设置及表单提交的方式,实现了从用户界面到后端的数据批量上传过程。具体包括如何创建动态表单元素、设置表单提交方式等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

importRecord : function(self) {
if (self.searchPanel.getForm().isValid()) {//如果合法
var params = self.gridPanel.getStore().baseParams;
Ext.apply(params, self.searchPanel.getForm().getValues());
var form = document.createElement("form");
document.body.appendChild(form);
for (var i in params) {
var input = document.createElement("input");
input.type = "text";
input.name = i;
input.value = params[i];
form.appendChild(input);
}
form.method = "POST";
form.action = __ctxPath + '/project/garantieMoneyImportBankpaymentother.do';
form.submit();
document.body.removeChild(form);
}
}
### 创建带有验证规则的动态表单 在 Vue 中实现动态创建带验证规则的 `Form` 表单可以通过组合使用 `$formCreate` 和特定框架组件来完成。下面是一个基于 Vue 2.x 及 Element UI 实现的例子。 #### 定义基础模板与脚本逻辑 ```html <template> <div id="app"> <!-- el-form 组件 --> <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <component v-for="(item, index) in formItems" :key="index" :is="item.component" v-bind="item.props"></component> <el-button type="primary" @click="submitForm('dynamicValidateForm')">Submit</el-button> </el-form> </div> </template> <script> export default { data() { return { dynamicValidateForm: {}, formItems: [] }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, initForm() { const mockRules = [ { required: true, message: 'Please input activity name', trigger: 'blur' }, // 示例输入框规则 /* 更多规则 */ ]; let rules = window.mock; new Vue({ mounted: function () { let $f = this.$formCreate(rules, { onSubmit: function (formData) { console.log(formData); $f.submitStatus({ loading: true }); } }); // 动态添加表单项 $f.append($r, 'goods_name'); // 将生成的表单项加入到页面显示列表中 Object.keys(this.dynamicValidateForm).forEach(key => { this.formItems.push({ component: 'el-form-item', props: { prop: key, label: `${key} Label`, rules: [...mockRules], // 应用默认规则集 } }) }.bind(this)); }.bind(this), }).$mount(); } }, created() { this.initForm(); // 初始化表单结构 } }; </script> ``` 此代码片段展示了如何利用 `$formCreate` 插件结合自定义方法构建动态表单,并通过遍历 `this.dynamicValidateForm` 来向视图层追加新的 `el-form-item` 元素,同时为其指定必要的属性如 `prop`, `label` 和 `rules`[^1]。 为了确保每个单独的 `el-form-item` 能够应用各自的校验规则而不是整个 `el-form` 设置全局性的 `rules` 属性,这一点非常重要[^2]。 当用户点击提交按钮时,调用了 `submitForm()` 方法来进行最终的数据有效性检查。如果所有字段都满足相应的条件,则执行成功的回调函数;反之则提示错误信息并阻止进一步操作[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值