两年前在力控的时候就想做一个类似的功能，当时思路大家都讨论好了，诸多原因最终还是夭折了。没想到两年多后再这有重新提出要写一个绘制表单的功能。对此也是有点小激动呢？总共用时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 脚本如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta content="kmonkey,王延领,在线表单,自定义表单,表单设计器"> <meta content="表单设计器，支持文本、图片、地图、单选、多选，下拉等多种输入类型，我是准备把它做成一个超级通用的一个插件。让不懂编程的人也能很轻松的设计出想要的表单。继续加油code吧"> <meta content="webkit"> <title>表单设计</title> <link type="text/css" href="~/Content/FormDesign/css/common.css?v=20160929" /> <link type="text/css" href="https://www.jb51.net/~/Content/FormDesign/css/jquery-ui-1.9.2.custom.css" /> <link type="text/css" href="~/Content/FormDesign/css/widgets.css?v=20160929" /> <link type="text/css" href="~/Content/FormDesign/css/jquery.mCustomScrollbar.min.css?v=20160929" /> <link type="text/css" href="~/Content/FormDesign/css/formbuild.css?v=20160929" /> </head> <body> <div> <!-- left state --> <div> <div> <h3>通用字段</h3> <ul> <li ftype="text"><a title="适用于填写简短的文字内容，身份证号、银行卡号、工号等请使用此类型。" href="#"><i></i>单行文本</a></li> <li ftype="textarea"><a title="适用于填写大段文本，如“备注”、“留言”" href="#"><i></i>多行文本</a></li> <li ftype="radio"><a title="适用于在少量选项里选一个，如“男/女”" href="#"><i></i>单选框</a></li> <li ftype="date"><a title="适用于选择特定的日期" href="#"><i></i>日期</a></li> <li ftype="dropdown2"><a title="适用于展示多级联动，如第一级是饮料，第二级只能选择绿茶、红茶等" href="#"><i></i>多级下拉框</a></li> <li ftype="file"><a title="适用于收集文件，如简历、照片" href="#"><i></i>文件上传</a></li> <li ftype="section"><a title="用于将字段分组显示，更清晰" href="#"><i></i>分隔符</a></li> </ul> <ul> <li ftype="number"><a title="适用于填写涉及到数学运算的数字，身份证号、银行卡号、工号等请使用单行文本。" href="#"><i></i>数字</a></li> <li ftype="checkbox"><a title="适用于在几个选项里选多个，如投票" href="#"><i></i>多选框</a></li> <li ftype="dropdown"><a title="适用于在非常多的选项里选一个，如省份选择" href="#"><i></i>下拉框</a></li> <li ftype="time"><a title="适用于填写特定的时间" href="#"><i></i>时间</a></li> <li ftype="likert"><a title="适用于处理批量单选" href="#"><i></i>组合单选框</a></li> <li ftype="image"><a title="在表单上加入图片，起到宣传产品或美化表单的作用" href="#"><i></i>图片</a></li> <li ftype="html"><a title="适用于添加HTML显示元素，如“p,a,span,div”等" href="#"><i></i>HTML</a></li> </ul> <h3>联系信息字段</h3> <ul> <li ftype="name"><a title="适用于填写用户姓名" href="#"><i></i>姓名</a></li> <li ftype="address"><a title="适用于填写全国的地址" href="#"><i></i>地址</a></li> <li ftype="phone"><a title="适用于填写中国大陆内的手机和座机号码" href="#"><i></i>电话</a></li> </ul> <ul> <li ftype="email"><a title="适用于填写电子邮箱地址" href="#"><i></i>电子邮箱</a></li> <li ftype="map"><a title="通过地图收集地理信息，手机上可自动定位" href="#"><i></i>地理位置</a></li> <li ftype="url"><a title="适用于填写网站链接" href="#"><i></i>网址</a></li> <!--<li ftype="money"><a title="适用于填写价格" href="#"><i></i>价格</a></li> --> </ul> <h3>宏控件</h3> <ul> <li ftype="goods"><a title="和已知系统数据配合使用，如当前登入人" href="#"><i></i>当前登入人</a></li> </ul> <ul> <li ftype="goods" subtype="noimg"><a title="和已知系统数据配合使用，如组织结构部门" href="#"><i></i>登入人部门</a></li> </ul> </div><!-- addFields --> </div> <!-- left end --> <!-- middle state --> <div> <div> <div> <h2></h2> <div></div> </div> </div> <div> <div> <h2>没有字段!</h2> <a href="#">表单中没有字段，点击或拖动左边的组件添加字段。</a> </div> </div> <!--表单绘制区域--> <ul></ul> <!--表单绘制区域--> <div> <table> <tr> <td><a>预览</a></td> <td><a href="#">保存</a></td> <!-- <td><a href="#"><b></b>添加新字段</a></td> --> </tr> </table> </div> </div> <!-- middle end --> <!-- right state--> <div> <!-- --> <div> <h3><b>没有选择字段</b></h3> <p>请先在右侧选择需要编辑的字段，然后在此编辑字段的属性。</p> </div> <div> <!-- field properties --> <h3>表单属性</h3> <div> <ul> <!-- <li>1.</li> --> <li> <label for="lbl"> 字段名称 </label> <textarea rows="2"></textarea> </li> <li> <label for="type"> 字段类型 <a href="#" title="关于字段类型">(?)</a> </label> <select> <optgroup label="标准类型"> <option value="text">单行文本</option> <option value="textarea">多行文本</option> <option value="radio">单选框</option> <option value="number">数字</option> <option value="checkbox">多选框</option> <option value="dropdown">下拉框</option> </optgroup> <optgroup label="常用类型"> <option value="email">电子邮箱</option> <option value="address">地址</option> <option value="map">地理位置</option> <option value="phone">手机</option> <option value="name">姓名</option> <option value="file">上传文件</option> <option value="date">日期</option> <option value="time">时间</option> <option value="url">网址</option> <option value="likert">组合单选框</option> <option value="dropdown2">多级下拉框</option> <option value="image">图片</option> <option value="goods">配图商品</option> <option value="goodsnoimg">无图商品</option> </optgroup> </select> </li> <li> <label for="fldsize"> 字段长度 <a href="#" title="关于字段长度">(?)</a> </label> <select> <option value="s">短</option> <option value="m">中</option> <option value="xxl">长</option> </select> </li> <li> <label for="layout"> 字段布局 <a href="#" title="关于字段布局">(?)</a> </label> <select> <option value="one">一列</option> <option value="two">二列</option> <option value="three">三列</option> <option value="oneByOne">自动排列</option> </select> </li> <li> <label for="dateformat"> 日期格式 <a href="#" title="关于日期格式">(?)</a> </label> <select> <option value="ymd" selected="selected">YYYY - MM - DD</option> @*<option value="mdy">MM / DD / YYYY</option> <option value="dmy">DD / MM / YYYY</option>*@ </select> </li> <li> <label for="phoneformat"> 电话格式 <a href="#" title="关于电话格式">(?)</a> </label> <select> <option value="mobile" selected="selected">手机</option> <option value="tel">座机</option> </select> </li> <li> <label for="nameformat"> 姓名格式 <a href="#" title="关于姓名格式">(?)</a> </label> <select> <option value="short" selected="selected">普通</option> <option value="extend">加长</option> </select> </li> <li> <label for="moneyfomat">货币格式</label> <select> <option value="yen">¥ 人民币/日元</option> <option value="dollars">$ 美元</option> <option value="pounds">£ 英镑</option> <option value="euros"> 欧元</option> </select> </li> <li> <label for="N">层级</label> <select> <option value="2" selected="selected">2</option> <option value="3">3</option> <option value="4">4</option> </select> </li> <li></li> <li> <fieldset> <legend> 行标签 <a href="#" title="关于行标签">(?)</a> </legend> <ul></ul> </fieldset> <fieldset> <legend> 列标签 <a href="#" title="关于列标签">(?)</a> </legend> <ul></ul> <div> <a href="#">批量编辑</a> </div> </fieldset> </li> <li></li> <li> <fieldset> <legend> 选择项 <a href="#" title="关于选择项">(?)</a> </legend> <ul></ul> <div> <a href="#">批量编辑</a> </div> <div> <a href="#">批量编辑</a> </div> </fieldset> </li> <li> <fieldset> <legend> 商品列表 <a href="#" title="关于商品列表">(?)</a> </legend> <ul></ul> <div> <form action="" method="POST" enctype="multipart/form-data"> <a title="添加配图商品" href="#"> <span>+ 添加配图商品</span> <input title="添加配图商品" title="支持jpg、jpeg、png格式，文件小于500K" type="file" size="3" accept="image/jpeg,image/png,image/bmp,image/gif" /> </a> <!-- <a href="#" title="添加常用配图商品">添加常用配图商品</a> --> </form> <div> <a title="添加无图商品"><span>+ 添加无图商品</span></a> </div> <div> <input value="1" type="checkbox"> <label for="goodsForBuy">商品用于向供应商询价</label> <a href="#" title="关于商品用于向供应商询价">(?)</a><br> </div> </div> </fieldset> </li> <li> <form action="" method="POST" enctype="multipart/form-data"> <label for="uploadImage"> 上传图片<a href="#" title="关于图片">(?)</a> </label> <a> <span>上传图片</span> <input type="file" title="支持jpg、jpeg、png格式，文件小于500K" accept="image/jpeg,image/png,image/bmp,image/gif" /> </a> </form> </li> <li> <fieldset> <legend>设置</legend> <ul> <li> <input type="checkbox" value="1" /> <label for="reqd">必须输入</label> <a href="#" title="关于必须输入">(?)</a> </li> <li> <input type="checkbox" value="1" /> <label for="uniq">不许重复</label> <a href="#" title="关于不许重复">(?)</a> </li> <!-- <li> <input type="checkbox" value="1"/> <label for="qrinput">扫码输入</label> <a href="#" title="关于扫码输入">(?)</a> </li> --> <!-- <li> <input type="checkbox" value="1" /> <label for="random">随机</label> <a href="#" title="关于随机">(?)</a> </li> --> <!-- <li> <input type="checkbox" value="1"/> <label for="allowOther">允许其他值</label> <a href="#" title="关于允许其他值">(?)</a> </li> --> <li> <input type="checkbox" value="1" /> <label for="hidenum">隐藏数字</label> <a href="#" title="关于隐藏数字">(?)</a> </li> <li> <div> <input type="checkbox" value="1" /> <label for="internal">启用国际手机</label> <a href="#" title="关于启用国际手机号">(?)</a> </div> <input type="checkbox" value="1" /> <label for="authcode">验证码</label> <a href="#" title="关于手机验证码">(?)</a> <div> <input placeholder="短信签名" type="text" maxlength="16" /> <a target="_blank" href="https://www.jb51.net/web/formview/5606403b0cf2f6fe39b1965d">提交审核</a> </div> </li> <!-- <li> <input type="checkbox" value="1"/> <label for="chkCompress">压缩图片</label> <a href="#" title="关于压缩图片">(?)</a> <div> <label for="selCompress">压缩到</label> <select> <option value="10">10%</option> <option value="20">20%</option> <option value="30">30%</option> <option value="40">40%</option> <option value="50">50%</option> </select> </div> </li> --> <li> <input type="checkbox" value="1" /> <label for="chkDismark">禁止手动标注</label> <a href="#" title="禁止手动标注">(?)</a> </li> </ul> </fieldset> </li> <li> <fieldset> <legend>字段可见性</legend> <input type="radio" value="pub" /> <label for="sec_pub">可见</label> <br /> <input type="radio" value="pri" checked="checked" /> <label for="sec_pri">隐藏</label> <a href="#" title="关于字段显示状态">(?)</a> </fieldset> </li> <li></li> <li> <fieldset> <legend> 范围 <a href="#" title="关于范围">(?)</a> </legend> <div> <div> <label for="min">最小值</label> <input type="text" value="" /> </div> <div> <label for="max">最大值</label> <input type="text" value="" /> </div> </div> </fieldset> </li> <li> <label for="defval_text"> 默认值 <a href="#" title="关于默认值">(?)</a> </label> <input type="text" value="" maxlength="255" /> </li> <li> <label for="defval_number"> 默认值 <a href="#" title="关于默认值">(?)</a> </label> <input type="text" value="" maxlength="255" /> </li> <li> <label for="defval_date"> 默认值 <a href="#" title="关于默认值">(?)</a> </label> <input type="text" value="" maxlength="255" /> </li> <li> <label for="defval_time"> 默认值 <a href="#" title="关于默认值">(?)</a> </label> <input type="text" value="" maxlength="255" /> </li> <li> <label for="pdefval_phone_tel"> 默认值 <a href="#" title="关于默认值">(?)</a> </label> <div> <span> <input maxlength="4" size="4" type="text" /> <label for="defval_phone_tel_1">区号</label> </span> <span> - </span> <span> <input maxlength="8" size="8" type="text" /> <label for="defval_phone_tel_2">总机</label> </span> <span> - </span> <span> <input maxlength="4" size="4" type="text" /> <label for="defval_phone_tel_3">分机</label> </span> <input type="hidden" size="18" /> </div> </li> <li> <label for="defval_phone_mobile"> 默认值 <a href="#" title="关于默认值">(?)</a> </label> <input type="text" maxlength="18" /> </li> <li> <label for="defval_country"> 默认值 <a href="#" title="关于默认值">(?)</a> </label> <select></select> <select><option>市</option></select> <select><option>区/县</option></select> </li> <li> <label for="secdesc"> 分隔描述 <a href="#" title="关于分隔描述">(?)</a> </label> <textarea rows="5"></textarea> </li> <li> <label for="html"> HTML内容 <a href="#" title="关于HTML内容">(?)</a> </label> <textarea rows="5"></textarea> </li> <li> <label for="instruct"> 字段说明 <a href="#" title="关于字段说明">(?)</a> </label> <textarea rows="3"></textarea> </li> <li></li> <li> <label for="layout"> 字段宽度（仅填表时可见） <a href="#" title="字段宽度">(?)</a> </label> <select> <option value="">充满整行</option> <option value="leftHalf">整行宽度的1/2</option> <option value="third">整行宽度的1/3</option> <option value="quarter">整行宽度的1/4</option> </select> </li> <li> <label for="css">扩展属性</label> <input type="text" value="" maxlength="1024" /> <!-- 1.字段的扩展属性不对外开放，仅内部人员使用； 2.扩展属性是一个JSON对象 3.目前支持的JSON属性为:{matfld:"F1,F2"} matfld:关联查询时下拉框中可以带出的其它字段名； --> </li> <li></li> </ul> </div> </div> <!-- end field properties --> <!-- form properties --> <div> <h3>表单属性</h3> <ul> <li> <label for="formName">表单名称 </label> <input maxlength="64" type="text" /> </li> <li> <label for="desc">描述 <a href="#" title="关于描述">(?)</a></label> <textarea rows="3" placeholder="表单描述"></textarea> </li> <li> <label for="labelAlign"> 标签对齐方式 </label> <select> <option value="T">上对齐</option> <option value="L">左对齐</option> <option value="R">右对齐</option> </select> </li> <li> <label for="labelAlign">提交后跳转选项</label> <ul> <li> <input value="T" checked="checked" type="radio" /> <label for="confirmType_text">显示文本</label> <a href="#" title="关于显示文本">(?)</a> </li> <li> <input value="U" type="radio" /> <label for="confirmType_url">跳转至网页</label> <a href="#" title="关于跳转至网页">(?)</a> </li> <li> <textarea rows="3">Thank you. Your entry has been successfully submitted.</textarea> <input type="text" placeholder="http://" /> </li> </ul> </li> <!-- <li> <label for="language">语言 <a href="#" title="关于语言">(?)</a></label> <select> <option value="cn">简单中文</option> <option value="en">English</option> </select> </li> <li></li> <li> <fieldset> <legend>商品相关</legend> <ul> <li> <input type="checkbox" value="1"> <label for="sale">促销:</label> 满 <input type="text" disabled/> 减 <input type="text" disabled/> <a href="#" title="关于商品促销">(?)</a> </li> <li> <div> <input type="checkbox" value="1"/> <label for="chkAliPay">在线支付</label> <a href="#" title="关于在线支付">(?)</a> <div> <a href="#">配置支付参数</a><br/> <label>不跳转到在线支付条件</label> <a href="#" title="关于不跳转条件">(?)</a> <div> <select></select> 等于 <select></select> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.jb51.net/jsform-setup.msi">下载小票自动打印程序</a> <a href="#" title="关于小票自动打印程序">(?)</a> </li> </ul> </fieldset> </li> <li></li> <li> <fieldset><legend>跳转选项</legend> <ul> <li> <input value="T" checked="checked" type="radio"/> <label for="confirmType_text">显示文本</label> <a href="#" title="关于显示文本">(?)</a> </li> <li> <input value="U" type="radio"/> <label for="confirmType_url">跳转至网页</label> <a href="#" title="关于跳转至网页">(?)</a> </li> <li> <textarea rows="3">Thank you. Your entry has been successfully submitted.</textarea> <input type="text" value="http://" /> </li> </ul> </fieldset> </li> <li></li> <li> <fieldset><legend>填写控制</legend> <ul> <li> <label for="captcha">验证码 <a href="#" title="关于验证码">(?)</a></label> <div> <select> <option value="1">自动 (推荐)</option> <option value="2">一直显示</option> <option value="0">从不显示</option> </select> </div> </li> <li> <label for="entriesLimit">达到如下数据量后关闭表单 <a href="#" title="关于数据量限制">(?)</a> </label> <input maxlength="8" type="text"/> </li> <li> <input value="1" type="checkbox"/> <label for="onePerIp">每个IP只允许提交一次</label> <a href="#" title="关于IP访问限制">(?)</a> <br/> </li> <li> <input type="checkbox" value="1"/> <label for="chkAutoFill">自动填充上次填写数据</label> <a href="#" title="自动填充上次填写数据">(?)</a> </li> <li> <div> <input value="1" type="checkbox"/> <label for="schActive">表单只允许在规定的时间范围内访问</label> <a href="#" title="关于访问时间限制">(?)</a> <div> <div> <label>开始时间</label> <span> <input maxlength="4" type="text"/> <label>YYYY</label> </span> <span> <input maxlength="2" type="text"/> <label>MM</label> </span> <span> <input maxlength="2" type="text"/> <label>DD</label> </span> <span><input type="text"></input></span> <span> <select> <option value="0">00</option> <option value="1">01</option> <option value="2">02</option> <option value="3">03</option> <option value="4">04</option> <option value="5">05</option> <option value="6">06</option> <option value="7">07</option> <option value="8">08</option> <option value="9">09</option> <option value="10">10</option> <option value="11">11</option> <option selected="selected" value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> </select> <label>HH</label> </span> <span> <select> <option value="00">00</option> <option value="15">15</option> <option value="30">30</option> <option value="45">45</option> </select> <label>MM</label> </span> </div> <div> <label>结束时间</label> <span> <input maxlength="4" type="text"/> <label>YYYY</label> </span> <span> <input maxlength="2" type="text"/> <label>MM</label> </span> <span> <input maxlength="2" type="text"/> <label>DD</label> </span> <span><input type="text"></input></span> <span> <select> <option value="0">00</option> <option value="1">01</option> <option value="2">02</option> <option value="3">03</option> <option value="4">04</option> <option value="5">05</option> <option value="6">06</option> <option value="7">07</option> <option value="8">08</option> <option value="9">09</option> <option value="10">10</option> <option value="11">11</option> <option selected="selected" value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> </select> <label>HH</label> </span> <span> <select> <option value="00">00</option> <option value="15">15</option> <option value="30">30</option> <option value="45">45</option> </select> <label>MM</label> </span> </div> <div></div> </div> </div> </li> </ul> </fieldset> </li> <li></li> <li> <fieldset><legend>数据查看</legend> <ul> <li> <label for="chkHideEmpty"><input type="checkbox" value="1"> 查看数据时隐藏值为空的字段</label> <a title="关于隐藏值为空的字段" href="#">(?)</a> <div> <label for="chkPublicData"><input type="checkbox" value="1"> 允许未登录用户查询数据</label> <a title="关于允许未登录用户查询数据" href="#">(?)</a> <a href="#">设置详细参数</a> </div> </li> </ul> </fieldset> </li> --> </ul> </div> <!-- form properties end --> </div> <!-- right end --> </div><!-- container end --> <div> <input value="选择文件" type="button" /> </div> </div><!-- container end --> <div></div> <div> <div></div> </div> <div> <div> <div>正在处理...</div> </div> </div> <span><b></b><em></em></span> <script type="text/javascript" src="https://www.jb51.net/~/Content/FormDesign/js/head.load.min.js"></script> <script type="text/javascript"> var M = { FRMNM: "表单名称", DESC: "", LANG: "cn", LBLAL: "T", CFMTYP: "T", CFMMSG: "提交成功。", SDMAIL: "0", CAPTCHA: "1", IPLMT: "0", SCHACT: "0", INSTR: "0", ISPUB: "1" } var F = []; var fieldsLimit = 150; var goodsNumber = 60; var imageNumber = 10; var LVL = 4; var isForTemplate = false; M.GID = M.GID || ''; IMGBUCKET = "jsformimages"; head.js("/Content/FormDesign/js/jquery-1.7.2.min.js", "/Content/FormDesign/js/jquery-ui-1.8.24.custom.min.js", "/Content/FormDesign/js/wangEditor.min.js?v=20160929", "/Content/FormDesign/js/ajaxfileupload.js?v=20160929", "/Content/FormDesign/js/plupload.full.min.js?v=20160929", "/Content/FormDesign/js/directfileupload.js?v=20160929", "/Content/FormDesign/js/utils.js?v=20160929", "/Content/FormDesign/js/widgets.js?v=20160929", "/Content/FormDesign/js/jquery.mCustomScrollbar.min.js?v=20160929", "/Content/FormDesign/js/jquery.mousewheel.min.js?v=20160929", "/Content/FormDesign/js/formbuilder.js?v=20160929", "/Content/FormDesign/js/address-cn.js?v=20160929"); </script> </body> </html>