自定义表单的三种方式实现

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

下,

 一种是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
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是一个简单的使用Vue实现自定义表单示例: HTML代码: ``` <div id="app"> <form> <custom-input v-model="name" label="Name"></custom-input> <custom-input v-model="email" label="Email" type="email"></custom-input> <custom-input v-model="password" label="Password" type="password"></custom-input> <custom-checkbox v-model="agree" label="I agree to the Terms and Conditions"></custom-checkbox> <button type="submit">Submit</button> </form> </div> ``` Vue组件代码: ``` Vue.component('custom-input', { props: ['value', 'label', 'type'], template: ` <div> <label>{{ label }}</label> <input v-bind:value="value" v-bind:type="type" v-on:input="$emit('input', $event.target.value)"> </div> ` }); Vue.component('custom-checkbox', { props: ['value', 'label'], template: ` <div> <input type="checkbox" v-bind:checked="value" v-on:change="$emit('input', $event.target.checked)"> <label>{{ label }}</label> </div> ` }); new Vue({ el: '#app', data: { name: '', email: '', password: '', agree: false } }); ``` 这个示例中,我们定义了两个自定义组件:custom-input和custom-checkbox。custom-input用于输入文本,支持自定义标签和类型(默认为text)。custom-checkbox用于显示复选框,支持自定义标签。 在Vue实例中,我们定义了四个数据属性:name、email、password和agree。这些属性分别绑定到自定义组件的value或checked属性中。当用户在表单中输入时,这些数据属性会随之改变。 通过这种方法,我们可以轻松地创建自定义表单,并将数据与Vue实例绑定。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值