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

简单信息的增删查

简单信息的增删查

  • 模块项目可下载学习或复用至新项目中
  • 系统中,某些功能或设定信息只需要单独保存至系统,类似随时调用的系统变量等,这类信息一个名称对应一个值,可以定义一个或多个名称对应的值,这类处理只需删除和添加两个功能,不需要更新功能,直接删除重输正确的即可(也可以自定义修改值的功能);且一般在页面打开时会自动进行查询保存的信息显示到页面,此成熟模块就是一个这类的功能页,可以复制复用到新项目中作为一页或一页中的一个设定块来使用
  • 下载的项目导入后,电脑端显示块中有一个“JianDanZengShan”显示块,这个显示块即为简单信息增删查页面,可以设定显示块大小为页面(宽高都是100%父元件是一个页面大小时就显示为页面)或页面中的一个显示块(比如设定样式属性html.style的值为“width:300px;height:500px;”)来测试和使用
  • 设定为页面时显示的效果如下:

简单的增删查模块

功能说明

页面头部只放标题

  • 头部是菜单栏,但是只放一个字符显示元件并在其中添加一个字符常量,用来传入标题字符
  • 如果此模块用于一个页面中的部分内容,那么标题菜单栏可以删除,直接在表格所在的显示块中上部添加一个字符显示元件显示标题

页面主体信息显示区

  • 是一个记录显示、添加新记录、删除此行记录的表格
  • 删除时设计了检查是否为最后一个此名称的记录,如果是最后一个提示不可删除

开发说明

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

  • 所有内容都可以在一个空白的页面中通过点选选项板中元件来开发完成,可以打开下载文件查看开发结果
  • 空白的电脑端显示块中点选放入一个显示块作为增删改查页面或显示块(由显示块显示大小的样式属性值决定)
  • 页面中放一个菜单栏,作为此部分的标题使用
  • 页面中菜单栏下放一个显示块,作为信息记录显示、添加、删除的操作区域,其中放入一个表格元件作为主要显示和操作对象


以上内容拖放放大显示,默认较小,需要时请在文件中点击各部分细看

  • 主要功能开发所在位置为表格的主体元件中

开发内容:

  • 第一行中前两个是添加的块元件命名为“名称”和“值”,其中添加了字符显示元件,修改html.tag属性为td,即表格行中的显示列元件对象
    • 其中第一个块中还添加了一个HTML标签元件,设定一个图标样式类名称后显示减号,其中添加了一个点击行为处理元件,其中是删除此行记录的逻辑
  • 修改第一行中默认的date元件为“设计日期”来显示录入时的系统日期值
  • 添加第二行,修改html.tag属性为tr,即表格中的一行
    • 同第一行一样添加了2个显示块,其中有输入框元件
    • 第二个输入框元件有一个输入有变化的触发事件行为元件,其中开发了输入值退出输入框或回车时进行信息插入数据库表的逻辑
    • 添加的第三个块中是HTML标签元件,设计方式同第一行第一个块中同样的元件,功能是取消录入,不显示此录入行
  • 添加第三行,修改html.tag属性为tr,即表格中的一行
    • 添加的第一个块中是HTML标签元件,设计方式同第一行第一个块中同样的元件,功能是点击图标后不显示此按钮行,而显示第二个行对象用户可进行录入信息操作

样式定义说明

页面样式

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

顶部菜单栏样式

  • 头部的显示对象样式都在样式文件中定义的
    • 我们为头部菜单栏添加了样式类属性,样式类名称为“caidanlan”,但此例中只用到了样式类中定义的高度和背景色,“caidanlan”样式定义是在样式文件中处理的,与“增删改查成熟模块”中定义完全一样,是一个菜单栏的通用定义,大部分页面可直接复制使用此样式类
    • 头部我们添加了一个标题字符居中的样式属性值“text-align:center;”
    • 头部中的字符显示元件添加了一个标题字符大小的样式属性值“font-size:18px;”

表格显示区中的样式

  • 表格显示区样式,我们是在项目的样式文件中(..\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);” 否则页面会超过屏幕可显示区

表格中的样式

  • 表格显示元件因为表格内容多少列一次会显示多少条所以不能用样式类统一定义,但是表格内容每行斑马条状显示、表格选中一行高亮绿色等都是默认的样式类中定义的,需要时修改样式类,在“web\styles\bootstrap文件夹中010-tables.less文件中”修改对应值即可
  • 表格中我们按开发内容进行了不同的对象样式定义:
    • 所有显示一个加或减图标的HTML标签元件,样式定义为“margin:1px 4px;”,这是表格行高默认值时我们调整的显示样式,如果在项目中改变了表格行高默认值,则需要重新调试定义
    • 第二行添加信息行中,前两个元件有输入框,我们定义输入框的样式值为“paddming:4px;height:25px;margin:0px;box-shadow:none;”
    • 第三行中三个元件定义了背景色样式属性值为“background-color:#ddd;”,注意这个值与表格的边框线是一致的,这样第三行整体显示为一个色,而且整行中只有一个添加按钮功能;不能将背景色加到第三行行元件的原因是第三行也是表格的内容,而随着表格记录添加,单偶数的行背景是斑马色显示的,如果直接定义背景,则因为添加或删除信息刷新显示新行导致第三行也会不停变为斑马色
    • 还可以自定义固定各栏宽度,开发者可自行定义行中列元件属性来处理

逻辑功能开发

  • 数据库增添记录:直接将两个输入框的值传入记录主键字段值中,再传入一个当前日期元件的输出值,连至插入记录元件即完成添加记录
  • 数据库修改记录:本例无修改记录设计,修改功能可以操作为:先删除旧记录,再添加正确记录来处理
  • 数据库删除记录:是通过传入当前行的主键“mingcheng”和“zhi”两个字段的值,来确认此行的记录,连接至删除元件处理的
  • 数据库记录查询:查询是查询全部库表中记录,转换显示到表格中的,且是在预处理行为元件中执行的,也就是打开此模块页而即显示记录信息

快速复用指导

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

    • (页面—“xt_sheding”数据库表)字段中添加或修改字段名称,需要时修改数据库表名称,注意修改数据库表名称需同时修改库表元件的“tableName”值,这个对应数据库中的操作的表名称
    • (页面—Pane显示块—Table表格—“Body”—“Body Row”中)改名为想要的列名称或删除或添加新的表格列元件,注意这里的显示元件如果从元件选项板添加而不是复用当前元件,则需修改html.tag属性为td
    • (页面—“Toolbar”菜单栏中)删除此项,或修改字符元件中常量值来修改标题

    页面“预处理”行为元件修改传值内容

    • (页面—“Action”—“Service”—“Action”)如果删除或添加了字段,则在此需重新连线传值

    第二行第二个输入框中插入记录逻辑修改确认

    • (页面—“Pane”—“Table”—“Body”—“添加信息行”—“Zhi”显示块—字符元件中“On Change”行为元件中)如果删除或添加了字段,则在此需重新连线传值

    第一行第一个显示块中HTML标签的行为逻辑修改确认

    • (页面—“Pane”—“Table”—“Body”—“Body Row”—“名称”显示块—HTML标签中“On Click”行为元件中)如果删除或添加了字段,则在此需重新连线传值
  • 4、保存后可以试运行一下,可以测试添加数据、删除记录、取消添加等全操作一次
  • 5、开发区中点选“JianDanZengShan”显示块,右键单击选复制,在新的项目的某个页面中粘贴复用,选“导入粘贴”(paste import)的方式
  • 6、导入至新项目后,可以调整此页的样式属性“margin:0 auto;width:80%;height:100%;”为“width:100%;height:100%;”,即为新项目中某个页面全部显示此页面;或是修改为本文开始说明的一个固定或相对整体页面的小尺寸来作为页面内部的一部分处理
  • 7、调整导入的模块在新项目中的文件目录中文件位置,将模块的内容全部拖放到框架页面下或一个特定目录中

注意

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

复用案例

请参考开发案例手册中ERP中MRP开发的复用说明