为了让开发人员更加专注于组件本身的逻辑处理,我们开发了DynamicForm动态表单配置系统,可以通过拖拽的方式,快速创建一个表单。 DynamicForm是由携程市场营销”活动平台”及”会员平台”共同设计的React表单组件,它包括表单可视化设计、校验、预览、渲染等功能。 因此我们开发了动态表单2.0(DynamicForm)。 为了达到表单配置的灵活性,DynamicForm必须满足以下几个条件: 1)丰富的表单控件类型 DynamicForm包含了以下内容,满足了多样化的配置要求。 四、后续计划 DynamicForm将作为独立的npm模块使用,为其他动态表单场景提供公共功能,打造泛应用动态表单。 DynamicForm代码开源,与社区共同交流与进步。
再看一篇(最后一个了),利用Attribute实现的 MVC动态表单 http://www.cnblogs.com/dozer/archive/2010/08/05/DynamicForm.html ("Create", true, "Edit", false, Order = 3)] public bool IsDeleted { get; set; } [DynamicForm ("Create", true, "Edit", false, Order = 1)] public bool IsExist { get; set; } [DynamicForm [DynamicForm("Create", true, "Edit", true, Order = 1)] public string Name { [DynamicForm("Create", true, "Edit", true, Order = 2)] public int Age { get
-- DynamicForm.vue --><template>
点击添加字段可增加更多输入框
</template> </DynamicForm ><template> <el-form :model="formData" :rules="formRules" ref="<em>dynamicForm</em>"> <el-form-item v-for $refs.dynamicForm.validate((valid) => { if (valid) { // 表单验证通过,可以提交数据或执行其他操作 5.3 使用动态表单组件 在父组件中使用刚刚创建的DynamicForm组件,并传入动态生成表单的配置。 <dynamic-form :formFields="dynamicFormConfig"></dynamic-form>
[ {salutation: "Ms", firstname: "Kathy"}, {salutation: "Ms", firstname: "Kathy"}, ]; //DynamicForm 的格式显示 isc.DynamicForm.create({......同上}); g. field)或者说控件的默认类型(editorType)是text ) //editorType: text select date checkbox radioGroup textArea isc.DynamicForm.create contactsList", left: 50, top: 50, width: 500, dataSource: contactsDS }); isc.DynamicForm.create
[ {salutation: "Ms", firstname: "Kathy"}, {salutation: "Ms", firstname: "Kathy"}, ]; //DynamicForm 的格式显示 isc.DynamicForm.create({......同上}); g. field)或者说控件的默认类型(editorType)是text ) //editorType: text select date checkbox radioGroup textArea isc.DynamicForm.create contactsList", left: 50, top: 50, width: 500, dataSource: contactsDS }); isc.DynamicForm.create
# override if need Tk().quit() # default is exit class DynamicForm len(sys.argv) == 1: Form(['Name', 'Age', 'Job']) # precoded fields, stay after submit else: DynamicForm
增添负责处理该URL的动作,Application.postForm() public static Result postForm() { DynamicForm in = Form.form ().bindFromRequest(); String result = in.get("content"); return ok(result); } DynamicForm和 Form.form().bindFormRequest()从请求中提取表单信息,并放入到DynamicForm类型的in对象中。 我上面用get()方法,来提取表单中不同名字的输入栏。
using Kingdee.BOS.Core.DynamicForm.PlugIn; using Kingdee.BOS.Core.DynamicForm.PlugIn.Args; using
引用相关组件(参照组件引用规则); 增加using: C# using Kingdee.BOS.Core.Bill.PlugIn; using Kingdee.BOS.Core.DynamicForm; using Kingdee.BOS.Core.DynamicForm.PlugIn.Args; 4. 命名空间 命名空间 Kingdee.BOS.Core.DynamicForm.PlugIn 主要类及说明: ClassDescription AbstractDynamicFormDataBinder 和校验器配合使用 运行于App层 命名空间 Kingdee.BOS.Core.DynamicForm.PlugIn 继承体系 所有服务插件都应继承自抽象服务插件类。 插件模型继承自抽象类服务插件Kingdee.BOS.Core.DynamicForm.PlugIn.AbstractOperationServicePlugIn 接口 接口 IOperationServicePlugIn
template> </el-form-item> </template> </el-form> export default { name: 'dynamicForm template> </el-form-item> </template> </el-form> export default { name: 'dynamicForm
# override if need Tk().quit() # default is exit class DynamicForm
required', 'minLength:8'] }, { type: 'captcha', src: '/api/captcha', refreshable: true }];function DynamicForm
命名空间 Kingdee.BOS.Core.Bill.PlugIn 继承体系 System.Object Kingdee.BOS.Core.DynamicForm.PlugIn.AbstractDynamicFormPlugIn
【推荐阅读】 30+条业务线,携程微信小程序如何协同开发 从47%到80%,携程酒店APP流畅度提升实践 携程动态表单DynamicForm的设计与实现 开源 | 携程 Foxpage 前端低代码框架
getResponsesInOrder() { return Array.from(this.responses.entries()); } } 案例2:UI组件按添加顺序渲染 class DynamicForm
https://www.zhihu.com/question/53150351 【推荐阅读】 携程动态表单DynamicForm的设计与实现 开源 | 携程 Foxpage 前端低代码框架 秒开率70%
Kingdee.BOS.ServiceFacade.ServicesStub.DataMigration Kingdee.BOS.ServiceFacade.ServicesStub.DB Kingdee.BOS.ServiceFacade.ServicesStub.DynamicForm
**核心组件开发**(2小时) ```jsx // Copilot根据注释生成基础组件结构 const DynamicForm = ({ config, onSubmit }) => { const
/div> ))}