1. 首页
  2. 全部文档
  3. 开发框架模块手册
  4. 增删改查成熟模块(3个)
  5. 逐条增删改查

逐条增删改查

逐条增删改查

  • 模块项目可下载学习或复用至新项目中
  • 信息增删改查中,有些类型的信息需逐条添加,可以选中显示的表中某条记录逐条修改和删除,这个模块就是对一条条的记录进行增删改查处理的模块;比如我们为学员准备的一套框架中,系统用户的添加更新删除管理就是这个模块上建议的,与此模块的区别是框架中用户模块下还定义了将添加的用户信息加入用户表、为用户添加系统最基础的授权角色功能,对应的删除用户时,删除用户角色和权限账号
  • 下载的项目导入后,电脑端显示块中有一个“zhutiaoZXGC”显示块,这个显示块即为信息逐条增删查页面,可以设定显示块大小为页面(宽高都是100%父元件是一个页面大小时就显示为页面)或页面中的一个显示块(比如设定样式属性html.style的值为“width:600px;height:500px;”)来测试和使用
  • 设定为页面时显示的效果如下:

逐条处理的增删查模块

功能说明

页面头部只放标题

  • 头部是菜单栏,我们所有的增删改查功能逻辑全在此栏中的按钮中处理
  • 添加记录和修改记录在按钮中的一个弹窗中处理,弹窗中有各类输入框,对记录要求录入的字段值在中进行录入或修改

页面主体信息显示区

  • 是一个记录显示的表格
  • 除了选中操作没有其他逻辑功能,选中后将选中行信息添加到表格的选中行变量对象中,供更新和删除时调用选中记录

开发说明

页面结构及显示对象开发:

  • 所有内容都可以在一个空白的页面中通过点选选项板中元件来开发完成,可以打开下载文件查看开发结果
  • 空白的电脑端显示块中点选放入一个显示块作为增删改查页面或显示块(由显示块显示大小的样式属性值决定),所有应显示在页面内的按钮、输入框、表格都是在此显示块中设计的
  • 页面中放一个菜单栏,菜单栏中放入添加记录按钮、查询条件按钮、查询按钮、更新记录按钮、删除记录按钮
  • 页面中菜单栏下放一个显示块,作为信息记录显示表格所在区

  • 菜单栏中的开发内容为

开发内容:

  • 菜单栏:从左至右点选放入“添加用户”按钮、“条件标题”字符显示元件、“条件输入框”字符输入框元件、“查询”按钮、“更新删除”按钮组元件
    • “添加用户”按钮:双击进入按钮—“On Click”固定名称点击事件行为元件,添加一个弹窗元件,弹窗处理也是一个简单的可直接使用的成熟模块,请参考另一节弹窗提交表单的设计
      • 弹窗内部,是信息输入类元件,输入使用表单,表单的设计请参考我们“可视化元件”手册中的“Form表单”一节内容
      • 弹窗中的默认按钮我们修改名称为“关闭”和“添加”
    • “条件标题”字符显示元件中,添加一个标题常量连至显示元件的值变量元件中
    • “条件输入框”字符输入框元件,为其添加一个“<Placeholder>”的固定名称变量,变量中输入“支持部分输入”作为提示信息
    • “查询”按钮中,主要是用输入框的值来合成查询条件、服务器进行有条件的高级查询、查询结果转换为表格行显示元件传值到的表格的逻辑,参考下部查询逻辑说明
    • “更新删除”按钮组元件中,添加两个“更新”和“删除”按钮元件
      • “更新””按钮中,添加了一个弹窗、弹窗中主体内容区复用了添加按钮中弹窗中的表单,并设计了从页面父级元件对象中获取选中行的记录值传入表单输入框中,弹窗的底部按钮改为“关闭”和“更新”
        • “更新”按钮中,主要是更新逻辑,参考下部更新逻辑说明
      • “删除”按钮中,设计了从页面父级元件对象中获取选中行的记录值传入数据库记录元件进行删除的逻辑,参考下部删除逻辑说明
  • 表格中,只需要按需要添加显示元件命名为列名即可,注意添加的元件HTML标签属性“html.tag”值应改为表格标签中的“td”;或复用已有的类型显示元件命名为新列名称

样式定义说明

页面样式

  • 页面的样式我们为“zhutiaoZXGC”显示块定义了样式属性让此显示块显示为一个页面:
    • 样式名称:html.style 样式值:margin:0 auto;width:80%;height:100%;
    • 样式中margin定义了页面在父元件中(此项目文件中也就是全屏)是居中显示的
    • 样式中margin定义了页面的宽度是父元件的80%,高度和父元件一样
    • 显示效果为本文开头第一个图的显示样式
  • 导入复用到新的项目中时,一般应将样式值改为“width:100%;height:100%;”,这是因为我们新项目一般都会用一套框架来处理,而框架中页面已设计好,也就是页面已定义了,我们只需将此增删改查页面设定与框架页面重合(100%占满)即可
  • 注意在一个空白的新建项目中,我们为了设定“Desktop View”显示块是满屏的,需要为其设定一个同样的属性,或在项目样式文件中(web\styles文件夹中general.less或desktop-view.less文件中)添加一个样式类,此模块项目就是用这个来定义的,可以查看
    .body{
      width:100%;
      height:100%;
    }
    

顶部菜单栏样式

  • 头部的显示对象样式都在样式文件中定义的
    • 我们为头部菜单栏添加了样式类属性,样式类名称为“caidanlan”,但此例中只用到了样式类中定义的高度和背景色,“caidanlan”样式定义是在样式文件中处理的,与“增删改查成熟模块”中定义完全一样,是一个菜单栏的通用定义,大部分页面可直接复制使用此样式类
    • 两个按钮中有弹窗,弹窗样式是在我们项目文件夹下“web\styles\bootstrap文件夹中024-modals.less文件”中定义的,默认的定义中弹窗标题居左,下部按钮靠右,弹窗出现时的背景色为黑色,可以修改定义值处理进行调整为标题居中、按钮居中、背景色灰色
    .modal-backdrop {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: @zindexModalBackdrop;
      background-color: @gray;  -------------------------------修改项:调整为gray
      ...
      .modal-header {
        padding: 9px 15px;
        text-align:center; --------------------------------------新加项:添加一行文字居中的标签定义
      ...
      .modal-footer {
        padding: 14px 15px 15px;
        margin-bottom: 0;
        text-align: center; // center align buttons -------------修改项:这一行中原文备注是靠右,改为居中
    
    • 弹窗主体中是一个表单,表单中有添加的输入框元件,我们修改了输入框的样式文件,在项目文件夹的“web\styles”下“field.less”文件中,我们新加了一个样式类定义如下:
    .form-2lie label.field
    {
     float:left;
     width:50%;
        > *
        {
        display:inline-block;
        width:70%;
        }
           >span:first-child
           {
       	   width:30%;
     	   text-align:right;
           }
    }
    

为弹窗中表单添加此样式类属性后,弹窗显示为

表格显示区中的样式

  • 表格显示区样式,我们是在项目的样式文件中(web\styles文件夹中general.less)定义一个样式类统一定义表格和父级显示块的关系,这个样式类名称为“biaogeyemian”,因为这个类在整个项目中会多次用到,所以我们单独定义:
    .biaogeyemian{
      background-color:#F6F6F6;
      overflow-x:auto;
      overflow-y:hidden;
    }
    
  • 这个定义意思是此显示元件背景色为淡灰色、如果内容中左右超过一屏宽度时,自动出现左右滚动条,但是高度超过一屏不出现上下滚动条
  • 表格区显示块的高效是父元件全部元件高度100%减去其他固定高度像素的方式定义的,此例中样式值设定为“height:calc(100% – 65px);”
    • 其中65px是样式类中菜单栏的定义高度
    • 书写时注意减号隔开,否则失效
    • 如果菜单下此显示块的下部还有一个底部框占据定义为“height:25%;”高度,则此处显示块高度应定义为“height:calc(75% – 65px);”
    • 注意,如果修改顶部的高度,表格区显示块的高度属性值需对应修改为“height:calc(100% – 120px);” 否则页面会超过屏幕可显示区

逻辑功能开发

  • 数据库增添记录:添加记录按钮—点击事件行为元件—弹窗—Footer—“添加”按钮—点击事件行为元件中,设计了将弹窗中表单录入的信息传值给数据库表记录元件,将库表记录连至数据库记录插入元件来存入数据库的逻辑,存入后关闭弹窗,同时将录入内容显示到页面信息显示表格中

  • 数据库修改记录:在页面头部,按钮组中更新按钮元件—点击事件行为元件—弹窗—Footer—“更新”按钮—点击事件行为元件中,设计了更新逻辑,此逻辑中,将弹窗中表单录入的信息传值给数据库表记录元件,将库表记录连至数据库记录更新元件来更新记录,更新完成后关闭弹窗,同时将新的记录内容显示到页面信息显示表格中

  • 数据库删除记录:在页面头部,按钮组中更新按钮元件—点击事件行为元件中,设计了删除逻辑,此逻辑中,将页面父级对象中表格中选中的行中库表记录元件传值入服务器端行为处理中(在查询转换处理中,有将查询到的数据库表记录传入行元件的连线,行元件中也复用了一个库表变量用于存放库表记录),连至删除库表记录元件,完成后刷新显示内容即可,中间我们添加了一个确认是否进行删除操作的窗口

  • 数据库记录查询:在页面头部,“查询”按钮元件—点击事件行为元件—中,设计了查询逻辑,此逻辑中,将条件输入框中字符传入查询条件生成逻辑中,生成的条件语句传入一个服务器端行为元件中进行高级查询,输出的记录再进行一条条的转换,转为表格中一行行的信息传入页面的显示表格中

快速复用指导

  • 1、下载成熟模块项目,开发工具中导入项目
  • 2、打开导入的项目,删除不想要的功能内容添加需要的内容
  • 3、各位置修改添加时处理说明:
    页面中数据库\显示表格\菜单栏修改及检查内容

    • (页面—“Employee”数据库表)字段中添加或修改字段名称,需要时修改数据库表名称,注意修改数据库表名称需同时修改库表元件的“tableName”值,这个对应数据库中的操作的表名称
    • (页面—Pane显示块—Table表格—“Body”—“Body Row”中)改名为想要的列名称或删除或添加新的表格列元件,注意这里的显示元件如果从元件选项板添加而不是复用当前元件,则需修改html.tag属性为td
    • (页面—“Toolbar”菜单栏中)各按钮可以重命名或删除、查询条件输入框可以添加更多输入框也可以改为用户自定义的查询条件生成模块,如果删除字段或添加字段,则需要在各逻辑中删除或添加新的连线转值处处理
    • 修改按钮中的弹窗处理,请参考另一节“弹窗信息提交模块”的介绍
  • 4、保存后可以试运行一下,可以测试添加数据、删除记录、更新记录,条件查询等全操作一次
  • 5、开发区中点选“zhutiaoZXGC”显示块,右键单击选复制,在新的项目的某个页面中粘贴复用,选“导入粘贴”(paste import)的方式
  • 6、导入至新项目后,可以调整此页的样式属性“margin:0 auto;width:80%;height:100%;”为“width:100%;height:100%;”,即为新项目中某个页面全部显示此页面;或是修改为本文开始说明的一个固定或相对整体页面的小尺寸来作为页面内部的一部分处理
  • 7、调整导入的模块在新项目中的文件目录中文件位置,将模块的内容全部拖放到框架页面下或一个特定目录中

注意

  • 可用以上方式,多次添加来为新项目定义多个增删改查页面或新模块,实际上如果操作修改表名称和每次导入后进行第7步的目录位置修改,则就会在新项目中生成完全独立的两个或多个增删改查页面或模块

复用案例

请参考我们为付费学员赠送的框架或客户案例中添加系统用户的功能,注意在实际使用中,我们在保存用户记录同时,添加了用户角色记录插入的功能,然后由管理人员单独设定权限后新用户就可以使用系统了,如果在此设计了用户的默认权限添加功能,同时还需要设计系统缓存更新时间记录,否则用户无法使用系统