Grid 展开 Detail - day18

之前范例执行结束如上所示，倘若我们希望点选学生即展开该学生成绩怎麽做？

Grid 显示 Detail

使用 Grid 所提供 setItemDetailsRenderer()方法扩展 Row，setItemDetailsRenderer()方法须传入的参数只有一个 Renderer。

Randerer

什麽是 Randerer？简言之，即是用以产制模版，使用该模版来渲染欲呈现的资料。Vaadin 提供各式 renderer 。

BasicRenderer
ComponentRenderer
IconRenderer
LocalDateRenderer
NativeButtonRenderer
NumberRenderer
TemplateRenderer
TextRenderer

ComponentRenderer

本例中，点选学生资料後，展开学生成绩，成绩使用Grid显示，任何组件皆是Component，所以在此选用ComponentRenderer<COMPONENT,SOURCE>
准备Renderer

    val renderer = ComponentRenderer<Grid<Grade>, Student>{ data: Student ->
        val gradeGrid = Grid<Grade>()
        with(gradeGrid){
            setDataLoader(data.grades)
            
            
        }
        gradeGrid
    }

第一行，展开的学生成绩为资料来源 Grade 的 Grid。传入 ComponentRenderer 资料来源型态为 Student
第四行，设定资料来源

Student.kt

    val grades: DataLoader<Grade>
        get() = Grade.dataLoader.withFilter {
            Grade::student_id eq id
        }

完整程序如下，这样就完成了可展开的学生成绩 grid 了

    val renderer = ComponentRenderer<Grid<Grade>, Student>{ data: Student ->
        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
        }
        gradeGrid
    }
    setItemDetailsRenderer(renderer)