基于Ant Design 和 jQuery UI 的表单设计器

基于Ant Design 和 jQuery UI 的表单设计器
github 地址

概念

Comonent 组件
Layout 布局，一种特殊的Component
Component Editor 组件属性编辑器
Component Factory 组件工厂，创建Component 和 Component Editor

扩展组件

创建一个组件

组件的定义是通过this.props.definition来传递的。definition的格式如下：

{type: 'Checkbox', // 必须存在title: '多选框',  // 必须存在props:{'columnNum':2},children:[// 只有在Layout 中出现该属性componentDefinition,...]
}

在this.props 中还提供了renderCounter属性，每次组件的刷新该属性值会自增。definition的结构可能是深层次的，然而在Ant Design提供的React 组件中的shouldComponentUpdate(nextProps,nextState)方法的实现是对象的浅层比较，在某些情况下Component Editor对组件属性的改变不会导致组件的刷新。可以通过renderCounter来解决组件不刷新的问题。

/*** 组件*/
@ComponentWrapper
class CheckboxComponent extends Component{render(){const { definition :{props}, renderCounter} = this.props;const defaultValue = props.options.filter(item=>{return item.checked;}).map(item=>{return item.value;});return (<CheckboxGroup options={props.options} value={defaultValue} renderCounter={renderCounter} />)}
}


/*** 组件编辑器*/
@ComponentEditor
class InputComponentEditor extends PureComponent{/*** 当编辑器改变时，此方法被调用*/onChange(_, allValues){if(!isNull(allValues.minLength, allValues.maxLength) && allValues.minLength > allValues.maxLength){message.warn(`最小长度${allValues.minLength}应该小于最大长度${allValues.maxLength}`);return false;// 阻止组件的刷新}const { definition:{props}, definition } = this.props;definition.name = getErasure(allValues, 'name');definition.title = getErasure(allValues, 'title');Object.assign(props, allValues);props.minLength = guaranteeNumber(props.minLength, 0, Number.MAX_VALUE);props.maxLength = guaranteeNumber(props.maxLength, 0, Number.MAX_VALUE);return true;}render(){return (<PropsEditor {...this.props} lengthLimit placeholder/>);}
}

/*** 组件工厂*/
@FactoryRegister(InputComponent,InputComponentEditor)
class InputFactory {type="Input"      // 必须存在title="单行输入框"    // 必须存在/*** 初始化一个组件定义* @returns {{type: string, title: string}}*/createComponentDefinition(){return {type: this.type,title: this.title,props:{placeholder: '请输入'},}}
}export default InputFactory;

在compoents/index.js 或 layout/index.js 引入自己组件

基于Ant Design 和 jQuery UI 的表单设计器相关推荐

基于Ant Design和jQuery UI的表单设计器
基于Ant Design 和jQuery UI 的表单设计器 GitHub 地址概念 Comonent 组件 Layout 布局,一种特殊的Component Component Editor 组件 ...
activiti表单设计器_基于Vue,ElementUI开发的一款表单设计器
介绍基于Vue,ElementUI开发的一款表单设计器,提高表单开发效率的利器,让开发者从枯燥的表单代码编写中解放出来工具地址: http://tools.xiaoyaoji.cn/form Gi ...
基于Vue,ElementUI开发的一款表单设计器
介绍基于Vue,ElementUI开发的一款表单设计器,提高表单开发效率的利器,让开发者从枯燥的表单代码编写中解放出来工具地址:http://form.making.link GitHub地址:h ...
FormMaking表单设计器的使用
在开发过程中有一个可以让客户自己来设计表单的需求,看了多个动态表单生成的,最后选择了FormMaking,主要是这个基于vue和elmenet-ui的一款表单设计器,跟我们的项目更贴合. FormMa ...
基于springboot+element ui+vue的java快速开发平台，集成html5工作流设计器，flowable， element ui 表单设计器
前后端分离.maven多模块开发,方便多人协同开发后端选型:springboot2 + mybatis + shiro + jwt token + flowable 前端选型:vue + eleme ...
html5拖拽表单设计器,require+jquery+backbone实现拖拽式报表设计器-拖拽式表单设计器...
HTML我帮您-拖拽式报表设计器-拖拽式表单设计器是一个可视化设计器,基于require+jquery+backbone+underscore+bootstrap实现的表单设计器.思想来源于 Layo ...
基于 Formily 的表单设计器实现原理分析
编者寄语:本期为大家带来基于 Formily 的拖拽式表单设计器玩法,探索可视化时代表单设计器的可能. 背景在控制台类 web 应用中,表单是最常见的交互形式.用户在表单中填写信息,点击提交就能完成 ...
基于 Formily 的表单设计器实现原理分析
作者:段国伟.汪曦背景在控制台类 web 应用中,表单是最常见的交互形式.用户在表单中填写信息,点击提交就能完成对数据创建或者修改操作. 最开始前端开发人员根据业务模型和具体需求,通过**逐一** ...
开源推荐：国内3大主流前端UI表单设计器，千万不要让领导知道
互联网应用架构:专注编程教学,架构,JAVA,Python,微服务,机器学习等领域,欢迎关注,一起学习. 偷得浮生半日闲,自古人生何其乐.开始之前告诉一下大家,距离国庆8天假只剩4天了,先乐呵乐呵. ...
基于VUE的ElementUi可视化表单设计器布局器
码农苦码农懂的个人空间工作日志正文基于VUE的ElementUi可视化表单设计器布局器顶原码农苦码农懂发布于 09/11 15:35 字数 1187 阅读 41 收藏 0 点赞 1 评论 ...

基于Ant Design 和 jQuery UI 的表单设计器

概念

扩展组件

创建一个组件

基于Ant Design 和 jQuery UI 的表单设计器相关推荐

最新文章

热门文章