您现在的位置是：网站首页> 编程资料编程资料

.net jquery绘制自定义表单源码分享_实用技巧_

2023-05-24 224人已围观

简介 .net jquery绘制自定义表单源码分享_实用技巧_

前言

　　两年前在力控的时候就想做一个类似的功能，当时思路大家都讨论好了，诸多原因最终还是夭折了。没想到两年多后再这有重新提出要写一个绘制表单的功能。对此也是有点小激动呢？总共用时8.5天的时间基本功能也就实现了，当然再者中间也借用了网上的一些资料，公司前端也没有帮忙处理，所以样式和部分功能还没有更好地得到处理，github上出的code只有前端脚本，至于后端的处理，会在博客中体现出来。

1.工作前准备

1.1.实现的思路

思路一：

（1）ueditor添加自定义按钮

（2）绘制表单（控件会触发的脚步【暂时考虑范围】）【每个控件均需添加控件名称和创建名称】

（3）保存表单时建立数据库表（无需存储表信息），并保存html字符串

（4）修改表单需同时修改数据库

（5）表单发起获取数据封装成json，进行后台保存。

思路二：

（1）jquery 拖动自定义标签，在指定区域进行绘制

（2）表单属性设置相应的表单属性和表单基本布局

（3）设置每个控件的属性值

（4）把表单信息和控件以json的形式传入后台进行保存

（5）从后台获取数据json对象用jquery 绘制表单页面

（6）创建一张表（F-F200）把表单数据存入表单中。

最终选择的是【思路二】，原因是富文本编辑器绘制起来有很多自动生成的标签，让人感觉很是不爽。当然可以对ueditor进行处理（这个也是两年前的思路）。

1.2.实现过程的确定

整个的过程从借鉴开始网上有些类似的功能，从中得到很多帮助在这就不一一鸣谢了。然后就是没羞没臊的3天脚本修改工作【现在基本完成不过还在持续中】。后台数据的处理完全没有什么可说的，中间用的了一些缓存问题，本来说是用redis呢，结果商量一些说不用难部署（难部署？？？好吧一脸懵逼），就用了c#的CacheHelper。

2.具体实现

绘制表单预览与保存

2.1.脚本

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

就是上边那个图片的实现。

html重要分左中右三部分。左边是页面上所用到的标签区域，中间是展示区域，右边是表单和控件属性的设置区域。htnl 脚本如下：

表单设计