简介

kendoGrid是表格组件，功能强大，用的也比较多
🍋 官方 API 参考文档

可编辑表格配置了校验规则怎么触发校验呢?

使用 _validationEditCell() 方法，这个是 kendoGrid 自带的方法，机缘巧合扒出来的😄。通过这个方法就能直接触发表格校验。

怎么用呢？首先在表格的 dataSource 中定义一些校验规则

dataSource = new kendo.data.DataSource({
    // some code
    transport: {
        read: {
            url: "${base.contextPath}/yl/pre/sector/query",
        },
        parameterMap: function (options, type) {
            // some code
            // 请求之前对携带的参数进行处理
        }
    },
    schema: {
        /*这里的data属性支持function对远程请求的数据进行处理，需要返回一个Array*/
        data: function (res) {
            if (res.success && res.rows.length > 0) {
                // some code
                return res.rows
        },
        total: 'total', //标识 total 对应的列，注意千万不要写错了。之前就有一次写错了出现了什么问题来着，忘记了😂
        model: {
            id: "id", // id映射，有什么用呢？如果你未曾修改任何数据，直接保存(是不会触发saveChanges的哦)
            fields: {
                /* 主角来了：这里配置的校验规则可以在使用 _validationEditCell() 时被触发 */
                userName: { validation: { required: true } },
                userAge: { validation: { required: true } },
                userGender: { checkedValue: '1', uncheckedValue: '0' } // 这样子写就可以直接渲染一个可以编辑的CheckBox，很方便的；这样子在columns配置时就不需要写任何东西了。
            },
        }
    }
})

然后既可以在保存的时候触发 _validationEditCell() 即可进行自动校验了

function saveData(){
    if($("#grid").data("kendoGrid")._validationEditCell()){
        // submit action
    }
}

🍕 当然这个方法还可以在表格新建行的时候手动触发一下，这样子，光标就会字段聚焦到新加的那一行的首个required单元格啦