ComboBox的那些坑

简介

Kendo UI 的 ComboBox 下拉菜单，和 DropDownList 的效果差不多。

基本用法

html 组件中使用 data-bind 绑定 value 属性，enabled 属性绑定元素是否可用
- tip 1: 如果组件总是不可用的可以直接添加 disabled 属性
- tip 2: enabled 属性支持变量，不支持字面量，不能直接写 true
js 代码中使用 kendoComboBox({}) 配置生成组件
- dataTextField 显示的值，一般是文字
- dataValueField 对应的真实值，一般是编码或者ID
  - tip: 会和 data-bind 的 value 绑定，就是在选择的时候会自动将 dataValueField 的值放到 value 绑定的变量中
- dataSource: 配置数据源，可以是本地的也可以请求远程数据源
- change: 通常用来清除相关的数据
  - change 事件是在select 事件之后执行的
- select：返回事件对象 event ，event.dataItem 是当前选中的数据

示例

<input type="text"
    id="hhrPayGroup"
    placeholder='请输入'
    required
    data-bind="value: formData.gpPaygroupDescL, enabled: optionParams.canEdit"
    style="width: 100%;" />

<script>
$("#hhrPayGroup").kendoComboBox({
    dataTextField: "gpPaygroupDescL",
    dataValueField: "gpPaygroupDescL",
    dataSource: new kendo.data.DataSource({
        transport: {
            read: {
                url: "${base.contextPath}/yl/iip/salary/adjustment/group/selectGpPaygroup",
                type: "POST",
                data: {},
                dataType: "json"
            }
        },
        cache: false,
        schema: {
            data: "rows",
            model: {}
        }
    }),
    change: function (event) {
        if (event.sender._prev == "" || event.sender._prev == null || event.sender._prev == undefined) {
        //清空数据时清除ViewModel相关数据
            viewModel.formData.set("gpPaygroupL", "")
            viewModel.formData.set("gpPaygroupDescL", "")
        }
    },
    select: function (event) {
        if (viewModel.formData.gpPaygroupF && viewModel.formData.gpPaygroupF === event.dataItem.gpPaygroupL) {
            event.preventDefault()
            viewModel.formData.set("gpPaygroupL", "")
            viewModel.formData.set("gpPaygroupDescL", "")
            kendo.ui.showErrorDialog({
                title: $l('hap.error'),
                width: 400,
                message: '薪资组变更前后相同'
            })
        } else {
            viewModel.formData.set("gpPaygroupL", event.dataItem.gpPaygroupL)
            viewModel.formData.set("gpPaygroupDescL", event.dataItem.gpPaygroupDescL)
         }
    }
});
</script>

踩过的那些坑

1. 绑定的值出现了对象怎么办？
这是个比较奇怪的问题，我们按照正常的流程在 select 函数中为我们的变量赋值（将 value 和 text 赋值给对应的变量），但是在输出的时候发现value 或 text 里面放的是整个的 event.dataItem 对象 😶...
咋整❓

那就需要在初始化的时候赋值为 ""

viewModel = kendo.observable({
    selection: {
        text: "",
        value: ""
    }
})

还有在清除 viewModel 中的对象时，如果采用置为空对象的方式也有可能出现这样的问题：viewModel.set("selection",{})

2. 下拉框的值为什么清不掉
当我们需要一些条件限制下拉框的选项时，就会采用将对应的数据置空的方式来清除选项，但是你会发现没有用：

// other code
select: function(event){
    if(event.dataItem.value === "1001"){
        // event.preventDefault()
        viewModel.selection.set("value", ""),
        viewModel.selection.set("text", "")
        console.log("1001 is invalid!")
    }else{
         viewModel.selection.set("value", event.dataItem.value),
        viewModel.selection.set("text", event.dataItem.text)
    }
}

尽管你能看到输出 1001 is invalid! ，但是你会发现下拉菜单中的数据依然存在。
那这种怎么解决
阻止默认事件 event.preventDefault()，就是不允许组件默认把选择的值赋予绑定的变量。

最后编辑于：2020.09.06 16:54:58