自定义表单_自定义表单验证 - CSDN
  • 自定义表单的三种方式实现

    千次阅读 2008-07-15 21:10:00
    目前在项目中碰到要实现自定义表单,我从网上或请教了高手实现的方法,总结有三种的实现方式,现大概讲解下, 一种是HTML模版的方式:表单灵活定义的实现方式是通过利用Frontpage或Dreamweaver等对问卷HTML文件进行编辑...

    目前在项目中碰到要实现自定义表单,我从网上或请教了高手实现的方法,总结有三种的实现方式,现大概讲解

    下,

     一种是HTML模版的方式:

    表单灵活定义的实现方式是通过利用Frontpage或Dreamweaver等对问卷HTML文件进行编辑,灵活定义的问卷表单仅限于针对单个被考核人的年度考核和任职考核。其主要过程是:
    • 系统根据问卷内容生成HTML文件,HTML文件中包括要输入的HTML元素控件及其页面布局展现(隐藏的HTML元素和客户端脚本程序不包括在HTML文件中);
    • 考核管理小组成员下载问卷HTML文件到本地,通过Frontpage或Dreamweaver等HTML编辑工具(不要使用Word工具编辑,因为Word编辑HTML文件会产生许多office标识的HTML元素)对HTML文件进行编辑,只能对布局、展现、或增加额外的文字说明,不能对HTML输入元素控件进行删除或增加;
    • 考核管理小组成员上传已经编辑完成的HTML文件,系统对上传的HTML文件进行校验,判断HTML输入元素控件是否被删除;
    • 在启动某一考核类别后,系统根据上传的HTML文件和系统自动生成的隐藏的HTML元素、客户端脚本程序一起生成考核人所用的问卷进行考评打分。


    二种是通过XML +XSL实现:

    采用XML描述表单外观、采用关系型数据库保存表单数据,能够方便的把关系型数据库中的信息展现到表单或保存到一个新建的数据表中。每个表单可以对应多个数据实例,能够通过一张表单提交多个数据实例;每个数据实例都独立于表单外观,能够被应用程序灵活的操作。内置强大的数据校验、数据计算机制,不需要编程即可满足常规的业务需求;可以针对表单控件和数据模型进行脚本编写,实现复杂的业务逻辑


      概述:采用XML描述数据,XSLT定义XML数据显示格式。通过XSLT来控制数据的显示;查询数据库返回XML格式数据,将XML保存到临时文件,通过XSLT来解析XML数据文件生成HTML代码,最终将HTML代码显示到前台页面中

    三种方式也就是目录我的项目中用到的通过WebParts实现:

    下面是我做的一个小样图:

    通常显示的样子:

    可以自定义调整布局:

     

    可以用户自定义的编辑模版的标题,添加模块

    代码如下:

    HTML:

     

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebParts.aspx.cs" Inherits="WebParts" %>

    <%@ Register Src="WebUserControl.ascx" TagName="WebUserControl" TagPrefix="uc2" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        
    <title>无标题页</title>
        
    <style type="text/css">
            body
    {
                font-family
    :"宋体";
                font-size
    :14px;
            
    }

        
    </style>
    </head>
    <body>
        
    <form id="form1" runat="server">
            
    <div>
                
    <asp:WebPartManager ID="WebPartManager1" runat="server" OnDisplayModeChanged="WebPartManager1_DisplayModeChanged">
                
    </asp:WebPartManager>
                
    <table width="100%" cellspacing="0" cellpadding="0" border="0">
                    
    <tr>
                        
    <td align="left" style="height: 1px">
                            
    <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">Edit page layout</asp:LinkButton>
                            
    <asp:Label ID="Label1" runat="server">&nbsp;|&nbsp;</asp:Label>
                            
    <asp:LinkButton ID="LinkButton2" runat="server" OnClick="LinkButton2_Click">Edit Web Part properties</asp:LinkButton>
                            
    <asp:Label ID="Label2" runat="server">&nbsp;|&nbsp;</asp:Label>
                            
    <asp:LinkButton ID="LinkButton3" runat="server" OnClick="LinkButton3_Click" Visible="False">Edit connections</asp:LinkButton>
                        
    </td>
                    
    </tr>
                    
    <tr height="6">
                        
    <td style="height: 6px">
                        
    </td>
                    
    </tr>
                
    </table>
                
    <table cellpadding="0px" cellspacing="0px">
                    
    <tr>
                        
    <td colspan="5">
                            
    <table width="100%">
                                
    <tr>
                                    
    <td style="width: 100px">
                                    
    </td>
                                    
    <td style="width: 60%" align="center">
                                        
    <asp:WebPartZone ID="WebPartZone1" runat="server" BorderColor="#CCCCCC" Font-Names="Verdana"
                                            Padding
    ="6" Width="100%" MenuLabelText="">
                                            
    <ZoneTemplate>
                                                
    <asp:Label ID="Label3" runat="server" title="华融员工试卷考试一...........1"></asp:Label>
                                            
    </ZoneTemplate>
                                            
    <PartChromeStyle BackColor="#EFF3FB" BorderColor="#D1DDF1" Font-Names="Verdana" ForeColor="#333333" />
                                            
    <MenuLabelHoverStyle ForeColor="#D1DDF1" />
                                            
    <EmptyZoneTextStyle Font-Size="0.8em" />
                                            
                                            
    <MenuLabelStyle ForeColor="White" />
                                            
    <MenuVerbHoverStyle BackColor="#EFF3FB" BorderColor="#CCCCCC" BorderStyle="Solid"
                                                BorderWidth
    ="1px" ForeColor="#333333" />
                                            
    <HeaderStyle Font-Size="0.7em" ForeColor="#CCCCCC" HorizontalAlign="Center" />
                                            
    <MenuVerbStyle BorderColor="#507CD1" BorderStyle="Solid" BorderWidth="1px" ForeColor="White" />
                                            
    <PartStyle Font-Size="0.8em" ForeColor="#333333" />
                                            
    <TitleBarVerbStyle Font-Size="0.6em" Font-Underline="False" ForeColor="White" />
                                            
    <MenuPopupStyle BackColor="#507CD1" BorderColor="#CCCCCC" BorderWidth="1px" Font-Names="Verdana"
                                                Font-Size
    ="0.6em" />
                                            
    <PartTitleStyle BackColor="#507CD1" Font-Bold="True" Font-Size="0.8em" ForeColor="White" />
                                        
    </asp:WebPartZone>
                                    
    </td>
                                    
    <td style="width:20%">
                                    
    </td>
                                
    </tr>
                                
    <tr>
                                    
    <td style="width:20%" align="left">
                                        
    <asp:WebPartZone ID="WebPartZone2" runat="server" BorderColor="#CCCCCC" Font-Names="Verdana" Padding="6" Width="100%">
                                            
    <ZoneTemplate>
                                                
    <asp:Label ID="Label4" runat="server" title="被评选人" Text=''></asp:Label>
                                            
    </ZoneTemplate>
                                            
    <PartChromeStyle BackColor="#F7F6F3" BorderColor="#E2DED6" Font-Names="Verdana" ForeColor="White" />
                                            
    <MenuLabelHoverStyle ForeColor="#E2DED6" />
                                            
    <EmptyZoneTextStyle Font-Size="0.8em" />
                                            
    <MenuLabelStyle ForeColor="White" />
                                            
    <MenuVerbHoverStyle BackColor="#F7F6F3" BorderColor="#CCCCCC" BorderStyle="Solid"
                                                BorderWidth
    ="1px" ForeColor="#333333" />
                                            
    <HeaderStyle Font-Size="0.7em" ForeColor="#CCCCCC" HorizontalAlign="Center" />
                                            
    <MenuVerbStyle BorderColor="#5D7B9D" BorderStyle="Solid" BorderWidth="1px" ForeColor="White" />
                                            
    <PartStyle Font-Size="0.8em" ForeColor="#333333" />
                                            
    <TitleBarVerbStyle Font-Size="0.6em" Font-Underline="False" ForeColor="White" />
                                            
    <MenuPopupStyle BackColor="#5D7B9D" BorderColor="#CCCCCC" BorderWidth="1px" Font-Names="Verdana"
                                                Font-Size
    ="0.6em" />
                                            
    <PartTitleStyle BackColor="#5D7B9D" Font-Bold="True" Font-Size="0.8em" ForeColor="White" />
                                        
    </asp:WebPartZone>
                                    
    </td>
                                    
    <td style="width:20%">
                                    
    </td>
                                    
    <td style="width:20%" align="right">
                                        
    <asp:WebPartZone ID="WebPartZone3" runat="server" BorderColor="#CCCCCC" Font-Names="Verdana" Padding="6" Width="100%">
                                            
    <ZoneTemplate>
                                                
    <asp:Label ID="Label5" runat="server" title="评选人" Text=""></asp:Label>
                                            
    </ZoneTemplate>
                                            
    <PartChromeStyle BackColor="#F7F6F3" BorderColor="#E2DED6" Font-Names="Verdana" ForeColor="White" />
                                            
    <MenuLabelHoverStyle ForeColor="#E2DED6" />
                                            
    <EmptyZoneTextStyle Font-Size="0.8em" />
                                            
    <MenuLabelStyle ForeColor="White" />
                                            
    <MenuVerbHoverStyle BackColor="#F7F6F3" BorderColor="#CCCCCC" BorderStyle="Solid"
                                                BorderWidth
    ="1px" ForeColor="#333333" />
                                            
    <HeaderStyle Font-Size="0.7em" ForeColor="#CCCCCC" HorizontalAlign="Center" />
                                            
    <MenuVerbStyle BorderColor="#5D7B9D" BorderStyle="Solid" BorderWidth="1px" ForeColor="White" />
                                            
    <PartStyle Font-Size="0.8em" ForeColor="#333333" />
                                            
    <TitleBarVerbStyle Font-Size="0.6em" Font-Underline="False" ForeColor="White" />
                                            
    <MenuPopupStyle BackColor="#5D7B9D" BorderColor="#CCCCCC" BorderWidth="1px" Font-Names="Verdana"
                                                Font-Size
    ="0.6em" />
                                            
    <PartTitleStyle BackColor="#5D7B9D" Font-Bold="True" Font-Size="0.8em" ForeColor="White" />
                                        
    </asp:WebPartZone>
                                    
    </td>
                                
    </tr>
                            
    </table>
                        
    </td>
                    
    </tr>
                    
    <tr>
                        
    <td colspan="5">
                            
    <asp:GridView Width="100%" ID="GridView1" runat="server" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3">
                                
    <FooterStyle BackColor="White" ForeColor="#000066" />
                                
    <RowStyle ForeColor="#000066" />
                                
    <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
                                
    <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
                                
    <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
                            
    </asp:GridView>
                        
    </td>
                    
    </tr>
                    
    <tr>
                        
    <td colspan="5" align="center">
                            
    <asp:WebPartZone ID="WebPartZone4" runat="server" BorderColor="#CCCCCC" Font-Names="Verdana" Padding="6" Width="100%">
                                
    <ZoneTemplate>
                                    
    <uc2:WebUserControl ID="WebUserControl1" runat="server" title="a"/>
                                
    </ZoneTemplate>
                                
    <PartChromeStyle BackColor="#F7F6F3" BorderColor="#E2DED6" Font-Names="Verdana" ForeColor="White" />
                                
    <MenuLabelHoverStyle ForeColor="#E2DED6" />
                                
    <EmptyZoneTextStyle Font-Size="0.8em" />
                                
    <MenuLabelStyle ForeColor="White" />
                                
    <MenuVerbHoverStyle BackColor="#F7F6F3" BorderColor="#CCCCCC" BorderStyle="Solid"
                                    BorderWidth
    ="1px" ForeColor="#333333" />
                                
    <HeaderStyle Font-Size="0.7em" ForeColor="#CCCCCC" HorizontalAlign="Center" />
                                
    <MenuVerbStyle BorderColor="#5D7B9D" BorderStyle="Solid" BorderWidth="1px" ForeColor="White" />
                                
    <PartStyle Font-Size="0.8em" ForeColor="#333333" />
                                
    <TitleBarVerbStyle Font-Size="0.6em" Font-Underline="False" ForeColor="White" />
                                
    <MenuPopupStyle BackColor="#5D7B9D" BorderColor="#CCCCCC" BorderWidth="1px" Font-Names="Verdana"
                                    Font-Size
    ="0.6em" />
                                
    <PartTitleStyle BackColor="#5D7B9D" Font-Bold="True" Font-Size="0.8em" ForeColor="White" />
                            
    </asp:WebPartZone>
                        
    </td>
                    
    </tr>
                
    </table>
            
    </div>
            
    <asp:EditorZone ID="EditorZone1" runat="server">
                
    <ZoneTemplate>
                    
    <asp:AppearanceEditorPart ID="AppearanceEditorPart1" runat="server" />
                    
    <asp:BehaviorEditorPart ID="BehaviorEditorPart1" runat="server" />
                
    </ZoneTemplate>
            
    </asp:EditorZone>
            
    <asp:CatalogZone ID="CatalogZone1" runat="server">
                
    <PartTitleStyle BackColor="#2254B1" ForeColor="White"></PartTitleStyle>
                
    <ZoneTemplate>
                    
    <asp:PageCatalogPart Runat="server" ID="PageCatalogPart1" BackColor="#eeeeee" />
                
    </ZoneTemplate>
                
    <PartStyle BorderColor="#81AAF2" BorderStyle="Solid" BorderWidth="1px"></PartStyle>
            
    </asp:CatalogZone>
            
    <asp:ConnectionsZone ID="ConnectionsZone1" runat="server">
            
    </asp:ConnectionsZone>
        
    </form>
    </body>
    </html>

     

    CS

     

    using System;
    using System.Data;
    using System.Configuration;
    using System.Collections;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using System.Data.SqlClient;

    public partial class WebParts : System.Web.UI.Page
    {
    属性字段
        
    protected void Page_Load(object sender, EventArgs e)
        
    {
            
    if (!IsPostBack)
            
    {
                
    this.Label4.Text = "被评选人:" + isAdv.ToString();
                
    this.Label5.Text = "评选人:" + Adv.ToString();
                 Bind_Data();
                
            }

        }

        
    void Page_Init(object sender, EventArgs e)
        
    {
            Page.InitComplete 
    += new EventHandler(InitComplete);
        }

        
    void InitComplete(object sender, System.EventArgs e)
        
    {
           
        }

        
    public void Bind_Data()
        
    {
            SqlConnection Sqlcn 
    = new SqlConnection(UDSConnectionString);
            Sqlcn.Open();
            SqlCommand Sqlcm 
    = new SqlCommand(StrSql,Sqlcn);
            SqlDataReader Sqldr;
            Sqldr 
    =  Sqlcm.ExecuteReader();
            
    this.GridView1.DataSource = Sqldr;
            
    this.GridView1.DataBind();
            Sqlcn.Close();
        }

        
    protected void LinkButton1_Click(object sender, EventArgs e)
        
    {
            
    if (WebPartManager1.DisplayMode == WebPartManager.BrowseDisplayMode)
                WebPartManager1.DisplayMode 
    = WebPartManager.CatalogDisplayMode;
            
    else
                WebPartManager1.DisplayMode 
    = WebPartManager.BrowseDisplayMode;
        }


        
    protected void LinkButton2_Click(object sender, EventArgs e)
        
    {
            
    if (WebPartManager1.DisplayMode == WebPartManager.BrowseDisplayMode)
                WebPartManager1.DisplayMode 
    = WebPartManager.EditDisplayMode;
            
    else
                WebPartManager1.DisplayMode 
    = WebPartManager.BrowseDisplayMode;
        }


        
    protected void LinkButton3_Click(object sender, EventArgs e)
        
    {
            
    if (WebPartManager1.DisplayMode == WebPartManager.BrowseDisplayMode)
                WebPartManager1.DisplayMode 
    = WebPartManager.ConnectDisplayMode;
            
    else
                WebPartManager1.DisplayMode 
    = WebPartManager.BrowseDisplayMode;
        }

        
    protected void WebPartManager1_DisplayModeChanged(object sender, WebPartDisplayModeEventArgs e)
        
    {
            
    if (WebPartManager1.DisplayMode == WebPartManager.BrowseDisplayMode)
            
    {
                LinkButton1.Visible 
    = true;
                LinkButton1.Text 
    = "Edit page layout";
                Label1.Visible 
    = true;
                LinkButton2.Visible 
    = true;
                LinkButton2.Text 
    = "Edit Web Part properties";
                Label2.Visible 
    = true;
                LinkButton3.Visible 
    = false;
                LinkButton3.Text 
    = "Edit connections";
            }

            
    else if (WebPartManager1.DisplayMode == WebPartManager.CatalogDisplayMode)
            
    {
                LinkButton1.Visible 
    = true;
                LinkButton1.Text 
    = "End layout editing";
                Label1.Visible 
    = false;
                LinkButton2.Visible 
    = false;
                Label2.Visible 
    = false;
                LinkButton3.Visible 
    = false;
            }

            
    else if (WebPartManager1.DisplayMode == WebPartManager.EditDisplayMode)
            
    {
                LinkButton1.Visible 
    = false;
                Label1.Visible 
    = false;
                LinkButton2.Visible 
    = true;
                LinkButton2.Text 
    = "End property editing";
                Label2.Visible 
    = false;
                LinkButton3.Visible 
    = false;
            }

            
    else if (WebPartManager1.DisplayMode == WebPartManager.ConnectDisplayMode)
            
    {
                LinkButton1.Visible 
    = false;
                Label1.Visible 
    = false;
                LinkButton2.Visible 
    = false;
                Label2.Visible 
    = false;
                LinkButton3.Visible 
    = false;
                LinkButton3.Text 
    = "End connections editing";
            }

        }

    }

     

     

    展开全文
  • 基于雷劈网的表单设计器扩展,java实现后台解析(插件内容和字段和原版有一定改变)。致敬雷劈网. http://formdesign.leipi.org/ 动态表单绘制完毕后由后台解析并存储到数据库,可以自己手动添加定制的宏组件。 ...

    基于雷劈网的表单设计器扩展,java实现后台解析(插件内容和字段和原版有一定改变)。致敬雷劈网. http://formdesign.leipi.org/

    动态表单绘制完毕后由后台解析并存储到数据库,可以自己手动添加定制的宏组件。

    数据库主要只有2张表,但是会动态地创建表单数据的表,表单越多,创建出来的表越多。

    以下是目前此项目的一些截图:
    设计表单
    表单预览
    表单数据填写后预览

    下载地址:
    https://download.csdn.net/download/li532788/11110283

    展开全文
  • vue如何实现自定义表单

    千次阅读 2019-11-21 10:15:03
    自定义表单是什么? 自定义表单顾名思义就是由用户定义表单,由用户觉定标签和组件,决定要填写什么格式的数据,用过腾讯文档的收集表单的一定见过下面的页面,这就是自定义表单自定义表单能做什么? 典型的使用...

    自定义表单是什么?
    自定义表单顾名思义就是由用户定义表单,由用户觉定标签和组件,决定要填写什么格式的数据,用过腾讯文档的收集表单的一定见过下面的页面,这就是自定义表单。
    在这里插入图片描述
    自定义表单能做什么?
    典型的使用场景是信息收集表单或者是投票表单,上面的图片会对应的生成下面的表单,由其他用户填写,从而达到收集数据的功能。
    在这里插入图片描述
    实现效果图:
    效果图如下,可以自定义文本,数字,单选按钮,多选按钮,下拉框等组件:
    在这里插入图片描述
    在这里插入图片描述自定义表单页面生成后的预览页面如下:
    在这里插入图片描述
    实现方法:
    使用form-create,form-create可以根据json生成表单,如下:

    //表单生成规则
                    rule:[
    
                        {
                            type:'input',
                            field:'goods_name',
                            title:'商品名称'
                        },
                        {
                            type:'datePicker',
                            field:'created_at',
                            title:'创建时间'
                        },
                        {
                            type:"rate",
                            field:"rate",
                            title:"推荐级别",
                            value:3.5,
                            props:{
                                max: 5,
                                showText:true,
                                texts:["一级","二级","三级","四级", "五级"],
                            },
    
                            validate:[
                                {required:true,type:'number',min:2, message: '请大于2颗星',trigger:'change'}
                            ]
                        },
                        {
                            type:"checkbox",
                            title:"标签",
                            field:"label",
                            value:["1","2","3"],
                            options:[
                                {value:"1",label:"好用"},
                                {value:"2",label:"方便",disabled:false},
                                {value:"3",label:"实用",disabled:false},
                                {value:"4",label:"有效"},
                            ]
                        }
                    ],
    
    

    上面的json定义了表单生成的规则,在需要显示表单的地方写下面这句就可以显示出来了

     <form-create v-model="zidingyi" :rule="rule" :option="option"  @on-submit="onSubmit"></form-create>
    
    

    绑定表单提交事件,点击提交,弹出填写的值

    onSubmit:function (formData,fApi) {
                    alert(JSON.stringify(formData));
                },
    

    在这里插入图片描述
    在这里插入图片描述
    上面实现了从json到生成表单并取表单值的过程,那么怎么能让用户来生成表单创建规则的json呢,下面的代码大家可以拿去直接使用,当做轮子就好,当然有很多需要优化的地方,大家可以修改。

    代码部分如下
    新建一个NewForm.vue,全部代码:

    <template>
      <div>
    <div v-if="index2==0">
        <el-card class="box-card"  style="width: 80%;margin-left: 10%;min-height: 150px;margin-top: 10px;">
          <div>
    
          </div>
          <el-input class="radio1"
            placeholder="请输入表单主题"
            v-model="title"
            clearable
            style="width: 100%;font-size: 28px;">
          </el-input>
          <el-input class="textarea"
            type="textarea"
            :rows="2"
            placeholder="请输入表单描述"
            v-model="miaoshu"
            style="width: 100%;font-size: 16px;margin-top: 10px;">
          </el-input>
        </el-card>
        <el-card class="box-card" style="width: 80%;margin-left: 10%;min-height: 150px;margin-top: 10px;" v-for="i in num"
                 :id="i">
          <div>
            <el-tag >{{i}}</el-tag>
            <el-input
              placeholder="请输入内容"
              v-model="inputBT[i]"
              clearable
              style="width: 75%;">
            </el-input>
    
            <el-select v-model="value[i]" placeholder="请选择" style="width: 18%;float:right;">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
    
          </div>
          <div style="width: 100%;height: 0;margin-top:5px;border: solid 0.5px lightgrey"></div>
          <div v-if="value[i]=='input'" style="color: grey;margin-top: 20px;">
            待填写者写入文本
          </div>
    
          <div v-if="value[i]=='InputNumber'" style="color: grey;margin-top: 20px;">
            待填写者写入数字
          </div>
          <div class="radio" v-if="value[i]=='radio'" style="color: grey;margin-top: 20px;">
    
            <div v-for="j in radionum[i]" :id="j"><el-input
                placeholder="请输入选项名"
                v-model="radioname[i][j]"
                clearable
                style="width: 80%;">
              </el-input>
    
            </div>
            <div>
              <el-button type="text" @click="addradio(i)"><i class="el-icon-circle-plus-outline"
                                                             style="font-size: 20px;margin-top: 10px"></i></el-button>
              <el-button type="text" @click="deleteradio(i)"><i class="el-icon-remove-outline"
                                                                style="font-size: 20px;margin-top: 10px"></i></el-button>
            </div>
    
          </div>
    
          <div class="radio" v-if="value[i]=='checkbox'" style="color: grey;margin-top: 20px;">
    
            <div v-for="j in checkboxnum[i]" :id="j"><el-input
                placeholder="请输入选项名"
                v-model="checkboxname[i][j]"
                clearable
                style="width: 80%;">
              </el-input>
    
            </div>
            <div>
              <el-button type="text" @click="addcheckbox(i)"><i class="el-icon-circle-plus-outline"
                                                                style="font-size: 20px;margin-top: 10px"></i></el-button>
              <el-button type="text" @click="deletecheckbox(i)"><i class="el-icon-remove-outline"
                                                                   style="font-size: 20px;margin-top: 10px"></i></el-button>
            </div>
    
          </div>
          <div class="radio" v-if="value[i]=='select'" style="color: grey;margin-top: 20px;">
    
            <div v-for="j in selectnum[i]" :id="j">
              {{j}}<el-input
                placeholder="请输入选项名"
                v-model="selectname[i][j]"
                clearable
                style="width: 80%;">
              </el-input>
    
            </div>
            <div>
              <el-button type="text" @click="addselect(i)"><i class="el-icon-circle-plus-outline"
                                                              style="font-size: 20px;margin-top: 10px"></i></el-button>
              <el-button type="text" @click="deleteselect(i)"><i class="el-icon-remove-outline"
                                                                 style="font-size: 20px;margin-top: 10px"></i></el-button>
            </div>
    
          </div>
    
    
        </el-card>
        <div style="text-align: right;width:80%;margin-left: 10%;margin-top: 10px;">
          <el-tooltip class="item" effect="light" content="添加新组件" placement="top">
            <el-button type="text" @click="adddiv" style="font-size: 30px;"><i class="el-icon-circle-plus"></i></el-button>
          </el-tooltip>
    
          <el-tooltip class="item" effect="light" content="删除组件" placement="top">
            <el-button type="text" @click="delectdiv" style="font-size: 30px;"><i class="el-icon-remove"></i></el-button>
          </el-tooltip>
    
    
        </div>
        <div style="text-align: center;">
          <el-button type="primary" @click="tijiao()">预览发布</el-button>
        </div>
      </div>
      <div v-if="index2==1">
        <div style="width: 80%;margin-left: 10%;margin-top: 10px;font-size: 28px;" v-html="title">
    
        </div>
        <div style="width: 80%;margin-left: 10%;margin-top: 10px;font-size: 16px;" v-html="miaoshu">
    
        </div>
        <form-create v-model="yulanform" :rule="formrule" :option="option" @on-submit="onSubmit1" style="width: 80%;margin-top: 20px;"></form-create>
    
        <div style="text-align: center;">
          <el-button type="primary" @click="changeindex2(0)">返回修改</el-button>
          <el-button type="primary" @click="changeindex(10)">立即发布</el-button>
        </div>
      </div>
    </div>
    </template>
    
    <script>
        export default {
            name: "NewForm",
            data() {
                return {
                    index2:0,
                    title:'',
                    miaoshu:'',
                    //卡片的个数
                    num: 1,
                    //输入框
                    inputBT: [],
                    //下拉选择框
                    options: [{
                        value: 'input',
                        label: '文本'
                    }, {
                        value: 'InputNumber',
                        label: '数字'
                    }, {
                        value: 'radio',
                        label: '单选按钮'
                    }, {
                        value: 'checkbox',
                        label: '多选按钮'
                    }, {
                        value: 'select',
                        label: '下拉选择'
                    }, {
                        value: 'rate',
                        label: '评分'
                    }],
                    value: [],
    
                    //下面待优化
                    //单选按钮的选项个数
                        radionum: [2],
                        //单选按钮名字
                        radioname: [[]],
    
                        //多选按钮的选项个数
                        checkboxnum: [2],
                        //多选按钮名字
                        checkboxname: [[]],
    
                        //下拉框的选项个数
                        selectnum: [2],
                        //下拉框名字
                        selectname: [[]],
    
                    //生成的表单规则
                    formrule:[],
                    //表单实例对象
                    yulanform:{},
    
                    option:{
                        submitBtn: {
                            show: false,
                        },
    
                    },
                }
            },
            methods: {
               //增加组件
                adddiv() {
                    this.form.num += 1;
                    this.form.inputBT.push()
                    this.form.radionum.push(2);
                    this.form.radioname.push([])
                    this.form.checkboxnum.push(2);
                    this.form.checkboxname.push([])
                    this.form.selectnum.push(2);
                    this.form.selectname.push([]);
    
    
                },
                //删除组件
                delectdiv() {
                    if(this.form.num>1){
                        this.form.num -= 1;
                        this.form.inputBT.pop();
                        this.form.radionum.pop();
                        this.form.radioname.pop();
                        this.form.checkboxnum.pop();
                        this.form.checkboxname.pop()
                        this.form.selectnum.pop();
                        this.form.selectname.pop();
                    }
    
                },
                //增加单选按钮选项,实时更新数组用$set
                addradio(i) {
                    this.$set(this.radionum, i, this.radionum[i] + 1)
                    // this.radionum[i] +=1;
    
                },
                deleteradio(i) {
                    this.$set(this.radionum, i, this.radionum[i] - 1)
                },
    
                //增加多选按钮选项
                addcheckbox(i) {
                    this.$set(this.checkboxnum, i, this.checkboxnum[i] + 1)
                    // this.radionum[i] +=1;
    
                },
                deletecheckbox(i) {
                    this.$set(this.checkboxnum, i, this.checkboxnum[i] - 1)
                },
    
                //增加下拉框选项
                addselect(i) {
                    this.$set(this.selectnum, i, this.selectnum[i] + 1)
                    // this.radionum[i] +=1;
    
                },
                deleteselect(i) {
                    this.$set(this.selectnum, i, this.selectnum[i] - 1)
                },
    
                tijiao() {
                    console.log(this.inputBT)
                    console.log(this.value)
                    // console.log(this.radioname)
                    // console.log(this.checkboxname)
                    // console.log(this.selectname)
                    this.formrule=[];
                    for(let i=1;i<this.inputBT.length;i++){
                        console.log(this.value[i])
    
                        if(this.value[i]=='radio'){
    
                            let h = (this.radioname[i].length)//3
    
                            let options=[];
                            for(let j =1;j<h;j++){
                                options.push(
                                    {value:this.radioname[i][j],label:this.radioname[i][j]},
                                )
    
    
                            }
    
    
                            this.formrule.push({
                                type:this.value[i],
                                field:this.inputBT[i],
                                title:this.inputBT[i],
                                options:options,
    
                            },)
    
    
    
                        }else if(this.value[i]=='checkbox'){
                            let h = (this.checkboxname[i].length)//3
    
                            let options=[];
                            for(let j =1;j<h;j++){
                                options.push(
                                    {value:this.checkboxname[i][j],label:this.checkboxname[i][j]},
                                )
    
    
                            }
    
    
                            this.formrule.push({
                                type:this.value[i],
                                field:this.inputBT[i],
                                title:this.inputBT[i],
                                options:options,
    
                            },)
    
                        }else if(this.value[i]=='select'){
                            let h = (this.selectname[i].length)//3
    
                            let options=[];
                            for(let j =1;j<h;j++){
                                options.push(
                                    {value:this.selectname[i][j],label:this.selectname[i][j]},
                                )
    
    
                            }
    
    
                            this.formrule.push({
                                type:this.value[i],
                                field:this.inputBT[i],
                                title:this.inputBT[i],
                                options:options,
    
                            },)
    
                        }else {
                            this.formrule.push({
                                type:this.value[i],
                                field:this.inputBT[i],
                                title:this.inputBT[i]
                            },)
                            console.log(this.formrule)
    
                        }
                    }
                    this.index2=1;
                    console.log(this.formrule)
    
                },
                onSubmit1(formData){
                    alert(JSON.stringify(formData));
                },
                changeindex2(msg){
                    this.index2=msg;
                },
                changeindex(msg){
                    this.$emit("NewIndex",msg)
                }
            }
        }
    </script>
    
    <style>
      .radio .el-input__inner {
        width: 220px;
        border-top-width: 0px;
        border-left-width: 0px;
        border-right-width: 0px;
        border-bottom-width: 1px;
        /*outline: medium;*/
      }
      .radio1 .el-input__inner {
        width: 100%;
        border-top-width: 0px;
        border-left-width: 0px;
        border-right-width: 0px;
        border-bottom-width: 1px;
        /*outline: medium;*/
      }
      .textarea .el-textarea__inner {
        width: 100%;
        border-top-width: 0px;
        border-left-width: 0px;
        border-right-width: 0px;
        border-bottom-width: 1px;
        /*outline: medium;*/
      }
    </style>
    
    

    NewForm.vue可以作为一个模板,只需要在其他页面导入就可以使用了。表单的生成规则在formrule中,可以放在form-create中直接使用。

    展开全文
  • 自定义表单设计器演示程序

    热门讨论 2020-06-16 23:30:29
    自定义表单设计器的演示程序,提供了2个示例模板,如果感兴趣,再下载自定义表单设计器演示版源码(C#)。源码下载地址:http://download.csdn.net/source/3043185
  • 在上一节自定义表单环境搭建好以后,我就正式开始尝试自己创建表单,在后台的处理就比较常规,主要是针对ueditor插件的功能在前端进行修改。 由于自己的前端相关技术太渣,因此好多东西都不会用,导致修改实现的...

    在上一节自定义表单环境搭建好以后,我就正式开始尝试自己创建表单,在后台的处理就比较常规,主要是针对ueditor插件的功能在前端进行修改。


    由于自己的前端相关技术太渣,因此好多东西都不会用,导致修改实现的过程也是破费了一番功夫,头皮发麻了好几天。

    既然是用别人的插件进行修改,那么我想如果只是单独的贴出我修改后的代码,可能没有前后进行对比好理解,因此这里就把原代码和修改后的同时对比着贴出,以便于朋友们能从对比中更快的得到启发。

    一、首先是前台创建表单,原文件示例是所有代码直接都写在了index.html文件中,文件在文章最后:

    我在修改的过程中感觉这个代码太长,貌似有点杂乱,因此就自作主张的把部分内容提取到了新建的js文件中,还有部分我觉得无关紧要的东西也进行了删除,然后我的index.html代码如下:


    [html] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. <!DOCTYPE HTML>  
    2. <html>  
    3.  <head>  
    4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
    7.     <link href="css/bootstrap/css/bootstrap.css?2023" rel="stylesheet" type="text/css" />  
    8.     <link href="css/site.css?2023" rel="stylesheet" type="text/css" />  
    9.     <link href="my_css/a.css" rel="stylesheet" type="text/css" />  
    10.     <script type="text/javascript">  
    11.         var _root='http://form/index.php?s=/',_controller = 'index';  
    12.     </script>   
    13.  </head>  
    14. <body style="margin:0">  
    15. <!-- fixed navbar -->  
    16. <!-- Docs page layout -->  
    17. <div style="width:100%;height:60px;background-color:#ccf;border:1px solid blue;text-decoration:none">  
    18.      <img src="images/activiti.png" style="width:20%;height:98%;overflow:hidden;float:left"/>  
    19.      <ul style="margin-left:30px;margin-top:10px; padding: 0px; font-size: 30px; width:60%;overflow:hidden;float:left">  
    20.         <li><a href="#" onclick="toAdd();">新增表单</a></li>  
    21.         <li> | </li>  
    22.         <li><a href="#" onclick="formList();">表单列表</a></li>  
    23.      </ul>  
    24. </div>  
    25. <div id="idv1" style="width:100%;position: absolute;height:auto">  
    26. <div style="width:70px;height:550px;position:relative;float:left;border:1px solid blue;background-color:#ccf">  
    27.     
    28. </div>  
    29. <div id="formDiv" style="width:89%;height:auto;position:relative;float:left;margin-left:10px;margin-top:10px;">  
    30.   
    31.   
    32. <div class="container">  
    33. <form method="post" id="saveform" name="saveform" action="/index.php?s=/index/parse.html">  
    34. <input type="hidden" name="fields" id="fields" value="0">  
    35. <div style="width:98%;height:510px;margin-top:20px;border:3px solid grey">  
    36.   <p style="margin-top:10px;font-size:30px" >表单名称:<input type="text" id="formType"></input></p>  
    37.   <hr style="height:5px;border:none;border-top:5px ridge green;"/>  
    38.   <p style="margin-top:10px;font-size:30px" >表单设计:</p>  
    39.  <div >  
    40. <p style="left:30px">  
    41.         <button type="button" onclick="leipiFormDesign.exec('text');" class="btn btn-info">文本框</button>  
    42.         <button type="button" onclick="leipiFormDesign.exec('textarea');" class="btn btn-info">多行文本</button>  
    43.         <button type="button" onclick="leipiFormDesign.exec('select');" class="btn btn-info">下拉菜单</button>  
    44.         <button type="button" onclick="leipiFormDesign.exec('radios');" class="btn btn-info">单选框</button>  
    45.         <button type="button" onclick="leipiFormDesign.exec('checkboxs');" class="btn btn-info">复选框</button>         
    46.         <button type="button" onclick="leipiFormDesign.exec('listctrl');" class="btn btn-info">列表控件</button>  
    47.        <!--   <button type="button" οnclick="leipiFormDesign.findForm();" class="btn btn-info">form</button>-->  
    48. </p>  
    49.   
    50.   
    51. </div>  
    52. <!-- afsddddddddd -->  
    53. <div >  
    54. <script id="myFormDesign" type="text/plain" style="width:99.8%;">  
    55. </script>  
    56. </div>     
    57. </div>  
    58. <!-- afsddddddddd -->  
    59. <div class="row">  
    60.   
    61.   
    62. </div><!--end row-->  
    63. </form>  
    64. </div><!--end container-->  
    65. <script type="text/javascript" charset="utf-8" src="js/jquery-1.7.2.min.js?2023"></script>  
    66. <script type="text/javascript" charset="utf-8" src="js/ueditor/ueditor.config.js?2023"></script>  
    67. <script type="text/javascript" charset="utf-8" src="js/ueditor/ueditor.all.js?2023"> </script>  
    68. <script type="text/javascript" charset="utf-8" src="js/ueditor/lang/zh-cn/zh-cn.js?2023"></script>  
    69. <script type="text/javascript" charset="utf-8" src="js/ueditor/formdesign/leipi.formdesign.v4.js?2023"></script>  
    70. <!-- script start-->    
    71. <script type="text/javascript" charset="utf-8" src="my_js/addForm.js"></script>  
    72. <!-- script end -->  
    73. <div style="width:1px;height:1px">  
    74.   <script type="text/javascript">  
    75.   var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");  
    76.   document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F1e6fd3a46a5046661159c6bf55aad1cf' type='text/javascript'%3E%3C/script%3E"));  
    77.   </script>  
    78. </div>  
    79.   
    80.   
    81. </div>  
    82. </div>  
    83. </body>  
    84. </html>  

    相关的js文件命名为addForm.js如下:


    [javascript] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. function toAdd(){  
    2.     window.location.href="./";   
    3. };  
    4. function formList(){  
    5.     window.location.href="my_views/formList.html";   
    6. };  
    7.   
    8.   
    9. var leipiEditor = UE.getEditor('myFormDesign',{  
    10.             toolleipi:true,//是否显示,设计器的 toolbars  
    11.             textarea: 'design_content',     
    12.             //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个  
    13.            toolbars:[[  
    14.             ]],  
    15.             //关闭字数统计  
    16.             wordCount:false,  
    17.             //关闭elementPath  
    18.             elementPathEnabled:false,  
    19.             //默认的编辑区域高度  
    20.             initialFrameHeight:300  
    21.             //,iframeCssUrl:"css/bootstrap/css/bootstrap.css" //引入自身 css使编辑器兼容你网站css  
    22.             //更多其他参数,请参考ueditor.config.js中的配置项  
    23.         });  
    24.   
    25.   
    26.  var leipiFormDesign = {  
    27.     findForm : function(){  
    28.         window.location.href="my_views/formList.html";  
    29.     },  
    30.     /*执行控件*/  
    31.     exec : function (method) {  
    32.         leipiEditor.execCommand(method);  
    33.     },  
    34.     /* 
    35.         Javascript 解析表单 
    36.         template 表单设计器里的Html内容 
    37.         fields 字段总数 
    38.     */  
    39.    parse_form:function(template,fields)  
    40.     {  
    41.         //正则  radios|checkboxs|select 匹配的边界 |--|  因为当使用 {} 时js报错  
    42.         var preg =  /(\|-<span(((?!<span).)*leipiplugins=\"(radios|checkboxs|select)\".*?)>(.*?)<\/span>-\||<(img|input|textarea|select).*?(<\/select>|<\/textarea>|\/>))/gi,preg_attr =/(\w+)=\"(.?|.+?)\"/gi,preg_group =/<input.*?\/>/gi;  
    43.         if(!fields) fields = 0;  
    44.         var template_parse = template,template_data = new Array(),add_fields=new Object(),checkboxs=0;  
    45.         var pno = 0;  
    46.         template.replace(preg, function(plugin,p1,p2,p3,p4,p5,p6){  
    47.             var parse_attr = new Array(),attr_arr_all = new Object(),name = '', select_dot = '' , is_new=false;  
    48.             var p0 = plugin;  
    49.             var tag = p6 ? p6 : p4;  
    50.             //alert(tag + " \n- t1 - "+p1 +" \n-2- " +p2+" \n-3- " +p3+" \n-4- " +p4+" \n-5- " +p5+" \n-6- " +p6);  
    51.             if(tag == 'radios' || tag == 'checkboxs')  
    52.             {  
    53.                 plugin = p2;  
    54.             }else if(tag == 'select')  
    55.             {  
    56.                 plugin = plugin.replace('|-','');  
    57.                 plugin = plugin.replace('-|','');  
    58.             }  
    59.             plugin.replace(preg_attr, function(str0,attr,val) {  
    60.                     if(attr=='name')  
    61.                     {  
    62.                         if(val=='leipiNewField')  
    63.                         {  
    64.                             is_new=true;  
    65.                             fields++;  
    66.                             val = 'data_'+fields;  
    67.                         }  
    68.                         name = val;  
    69.                     }  
    70.                       
    71.                     if(tag=='select' && attr=='value')  
    72.                     {  
    73.                         if(!attr_arr_all[attr]) attr_arr_all[attr] = '';  
    74.                         attr_arr_all[attr] += select_dot + val;  
    75.                         select_dot = ',';  
    76.                     }else  
    77.                     {  
    78.                         attr_arr_all[attr] = val;  
    79.                     }  
    80.                     var oField = new Object();  
    81.                     oField[attr] = val;  
    82.                     parse_attr.push(oField);  
    83.             })   
    84.             /*alert(JSON.stringify(parse_attr));return;*/  
    85.              if(tag =='checkboxs'/*复选组  多个字段 */  
    86.              {  
    87.                 plugin = p0;  
    88.                 plugin = plugin.replace('|-','');  
    89.                 plugin = plugin.replace('-|','');  
    90.                 var name = 'checkboxs_'+checkboxs;  
    91.                 attr_arr_all['parse_name'] = name;  
    92.                 attr_arr_all['name'] = '';  
    93.                 attr_arr_all['value'] = '';  
    94.                   
    95.                 attr_arr_all['content'] = '<span leipiplugins="checkboxs"  title="'+attr_arr_all['title']+'">';  
    96.                 var dot_name ='', dot_value = '';  
    97.                 p5.replace(preg_group, function(parse_group) {  
    98.                     var is_new=false,option = new Object();  
    99.                     parse_group.replace(preg_attr, function(str0,k,val) {  
    100.                         if(k=='name')  
    101.                         {  
    102.                             if(val=='leipiNewField')  
    103.                             {  
    104.                                 is_new=true;  
    105.                                 fields++;  
    106.                                 val = 'data_'+fields;  
    107.                             }  
    108.   
    109.   
    110.                             attr_arr_all['name'] += dot_name + val;  
    111.                             dot_name = ',';  
    112.   
    113.   
    114.                         }  
    115.                         else if(k=='value')  
    116.                         {  
    117.                             attr_arr_all['value'] += dot_value + val;  
    118.                             dot_value = ',';  
    119.   
    120.   
    121.                         }  
    122.                         option[k] = val;      
    123.                     });  
    124.                       
    125.                     if(!attr_arr_all['options']) attr_arr_all['options'] = new Array();  
    126.                     attr_arr_all['options'].push(option);  
    127.                     //if(!option['checked']) option['checked'] = '';  
    128.                     var checked = option['checked'] !=undefined ? 'checked="checked"' : '';  
    129.                     attr_arr_all['content'] +='<input type="checkbox" name="'+option['name']+'" value="'+option['value']+'"  '+checked+'/>'+option['value']+' ';  
    130.   
    131.   
    132.                     if(is_new)  
    133.                     {  
    134.                         var arr = new Object();  
    135.                         arr['name'] = option['name'];  
    136.                         arr['leipiplugins'] = attr_arr_all['leipiplugins'];  
    137.                         add_fields[option['name']] = arr;  
    138.                     }  
    139.                 });  
    140.                 attr_arr_all['content'] += '</span>';  
    141.   
    142.   
    143.                 //parse  
    144.                 template = template.replace(plugin,attr_arr_all['content']);  
    145.                 template_parse = template_parse.replace(plugin,'{'+name+'}');  
    146.                 template_parse = template_parse.replace('{|-','');  
    147.                 template_parse = template_parse.replace('-|}','');  
    148.                 template_data[pno] = attr_arr_all;  
    149.                 checkboxs++;  
    150.   
    151.   
    152.              }else if(name)  
    153.             {  
    154.                 if(tag =='radios'/*单选组  一个字段*/  
    155.                 {  
    156.                     plugin = p0;  
    157.                     plugin = plugin.replace('|-','');  
    158.                     plugin = plugin.replace('-|','');  
    159.                     attr_arr_all['value'] = '';  
    160.                     attr_arr_all['content'] = '<span leipiplugins="radios" name="'+attr_arr_all['name']+'" title="'+attr_arr_all['title']+'">';  
    161.                     var dot='';  
    162.                     p5.replace(preg_group, function(parse_group) {  
    163.                         var option = new Object();  
    164.                         parse_group.replace(preg_attr, function(str0,k,val) {  
    165.                             if(k=='value')  
    166.                             {  
    167.                                 attr_arr_all['value'] += dot + val;  
    168.                                 dot = ',';  
    169.                             }  
    170.                             option[k] = val;      
    171.                         });  
    172.                         option['name'] = attr_arr_all['name'];  
    173.                         if(!attr_arr_all['options']) attr_arr_all['options'] = new Array();  
    174.                         attr_arr_all['options'].push(option);  
    175.                         //if(!option['checked']) option['checked'] = '';  
    176.                         var checked = option['checked'] !=undefined ? 'checked="checked"' : '';  
    177.                         attr_arr_all['content'] +='<input type="radio" name="'+attr_arr_all['name']+'" value="'+option['value']+'"  '+checked+'/>'+option['value']+' ';  
    178.   
    179.   
    180.                     });  
    181.                     attr_arr_all['content'] += '</span>';  
    182.   
    183.   
    184.                 }else  
    185.                 {  
    186.                     attr_arr_all['content'] = is_new ? plugin.replace(/leipiNewField/,name) : plugin;  
    187.                 }  
    188.                 template = template.replace(plugin,attr_arr_all['content']);  
    189.                 template_parse = template_parse.replace(plugin,'{'+name+'}');  
    190.                 template_parse = template_parse.replace('{|-','');  
    191.                 template_parse = template_parse.replace('-|}','');  
    192.                 if(is_new)  
    193.                 {  
    194.                     var arr = new Object();  
    195.                     arr['name'] = name;  
    196.                     arr['leipiplugins'] = attr_arr_all['leipiplugins'];  
    197.                     add_fields[arr['name']] = arr;  
    198.                 }  
    199.                 template_data[pno] = attr_arr_all;     
    200.             }  
    201.             pno++;  
    202.         })  
    203.         var parse_form = new Object({  
    204.             'fields':fields,//总字段数  
    205.             'template':template,//完整html  
    206.             'parse':template_parse,//控件替换为{data_1}的html  
    207.             'data':template_data,//控件属性  
    208.             'add_fields':add_fields//新增控件  
    209.         });  
    210.         return JSON.stringify(parse_form);  
    211.     },  
    212.     /*type  =  save 保存设计 versions 保存版本  close关闭 */  
    213.     fnCheckForm : function ( type ) {  
    214.         var formType=document.getElementById("formType").value;  
    215.         if(leipiEditor.queryCommandState( 'source' ))  
    216.             leipiEditor.execCommand('source');//切换到编辑模式才提交,否则有bug     
    217.         if(leipiEditor.hasContents()){  
    218.             leipiEditor.sync();/*同步内容*/  
    219.             //--------------以下仅参考-----------------------------------------------------------------------------------------------------  
    220.             var type_value='',formid=0,fields=$("#fields").val(),formeditor='';  
    221.   
    222.   
    223.             iftypeof type!=='undefined' ){  
    224.                 type_value = type;  
    225.             }  
    226.             console.log(document.getElementById("formType"));  
    227.             //获取表单设计器里的内容  
    228.             formeditor=leipiEditor.getContent();  
    229.             //解析表单设计器控件  
    230.             var parse_form = this.parse_form(formeditor,fields);  
    231.              //异步提交数据  
    232.              $.ajax({  
    233.                 type: 'POST',  
    234.                 url : '/webFormTest/addForm.do',  
    235.                 dataType : 'html',  
    236.                 async:false,  
    237.                 //contentType: 'application/json;charset=utf-8',  
    238.                 data : {'type' : type_value,'formid':formid,'parse_form':parse_form,"formType":formType},        
    239.                 success : function(data){  
    240.                     alert("保存成功");  
    241.                     window.location.href ="./my_views/formList.html";  
    242.                 }  
    243.             });  
    244.               
    245.         } else {  
    246.             alert('表单内容不能为空!')  
    247.             $('#submitbtn').button('reset');  
    248.             return false;  
    249.         }  
    250.     } ,  
    251.     /*预览表单*/  
    252.     fnReview : function (){  
    253.         if(leipiEditor.queryCommandState( 'source' ))  
    254.             leipiEditor.execCommand('source');/*切换到编辑模式才提交,否则部分浏览器有bug*/  
    255.         if(leipiEditor.hasContents()){  
    256.             leipiEditor.sync();       /*同步内容*/  
    257.             //--------------以下仅参考-------------------------------------------------------------------  
    258.             /*设计form的target 然后提交至一个新的窗口进行预览*/  
    259.             var type_value='',formid=0,fields=$("#fields").val(),formeditor='';  
    260.             var formType=document.getElementById("formType").value;  
    261.             iftypeof type!=='undefined' ){  
    262.                 type_value = type;  
    263.             }  
    264.             //获取表单设计器里的内容  
    265.             formeditor=leipiEditor.getContent();  
    266.             //解析表单设计器控件  
    267.             var parse_form = this.parse_form(formeditor,fields);  
    268.             var forms=JSON.parse(parse_form);  
    269.             console.log(forms);  
    270.             console.log(typeof forms);  
    271.             console.log(forms.template);  
    272.             var forms1=forms.template;  
    273.                 win_parse=window.open('','','width=800,height=400,alwaysRaised=yes,top=100,left=200');  
    274.                 //win_parse=window.open('','mywin',"menubar=0,toolbar=0,status=0,resizable=1,left=0,top=0,scrollbars=1,width=" +(screen.availWidth-10) + ",height=" + (screen.availHeight-50) + "\"");  
    275.                 var str='<div style="width:500px;height:300px;border:1px solid grey">'+forms1+'</div>';  
    276.                 win_parse.document.write(forms1);  
    277.                 win_parse.focus();       
    278.         } else {  
    279.             alert('表单内容不能为空!');  
    280.             return false;  
    281.         }  
    282.     }  
    283. };  

    那么这里需要着重说明的就是js文件,在原文件中大家可以看到js也是写在html中的,最重要的是到了保存和预览的时候,都变了请用户自已处理:
    alert("你点击了保存,这里可以异步提交,请自行处理....");
    alert("你点击了预览,请自行处理....");

    于是我在对插件封装的数据进行了一定分析后就自行解决了这两个问题,也就是主要修改的地方。


    二、前台表单创建、预览完毕,要能实现以后都随时调用的功能,自然就需要存储到数据库中,前台似乎也能直接操作数据库,但是我本身是做后台的,因此就直接用了后台和数据库交互。

    后太也分别创建了model实体类、控制层controller、接口service、接口实现类serviceImp。因为这次主要是实现前台功能,我就把重心放在了前台,所以后台没有dao层。
    原本我是连service都不准备建立的,只是后来为了测试方便,还是建立了,因此各层看起来其实很混乱,该写在service的代码写在了controller,依次类推。
    代码分别如下:


    (1)、controller层,对前台传入的字符串进行了一定处理:
    [java] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. package formControllers;  
    2. import java.util.Map;  
    3. import javax.servlet.http.HttpServletRequest;  
    4. import org.springframework.beans.factory.annotation.Autowired;  
    5. import org.springframework.stereotype.Controller;  
    6. import org.springframework.web.bind.annotation.RequestMapping;  
    7. import org.springframework.web.bind.annotation.RequestMethod;  
    8. import org.springframework.web.bind.annotation.ResponseBody;  
    9. import services.FormService;  
    10.   
    11.   
    12. @Controller  
    13. public class FormController {  
    14.     @Autowired  
    15.     FormService formService;  
    16.   
    17.   
    18.     @RequestMapping(value = "/addForm.do", method = RequestMethod.POST)  
    19.     @ResponseBody  
    20.     public Object addForm(HttpServletRequest request) {  
    21.         // String type_value = request.getParameter("type_value");  
    22.         // String formid = request.getParameter("formid");  
    23.         String parse_form = request.getParameter("parse_form");  
    24.         String formType = request.getParameter("formType");  
    25.         System.out.println(formType);  
    26.         int index1 = parse_form.indexOf("\"template\":");  
    27.         int index2 = parse_form.indexOf("\"parse\":");  
    28.         String string = parse_form.substring(index1 + 12, index2 - 6);  
    29.         string = string.replace("\\", "");  
    30.         string = string.replace("{""");  
    31.         string = string.replace("}""");  
    32.         string = string.replace("|""");  
    33.         string = string.replace("-""");  
    34.         formService.addForm(formType, string);  
    35.         return string;  
    36.     }  
    37. }  


    (2)、service层存入数据库:


    [java] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. Service:  
    2. package services;  
    3. import java.util.Map;  
    4.   
    5.   
    6. public interface FormService {  
    7.     public Object addForm(String formType, String string);  
    8. }  


    serviceImp代码:

    [java] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. package servicesImp;  
    2. import java.sql.Connection;  
    3. import java.sql.DriverManager;  
    4. import java.sql.PreparedStatement;  
    5. import java.sql.ResultSet;  
    6. import java.sql.Statement;  
    7. import java.util.ArrayList;  
    8. import java.util.Date;  
    9. import java.util.HashMap;  
    10. import java.util.Map;  
    11. import org.springframework.stereotype.Service;  
    12. import services.FormService;  
    13. @Service("FormService")  
    14. public class FormServiceImp implements FormService {  
    15.   
    16.   
    17.     /** 
    18.      * 新增表单 
    19.      *  
    20.      * @author:tuzongxun 
    21.      * @Title: addForm 
    22.      * @Description: TODO 
    23.      * @param @param formType 
    24.      * @param @param string 
    25.      * @param @return 
    26.      * @date Mar 28, 2016 4:30:18 PM 
    27.      * @throws 
    28.      */  
    29.     public Object addForm(String formType, String string) {  
    30.         System.out.println(string);  
    31.         try {  
    32.             Connection connection = this.getDb();  
    33.             PreparedStatement ps = connection  
    34.                     .prepareStatement("insert into  formtest(formId,formType,form) values(?,?,?)");  
    35.             String formId = new Date().getTime() + "";  
    36.             ps.setString(1, formId);  
    37.             ps.setString(2, formType);  
    38.             ps.setString(3, string);  
    39.             ps.executeUpdate();  
    40.             connection.close();  
    41.         } catch (Exception e) {  
    42.             e.printStackTrace();  
    43.         }  
    44.         return string;  
    45.     }  
    46.   
    47.   
    48.     public Connection getDb() {  
    49.         Connection connection = null;  
    50.         try {  
    51.             Class.forName("com.mysql.jdbc.Driver");  
    52.             connection = DriverManager.getConnection(  
    53.                     "jdbc:mysql://localhost:3306/formtest""root""123456");  
    54.         } catch (Exception e) {  
    55.             e.printStackTrace();  
    56.         }  
    57.         return connection;  
    58.     }  
    [java] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. /**链接数据库*/<p align="left"><strong><span style="color:#7F0055;">public</span></strong> Connection getDb() {</p><p align="left">       Connection <span style="color:#6A3E3E;">connection</span> = <strong><span style="color:#7F0055;">null</span></strong>;</p><p align="left">       <strong><span style="color:#7F0055;">try</span></strong> {</p><p align="left">           Class.<em>forName</em>(<span style="color:#2A00FF;">"com.mysql.jdbc.Driver"</span>);</p><p align="left">           <span style="color:#6A3E3E;">connection</span> = DriverManager.<em>getConnection</em>(</p><p align="left">                  <span style="color:#2A00FF;">"jdbc:mysql://localhost:3306/formtest"</span>, <span style="color:#2A00FF;">"root"</span>, <span style="color:#2A00FF;">"123456"</span>);</p><p align="left">       } <strong><span style="color:#7F0055;">catch</span></strong> (Exception <span style="color:#6A3E3E;">e</span>) {</p><p align="left">           <span style="color:#6A3E3E;">e</span>.printStackTrace();</p><p align="left">       }</p><p align="left">       <strong><span style="color:#7F0055;">return</span></strong> <span style="color:#6A3E3E;">connection</span>;</p><p align="left">    }</p><p align="left"> }</p>  



    Model实体:

    [java] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. package models;  
    2. public class FormModel {  
    3.     // 'type' : type_value,'formid':formid,'parse_form':parse_form  
    4.     private String formId;  
    5.     private String type;  
    6.     private Integer formid;  
    7.     private String parse_form;  
    8.     private String formType;  
    9.   
    10.   
    11.     public String getType() {  
    12.         return type;  
    13.     }  
    14.   
    15.   
    16.     public void setType(String type) {  
    17.         this.type = type;  
    18.     }  
    19.   
    20.   
    21.     public int getFormid() {  
    22.         return formid;  
    23.     }  
    24.   
    25.   
    26.     public String getParse_form() {  
    27.         return parse_form;  
    28.     }  
    29.   
    30.   
    31.     public void setFormid(Integer formid) {  
    32.         this.formid = formid;  
    33.     }  
    34.   
    35.   
    36.     public void setParse_form(String parse_form) {  
    37.         this.parse_form = parse_form;  
    38.     }  
    39.   
    40.   
    41.     public String getFormType() {  
    42.         return formType;  
    43.     }  
    44.   
    45.   
    46.     public void setFormType(String formType) {  
    47.         this.formType = formType;  
    48.     }  
    49.   
    50.   
    51.     public String getFormId() {  
    52.         return formId;  
    53.     }  
    54.   
    55.   
    56.     public void setFormId(String formId) {  
    57.         this.formId = formId;  
    58.     }  
    59.   
    60.   
    61.     @Override  
    62.     public String toString() {  
    63.         return "FormModel [formId=" + formId + ", type=" + type + ", formid="  
    64.                 + formid + ", parse_form=" + parse_form + ", formType="  
    65.                 + formType + "]";  
    66.     }  
    67.   
    68.   
    69. }  

    页面效果如图:




    原文index.html文件代码:

    [html] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. <!DOCTYPE HTML>  
    2. <html>  
    3.  <head>  
    4.       
    5.     <title>WEB表单设计器 Ueditor Formdesign Plugins -leipi.org</title>  
    6.         <meta name="keyword" content="ueditor Formdesign plugins,formdesigner,ueditor扩展,web表单设计器,高级表单设计器,Leipi Form Design,web form设计器,web form designer,javascript jquery ueditor php表单设计器,formbuilder">  
    7.         <meta name="description" content="Ueditor Web Formdesign Plugins 扩展即WEB表单设计器扩展,它通常在、OA系统、问卷调查系统、考试系统、等领域发挥着重要作用,你可以在此基础上任意修改使功能无限强大!">  
    8.   
    9.   
    10.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    11.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    12.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
    13.     <meta name="author" content="leipi.org">  
    14.     <link href="css/bootstrap/css/bootstrap.css?2023" rel="stylesheet" type="text/css" />  
    15.     <!--[if lte IE 6]>  
    16.     <link rel="stylesheet" type="text/css" href="css/bootstrap/css/bootstrap-ie6.css?2023">  
    17.     <![endif]-->  
    18.     <!--[if lte IE 7]>  
    19.     <link rel="stylesheet" type="text/css" href="css/bootstrap/css/ie.css?2023">  
    20.     <![endif]-->  
    21.     <link href="css/site.css?2023" rel="stylesheet" type="text/css" />  
    22.     <script type="text/javascript">  
    23.         var _root='http://form/index.php?s=/',_controller = 'index';  
    24.     </script>  
    25.       
    26. <!--style>  
    27.     .list-group-item{padding:0px;}  
    28. </style-->  
    29.   
    30.   
    31.  </head>  
    32. <body>  
    33.   
    34.   
    35. <!-- fixed navbar -->  
    36. <div class="navbar navbar-inverse navbar-fixed-top">  
    37.   <div class="navbar-inner">  
    38.     <div class="container">  
    39.       <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">  
    40.         <span class="icon-bar"></span>  
    41.         <span class="icon-bar"></span>  
    42.         <span class="icon-bar"></span>  
    43.       </button>  
    44.       <a class="brand" href="http://www.leipi.org" target="_blank">雷劈网</a>  
    45.       <div class="nav-collapse collapse">  
    46.         <ul class="nav">  
    47.             <li class="active"><a href="/">表单设计器</a></li>  
    48.             <li ><a href="http://formdesign.leipi.org/doc.html">文档</a></li>  
    49.             <li ><a href="http://formdesign.leipi.org/demo.html">实例</a></li>  
    50.             <li ><a href="http://formdesign.leipi.org/downloads.html">下载</a></li>  
    51.             <li ><a href="http://formdesign.leipi.org/feedback.html">公开讨论</a></li>  
    52.         </ul>  
    53.       </div>  
    54.     </div>  
    55.   </div>  
    56. </div>  
    57.   
    58.   
    59.   
    60.   
    61.       
    62.   
    63.   
    64.   
    65.   
    66. <!-- Docs page layout -->  
    67. <div class="bs-header" id="content">  
    68.   <div class="container">  
    69.   
    70.   
    71.     <h1><img src="js/ueditor/formdesign/images/leipi_formdesign.png" width="64"/>WEB表单设计器 <small>Ueditor1.4.2 + Formdesign4.1.x</small></h1>  
    72.     <p>  
    73.         感谢大家使用,如有任何意见或建议,请务必告知,<a href="#bs-footer">免责声明</a>。  
    74.         <p>  
    75.         复制分享:<input type="text" value="大家都在用雷劈网WEB表单设计器,你去官网看看 http://formdesign.leipi.org/" style="width:80%" onclick="this.select()"/>  
    76.         </p>  
    77.         交流Q群: 143263697  
    78.     </p>  
    79.       
    80.   </div>  
    81. </div>  
    82.   
    83.   
    84.   
    85.   
    86. <div class="container">  
    87. <form method="post" id="saveform" name="saveform" action="/index.php?s=/index/parse.html">  
    88. <input type="hidden" name="fields" id="fields" value="0">  
    89. <div class="row">  
    90.   
    91.   
    92.     <div class="well well-small">  
    93. <span class="pull-right">  
    94.     <a href="http://formdesign.leipi.org/demo.html" class="btn btn-success btn-small">使用实例演示</a>  
    95. </span>  
    96.   
    97.   
    98. <p>  
    99.  一栏布局:<br /><br />  
    100.         <button type="button" onclick="leipiFormDesign.exec('text');" class="btn btn-info">文本框</button>  
    101.         <button type="button" onclick="leipiFormDesign.exec('textarea');" class="btn btn-info">多行文本</button>  
    102.         <button type="button" onclick="leipiFormDesign.exec('select');" class="btn btn-info">下拉菜单</button>  
    103.         <button type="button" onclick="leipiFormDesign.exec('radios');" class="btn btn-info">单选框</button>  
    104.         <button type="button" onclick="leipiFormDesign.exec('checkboxs');" class="btn btn-info">复选框</button>  
    105.         <button type="button" onclick="leipiFormDesign.exec('macros');" class="btn btn-info">宏控件</button>  
    106.         <button type="button" onclick="leipiFormDesign.exec('progressbar');" class="btn btn-info">进度条</button>  
    107.         <button type="button" onclick="leipiFormDesign.exec('qrcode');" class="btn btn-info">二维码</button>  
    108.         <button type="button" onclick="leipiFormDesign.exec('listctrl');" class="btn btn-info">列表控件</button>  
    109.         <button type="button" onclick="leipiFormDesign.exec('more');" class="btn btn-primary">一起参与...</button>  
    110. </p>  
    111.      </div>  
    112.        
    113. </div>  
    114.   
    115.   
    116.   
    117.   
    118. <div class="alert">  
    119.     <button type="button" class="close" data-dismiss="alert">×</button>  
    120.     <strong>提醒:</strong>单选框和复选框,如:<code>{|-</code>选项<code>-|}</code>两边边界是防止误删除控件,程序会把它们替换为空,请不要手动删除!  
    121. </div>  
    122.   
    123.   
    124.   
    125.   
    126. <div class="row">  
    127.   
    128.   
    129. <div class="span2">  
    130. <ul class="nav nav-list">  
    131.     <li class="nav-header">两栏布局</li>  
    132.     <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('text');" class="btn btn-link">文本框</a></li>  
    133.     <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('textarea');" class="btn btn-link">多行文本</a></li>  
    134.     <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('select');" class="btn btn-link">下拉菜单</a></li>  
    135.     <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('radios');" class="btn btn-link">单选框</a></li>  
    136.     <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('checkboxs');" class="btn btn-link">复选框</a></li>  
    137.     <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('macros');" class="btn btn-link">宏控件</a></li>  
    138.     <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('progressbar');" class="btn btn-link">进度条</a></li>  
    139.     <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('qrcode');" class="btn btn-link">二维码</a></li>  
    140.     <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('listctrl');" class="btn btn-link">列表控件</a></li>  
    141.     <li><a href="javascript:void(0);" onclick="leipiFormDesign.exec('more');" class="btn btn-link">一起参与...</a></li>  
    142.       
    143. </ul>  
    144.   
    145.   
    146. </div>  
    147.   
    148.   
    149. <div class="span10">  
    150.   
    151.   
    152. <script id="myFormDesign" type="text/plain" style="width:100%;">  
    153. <p style="text-align: center;">  
    154.     <br/>  
    155. </p>  
    156. <p style="text-align: center;">  
    157.     <span style="font-size: 24px;">示例表</span>  
    158. </p>  
    159. <table class="table table-bordered">  
    160.     <tbody>  
    161.         <tr class="firstRow">  
    162.             <td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);">  
    163.                 文本框  
    164.             </td>  
    165.             <td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);" width="227">  
    166.                 <input style="text-align: left; width: 150px;" title="文本框" value="雷劈网" name="leipiNewField" orgheight="" orgwidth="150" orgalign="left" orgfontsize="" orghide="0" leipiplugins="text" orgtype="text"/>  
    167.             </td>  
    168.             <td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);" width="85">  
    169.                 下拉菜单  
    170.             </td>  
    171.             <td valign="top" style="border-color: rgb(221, 221, 221);" width="312">  
    172.                 {|-<span leipiplugins="select"><select name="leipiNewField" title="下拉菜单" leipiplugins="select" size="1" orgwidth="150" style="width: 150px;"><option value="下拉">  
    173.                     下拉  
    174.                 </option>  
    175.                 <option value="菜单">  
    176.                     菜单  
    177.                 </option></select>  </span>-|}  
    178.             </td>  
    179.         </tr>  
    180.         <tr>  
    181.             <td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);">  
    182.                 单选  
    183.             </td>  
    184.             <td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);" width="41">  
    185. {|-<span leipiplugins="radios"  title="单选" name="leipiNewField">  
    186.     <input  value="单选1"   type="radio" checked="checked"/>单选1   
    187.     <input  value="单选2"  type="radio"/>单选2   
    188. </span>-|}  
    189.             </td>  
    190.             <td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);" width="85">  
    191.                 复选  
    192.             </td>  
    193.             <td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);" width="312">  
    194.                 {|-<span leipiplugins="checkboxs" title="复选">  
    195.                     <input name="leipiNewField" value="复选1"  type="checkbox" checked="checked"/>复选1   
    196.                     <input name="leipiNewField" value="复选2"  type="checkbox" checked="checked"/>复选2   
    197.                     <input name="leipiNewField" value="复选3"  type="checkbox"/>复选3   
    198.                     </span>-|}  
    199.             </td>  
    200.         </tr>  
    201.         <tr>  
    202.             <td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);">  
    203.                 宏控件  
    204.             </td>  
    205.             <td valign="top" style="border-color: rgb(221, 221, 221);" width="41">  
    206.                 <input name="leipiNewField" type="text" value="{macros}" title="宏控件" leipiplugins="macros" orgtype="sys_date_cn" orghide="0" orgfontsize="12" orgwidth="150" style="font-size: 12px; width: 150px;"/>  
    207.             </td>  
    208.             <td valign="top" style="word-break: break-all; border-color: rgb(221, 221, 221);" width="85">  
    209.                 二维码  
    210.             </td>  
    211.             <td valign="top" style="border-color: rgb(221, 221, 221);" width="312">  
    212.                 <img name="leipiNewField" title="雷劈网" value="http://www.leipi.org" orgtype="url" leipiplugins="qrcode" src="js/ueditor/formdesign/images/qrcode.gif" orgwidth="40" orgheight="40" style="width: 40px; height: 40px;"/>  
    213.             </td>  
    214.         </tr>  
    215.     </tbody>  
    216. </table>  
    217. <p>  
    218.     <input name="leipiNewField" leipiplugins="listctrl" type="text" value="{列表控件}" readonly="readonly" title="采购商品列表" orgtitle="商品名称`数量`单价`小计`描述`" orgcoltype="text`int`int`int`text`" orgunit="```元``" orgsum="0`0`0`1`0`" orgcolvalue="`````" orgwidth="100%" style="width: 100%;"/>