VoK Grid 各种资料型态过滤器 - day15

前情提要
在前面的例子里，我们使用Grid来展示学生资料

grid = grid {
    isExpand = true

    setDataLoader(Student.dataLoader)
    addColumnFor(Student::id).setHeader("序号")
    addColumnFor(Student::name){
        setHeader("姓名")
    }
    addColumnFor(Student::gender).setHeader("性别")
    addColumnFor(Student::birthday).setHeader("生日")
    addColumnFor(Student::height).setHeader("身高")
    addColumnFor(Student::weight).setHeader("体重")
    addButtonColumn(VaadinIcon.EYE, "view") { StudentView.navigateTo(it.id!!) }
    addButtonColumn(VaadinIcon.EDIT, "edit") { EditStudent.navigateTo(it.id!!) }
    if (Session.loginService.isUserInRole("administrator")) {
        addButtonColumn(VaadinIcon.TRASH, "delete") {
            confirmDialog(text = "是否确定删除${it.name}的资料？") {
                it.delete()
                this.refresh()
            }
        }
    }
}

上述例子里使用setDataLoader(Student.dataLoader) 将资料载入grid

Grid 过滤器

VoK提供了非常便利的资料过滤器，只需要一点点设定

过滤文字

1. grid{ ... } 加一标题列，并

    appendHeaderRow()
    val filterBar = appendHeaderRow().asFilterBar(this)

2. 在需要过滤的栏位加上过滤栏

    addColumnFor(Student::name){
        setHeader("姓名")
        filterBar.forField(TextField(), this).istartsWith()
    }

执行结果

过滤选单

资料来源 Enum

在学生成绩范例里，性别使用Enum选单供选取

enum class Gender {
    Female,
    Male,
    Custom
}

VoK 提供 enumComboBox<>()， 让使用下拉式选单过滤资料变得容易

    addColumnFor(Student::gender) {
        setHeader("性别")
        filterBar.forField(enumComboBox<Gender>(), this).eq()
    }

True/False Boolean值过滤

倘若栏位内容为Boolean值，则使用

    addColumnFor(Student::gender) {
        setHeader("性别")
        filterBar.forField(BooleanComboBox(), this).eq()
    }

过滤数字区间

使用 NumberRangePopup() 输入数字区间，inRange()可以用来过滤任何型态的数字

    addColumnFor(Student::height){
        setHeader("身高")
        filterBar.forField(NumberRangePopup(), this).inRange()
    }

大於等於

    filterBar.forField(NumberField(), this).ge()

小於等於

    filterBar.forField(NumberField(), this).le()

过滤日期

addColumnFor(Student::birthday) {
    setHeader("生日")
    filterBar.forField(DatePicker(), this).onDay(LocalDateTime::class)
}

日期区间

filterBar.forField(DateRangePopup(), this).inRange(Student::birthday)