.net web 开发平台- 表单设计器 一(web版)

.net web 开发平台- 表单设计器 一(web版)

大家好,又见面了,我是全栈君,祝每个程序员都可以多学几门语言。

         如今为了适应需求的不断变化,动态表单设计器应运而生。它主要是为了满足界面的不断变化和提高开发速度。比如:一些页面客户可能也无法确定页面的终于布局,控件的位置,在哪种情况下显示或不显示等可能须要随时改动。为了应对这些需求而不去多次改动源码进行公布,就能够在项目中使用动态表单设计器。如今分享一下我做的动态表单设计器的设计思路,共同学习。
     想做一个表单设计器,首先要确定是做c/s的还是b/s。我考虑到以后的发展方向是c/s向b/s转化,所以就选择了b/s的方向,并且做b/s比做c/s要简单非常多。在做表单设计器之前,须要先实现各种控件,设计好各控件的各种属性。于是我选择对Ext中的各种控件进行封装,做成满足自己须要的控件。

首先说一下功能:

1.包括一些经经常使用到的控件:文本,超链接,button,文件上传,图片,文本输入框,多行文本输入框,日期,时间,列表框(listBox),下拉列表框(分为:可分页和不可分页两种),复选框,单选列表,复选列表,gridlist表格。当然设计器应该便于扩展,当以后须要其他的控件的时候能够非常方便的加入进去。

2.能够非常方便地对各控件进行操作(剪切,粘贴,复制,删除,位置大小的调整)。

3.能够非常方便的对控件的各属性进行设定。这样须要对控件作改动的时候,尽量做到不须要改动代码,在设计当中做一下改动就能够达到目的。

4.由于一些控件可能须要实现一些特殊的功能,所以须要提供编写js代码的界面。

 

(1)文本:文本控件非常easy,主要是对文本控件的样式和是否隐藏进行设定。

.net web 开发平台- 表单设计器 一(web版)

保存后,訪问的效果:

.net web 开发平台- 表单设计器 一(web版)

2.超链接:超链接须要可以设定打开连接的地址,和打开的方式(本页面打开,新窗体打开,模式窗体打开)

.net web 开发平台- 表单设计器 一(web版)

保存后,訪问的效果:

.net web 开发平台- 表单设计器 一(web版)

3.button:主要是可以设定点击button运行的方法

.net web 开发平台- 表单设计器 一(web版).net web 开发平台- 表单设计器 一(web版)

在脚本界面,能够编写js代码。保存后,訪问的效果例如以下:

.net web 开发平台- 表单设计器 一(web版)

4.文件上传:能够设定上传文件的类型,是否可上传多个文件等

.net web 开发平台- 表单设计器 一(web版)

 

保存后訪问的效果:

.net web 开发平台- 表单设计器 一(web版)

5.复选框

.net web 开发平台- 表单设计器 一(web版)

效果:

.net web 开发平台- 表单设计器 一(web版)

6.图片:

.net web 开发平台- 表单设计器 一(web版)

效果:

.net web 开发平台- 表单设计器 一(web版)

7.输入框:须要能指定可输入数据的类型,并能自己主动验证

.net web 开发平台- 表单设计器 一(web版)

效果

.net web 开发平台- 表单设计器 一(web版)

8.多行文本框

.net web 开发平台- 表单设计器 一(web版)

效果:

.net web 开发平台- 表单设计器 一(web版)

9.日期输入框:须要可以设定日期的格式

.net web 开发平台- 表单设计器 一(web版)

效果

.net web 开发平台- 表单设计器 一(web版)

10.时间输入框:须要可设定日期的格式

.net web 开发平台- 表单设计器 一(web版)

效果:

.net web 开发平台- 表单设计器 一(web版)

 上面的这些控件都是一些简单的基本控件。

 

接下来的是和数据进行交互的控件.这些控件有以下的要求:

1.能设定静态数

2.能通过设定的參数动态的从数据库中读取数据。

3.能设定查询的參数。

4.能设定显示的字段和显示的方式并能实现联动

1.列表控件(listBox)

设定静态数据

.net web 开发平台- 表单设计器 一(web版)

设定动态数据:

.net web 开发平台- 表单设计器 一(web版)

效果:

.net web 开发平台- 表单设计器 一(web版)

 

2.下拉列表框

.net web 开发平台- 表单设计器 一(web版)

 

.net web 开发平台- 表单设计器 一(web版)

3.可动态读去数据可分页的下拉列表框

.net web 开发平台- 表单设计器 一(web版)

效果:

.net web 开发平台- 表单设计器 一(web版)

 

4.单选列表

静态数据

.net web 开发平台- 表单设计器 一(web版)

动态数据

.net web 开发平台- 表单设计器 一(web版)

效果:

.net web 开发平台- 表单设计器 一(web版)

 

5.复选列表

.net web 开发平台- 表单设计器 一(web版)

 .net web 开发平台- 表单设计器 一(web版)

效果:

.net web 开发平台- 表单设计器 一(web版)

6.grildList列表(可设定查询的ajax地址,參数,显示的列)

.net web 开发平台- 表单设计器 一(web版)

.net web 开发平台- 表单设计器 一(web版)

效果

.net web 开发平台- 表单设计器 一(web版)

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/118087.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • 协程概述

    协程概述协程不是进程,也不是线程,它就是一个函数,一个特殊的函数——可以在某个地方挂起,并且可以重新在挂起处继续运行。所以说,协程与进程、线程相比,不是一个维度的概念。一个进程可以包含多个线程,一个线程也可以包含多个协程,也就是说,一个线程内可以有多个那样的特殊函数在运行。但是有一点,必须明确,一个线程内的多个协程的运行是串行的。如果有多核CPU的话,多个进程或一个进程内的多个线程是可以并行运行的,但是一…

    2022年7月27日
  • 食品生物技术学计算机吗,食品生物技术「建议收藏」

    食品生物技术学计算机吗,食品生物技术「建议收藏」三、教学任务食品生物技术系主要承担本科生的课程如下:生物化学、微生物学、食品营养与卫生学、食品生物技术、实验设计与数据处理、综合性实验课等课程。承担生物化工和食品科学专业研究生高等生物化学、高等微生物学、实验动物学、现代生物技术等课程。四、主要研究方向与内容  食品生物技术系主要从事与食品生物技术方向的教学、科研及甜菜分子生物学方向的科研、研究生培养工作。1.食品分子营养与安全1.1食品分子营养学…

    2022年7月11日
  • solidworks常用快捷键命令大全_solidworks怎么设置快捷键

    solidworks常用快捷键命令大全_solidworks怎么设置快捷键为了更好的节约大家的设计时间,小编花了一番功夫为大家整理出了一份SolidWorks的快捷键大全,希望可以帮助到大家。

    2022年9月28日
  • 最佳程序员奖_程序员必读书籍排行榜

    最佳程序员奖_程序员必读书籍排行榜优秀的程序员需要有大量的知识技能储备,读书是获取知识的一个非常重要的途径。每每读到好书,会让人茅塞顿开、醍醐灌顶。以下图书,都可以称得上好书。你会推荐哪些给更广大的程序员呢?文末附有投票,每人可投5本你心中的好书,我们将从参与投票的网友中,选出5位,送上你心中的好书(5本全送哦)~~国外图书推荐C++Prinmer图书推荐理由C++学习头牌 C++领域专家:潘爱民、孟岩作序,代表技术圈鼎力推荐! 一线C++工程师腾讯Milo、微软刘未鹏、陈梓瀚、阿里..

    2022年9月30日
  • keras多层感知器识别手写数字执行预测代码_感知机模型多层神经网络

    keras多层感知器识别手写数字执行预测代码_感知机模型多层神经网络2.Keras建立多层感知器模型2.1简单介绍多层感知器模型注:以下模型及其说明来自于《TensorFlow+Keras深度学习人工智能实践应用》林大贵著以矩阵方式仿真多层感知器模型的工作方式(如下图所示)建立输入与隐藏层的公式:h1=ReLu(x*w1+b1)变量名说明输入层x仿真输入神经元接收外界传送消息,如上图所示,共有784个神经元。隐藏层h1…

    2022年10月9日
  • JWPlayer_nplayer浏览器

    JWPlayer_nplayer浏览器网盘:https://pan.baidu.com/s/1mmtppZSFOni5tLI2TJWKrw<scripttype=”text/javascript”>varthePlayer;//保存当前播放器以便操作$(function(){thePlayer=jwplayer(‘container’).setu…

    2022年10月8日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号