Dialog 关闭後更新 Grid 资料 / 显示储存的图档 - day20

目标

承前篇

当学生资料修改或上传图档後,能够在 Grid 即时更新修正後的资料,并於点选学生展开显示该学生相片,如下图所示。

https://ithelp.ithome.com.tw/upload/images/20211005/20138680BshlhWu8CE.png

https://ithelp.ithome.com.tw/upload/images/20211005/20138680P3bhyotIpi.png

更新Grid

在 Grid 使用 addOpenedChangeListener 倾听器,监看 dialog 开/关状态,请开启AllStudentsView.kt

    dialog = StudentEditDialog().apply {
        this.studentId = student.id
        isDraggable = true; isResizable = true;isCloseOnEsc = false;isCloseOnOutsideClick = false
        addOpenedChangeListener {
            if (!it.isOpened){
                grid.dataProvider.refreshAll()
            }
        }
        open()
    }

在此未判断是否资料是否有更新

显示相片

原展开时仅显示学生成绩,现加上相片。请开启AllStudentsView.kt

  • Image,设定宽度占30%, 取得 Context 路径getCurrent().servletContext.contextPath
  • 请留意,网页采用相对路径,故不取得本机实际路径。
    val image = Image()
    image.width = "30%"
    if (!data.photo.isNullOrEmpty())
        image.src = getCurrent().servletContext.contextPath + data.photo
  • 为增加相片,加一层 HorizontalLayout,让 ImageGrid并排显示。现要渲染的Component 改为 HorizontalLayout (可和前一篇比较 ComponentRenderer 两者差异),完整程序如下:
val renderer = ComponentRenderer<HorizontalLayout, Student>{ data: Student ->
    val horizontalLayout = HorizontalLayout()
    val image = Image()
    image.width = "30%"
    if (!data.photo.isNullOrEmpty())
        image.src = getCurrent().servletContext.contextPath + data.photo
    horizontalLayout.add(image)
    val gradeGrid = Grid<Grade>()
    with(gradeGrid){
        setDataLoader(data.grades)
        addColumnFor(Grade::description).setHeader("学期")
        addColumnFor(Grade::mandarin).setHeader("国文")
        addColumnFor(Grade::english).setHeader("英文")
        addColumnFor(Grade::math).setHeader("数学")
        addColumnFor(Grade::pe).setHeader("体育")
        isExpand = true
        isHeightByRows = true
    }
    horizontalLayout.add(gradeGrid)
    horizontalLayout
}

<<:  [Day 30] Leetcode 124. Binary Tree Maximum Path Sum (C++)

>>:  #21 让 Automation 与 Chat Bot 连动

D-9. Rails API-Only 实作 && House Robber

API Application Programming Interface的缩写,主要在I,一个接口...

Day21 光晕文字

光晕文字 教学原文参考:光晕文字 这篇文章会介绍在 GIMP 里使用高斯模糊滤镜、文字、图层...等...

[2021铁人赛 Day06] General Skills 03

引言 昨天学到的: 命令 简介 命令 --help 查看命令使用说明 今天的题目正好与 --hel...

[Day 8] SRE - 火炎焱燚之保卫战

火烧起来怎麽办? 当你听到手机有叮咚叮咚,一连串的alert表示服务已无法继续服务,几分钟後电话来了...

损失函数的演进--2

triplet loss 接下来的Loss function为triplet loss 是为2015...