jsp弹窗修改信息_无代码软件开发之请假管理系统开发演示---基本信息添加窗口设计...

【编者注：可以在腾讯课堂搜“尚识信息”进行无代码软件开发技能学习，无需代码，3小时学会开发，5小时学会从开发到测试到部署，2天学会开发全技能，成熟开发者可独立开发几万至百万项目；关注我们公众号，我们会有请假、报销、进销存、ERP系统、设备资产管理等系统的开发演示及功能模块赠送】

假期基本信息录入窗口

无代码软件开发请假管理系统的员工假期基本信息管理页“添加信息”按钮中，我们将放一个弹窗元件，在用户点击“添加信息”按钮时，界面出现以上图片的弹窗，用于输入工号、姓名、年假天数、病假天数、年休天数等信息。开发设计主要是在这个弹窗元件中进行的，弹窗默认是有头部、内容和尾部预定义的对象，默认已有很多元件，但我们需要进行以下修改：弹窗头部我们需要添加样式将弹窗名称居中显示、弹窗名显示文本元件我们需要改为H4的标签(tag属性值)，我们需要将内容区中默认的文本显示元件删除，拖放添加一个列元件，列元件中拖放添加三个行元件，行元件分别拖放添加文本显示元件用于标题显示、拖放入数字输入元件用于式号录入，拖放入文本输入元件用于姓名录入、注意标题文本显示元件和天数输入元件第一个拖放后基本一样的都可以复用方式添加、然后将默认的弹窗底部对象进行居中样式定义并将按钮分别改名为“取消”和“保存”。

这部分样式处理包括头部居中，字号改H4和底部按钮的居中效果，都可以在项目样式文件中统一定义，这样在整个项目中拖入弹窗时就会显示统一定义效果，不需要一个个再进行样式定义。

对每一行中的标题我们在列元件中，拖放添加一个行为处理元件，在此统一做了输入框前的标题名称文本常量传值。对标题和输入框的样式设计是这部分重点，我们视频演示中也进行了多次调试才完成最终效果定义。这部分比较重要，动态图片演示如下：

标题和输入元件样式设计

主要处理过程有以下几个：

添加信息按钮中拖放弹窗元件

弹窗头部默认设计有一个显示弹窗标题的逻辑，这个标题显示的是我们拖入后命名的名称，弹窗可以直接命名为想要的名称如“添加员工假期基本信息”。

弹窗元件头部样式定义为文字居中

双击进入弹窗后，选中头部对象，添加一个居中样式属性，居中一般用text-align:center定义，这个定义对于对象中的按钮和文本显示都是有效的。

弹窗内容区中拖放列元件、行元件、文本显示和输入元件

弹窗中间的内容区中，默认放了一个文本显示元件，我们用不到所以直接删除它，然后拖入列显示元件、拖入行显示元件、行元件中拖放标题显示用的文本显示元件和工号姓名天数输入框元件，如果是数字或文字等同样显示或同样输入类型，可以复用前面放入的元件这样开发起来更快。

用行为元件对标题统一定义并传值

在列元件中，行元件外添加一个行为处理元件，用于生成各输入框前显示的标题，这个地方也可以用于设定输入框内的提示信息，后面我们会用到在此设计输入框不可编辑等功能(如果要修改员工假期信息，员工工号和员工姓名不需修改，所以这两个需设定为输入框不可编辑，后续文章内容中详细说明)。

对每行中的标题元件和输入元件定义样式

对于每个行元件中的显示文本元件和输入框元件，我们需要定义显示样式，注意这部分的样式显示在理解并能熟练运用样式标签后，最好由开发者自定义为样式类放于样式文件中，这样会更加简单快捷地进行样式设计，大大提高开发效率，且整体风格统一，后期修改风格会更简单。我们定义标签样式为粗体、靠右贴近输入元件显示、距上6个像素与输入框对齐显示，宽度都定义为20%(放入样式属性的样式标签和值为：font-size:bold;text-align:right;margin-top:6px;width:20%;)。

弹窗底部按钮居中显示和按钮名称修改

底部弹窗要求按钮居中，默认的两个按钮够我们使用所以直接修改名称即可。

以上录入信息窗口设计完成。下节介绍信息录入数据库逻辑开发。