net jquery绘图自定义表单源代码共享

序

两年前，当我在部队控制时，我想做一个类似的功能。当时大家都在讨论这个想法，很多原因最终都夭折了。没想到过了两年多又有了写画图表格的功能。我对此有点兴奋。基本功能一共用了8.5天才实现。当然网上有些资料是中间借的，公司前端也没有帮忙处理，所以风格和一些功能也没有处理好。github上的代码只是前端脚本，后端处理会在博客中体现出来。

1.工作前的准备

1.1.想法的实现

想法一：

(1)ueditor添加自定义按钮

(2)绘制表单(控件触发的步骤【暂考虑范围】)【每个控件需要添加一个控件名称，并创建一个名称】

(3)保存表单时，建立数据库表(不存储表信息)并保存html字符串

(4)修改表单的同时修改数据库

(5)表单获取的数据封装到json中，存储在后台。

想法二：

(1)jquery拖动自定义标签并将其绘制在指定区域

(2)表单属性设置对应的表单属性和表单基本布局

(3)设置每个控件的属性值

(4)将表单信息和控件以json的形式传递给后台保存

(5)从后台获取数据json对象，用jquery绘制表单页面

(6)创建一个表(F-F200)并将表单数据存储在表单中。

最后的选择是【Idea 2】，因为富文本编辑器有很多自动生成的标签，让人感觉很不舒服。当然，我们可以和ueditor打交道(这也是两年前的想法)。

1.2.实施过程的确定

整个过程从网上一些类似的功能开始，从中我得到了很多帮助，所以就不一一感谢了。然后是3天无羞无耻的剧本修改工作[现在基本完成但还在继续]。后台数据的处理没什么好说的。一些缓存问题被用在中间，这最初被称为redis。结果是很难部署(很难部署？好吧，看起来很蠢)，所以我用了c#的CacheHelper。

2.具体实现

预览和保存绘图表单

2.1.脚本

以上是表单创建的js脚本。

就是上图的实现。

Html有三个重要部分：左、中、右。左边是页面上使用的选项卡区域，中间是显示区域，右边是窗体和控件属性的设置区域。Htnl脚本如下：

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www . w3 . org/TR/HTML 4/loose . DTD ' HTML head meta http-equiv=' Content-Type ' Content=' text/HTML；charset=utf-8 ' meta name=' keywords ' content=' kmonkey，王彦岭，在线表单，自定义表单，表单设计器' meta name='description' content='表单设计器，支持文本，图片，地图，单项选择，多项选择，下拉等多种输入类型。我要把它变成一个超级通用的。这样不知道如何编程的人可以很容易地设计出想要的形式。继续编码' meta name=' renderer ' content=' WebKit ' title form design/title link type=' text/CSS ' rel='样式表' href=' ~/content/form design/CSS/common . CSS？v=20160929 '/link type=' text/CSS ' rel='样式表' href=' ~/Content/FormDesign/CSS/jquery-ui-1 . 9 . 2 . custom . CSS '/link type=' text/CSS ' rel='样式表' href=' ~/Content/FormDesign/CSS/widgets . CSS？v=20160929 '/link type=' text/CSS ' rel='样式表' href=' ~/Content/FormDesign/CSS/jquery . mccustomscroll bar . min . CSS？v=20160929 '/link type=' text/CSS ' rel='样式表' href=' ~/Content/FormDesign/CSS/formbuild . CSS？v=20160929 '/head body div id=' container '！-left state-div id=' left ' div id=' add field ' class=' hide ' H3 class=' field-group '常规字段/