基于Layui实现自定义表单，支持嵌入Tp-admin使用

本篇笔记主要记录一个纯手工基于Layui实现的自定义表单。在实际项目开发中我们经常会遇到一些对象的属性需要灵活定制。但是同时我们不可能每次增加一个属性就去修改一次数据库。再者我们也不能把A对象的属性全部统一的加载给B对象或其他对象。要实现属性的灵活管理，自定义表单则显得尤为重要。

我们先看下演示界面。

父级页面：

子级页面：(点击新增属性进入)

本自定义表单组件支持文本、数值、金钱、日期、图片上传、文件上传。

源代码：https://gitee.com/zkii_admin/codes/4uw8etavo3bsmg267lpxr14

使用方法：

以Tp-admin（一款基于thinkPHP5开发的极速后台开发框架），其他场景下请自行研究。

1、下载组件源代码，放到项目模板目录中。Tp-admin一般放在“/application/admin/view”目录下。

2、创建空控制器，控制器内无需任何业务逻辑。仅需一行代码“return view('模板文件')”。完成后可以测试能否在浏览器输入路径打开。

3、在需要自定义表单的位置添加如下代码：一般添加在父页面，子页面即自定义表单的组件。父级页面通过弹框的形式加载子级页面，如演示界面所示。

JavaScript部分：

4、截至到这一步，自定义表单的效果已经实现了。

待完善部分：

由于待完善部分不属于该组件内容，因此仅以文字提示到本篇笔记的最下方。

①父级页面动态添加的表单内容，需要增加一个动态删除功能。

②如果您需要将该组件应用到您自己的项目中，请注意加载layui的CSS文件和JS文件。如果您的后端基于Tp-admin或ThinkAdmin进行开发，上述组件可以直接使用，而无需修改任何代码。

原因是这两个后端开发框架弹窗采用data-modal的底层是layer，在处理弹窗时会自动加载和渲染样式。但是您可以将该组件做成单页面的形式，以达到项目任意位置的灵活使用。这些工作，波波就不再做了。稍后我也会将表单自定义功能整合到Tp-admin框架中，老用户可以通过svn或git进行更新。