KendoGrid条件行选实现全解析

本文针对ASP.NET MVC项目中Kendo Grid行选择的精细化条件控制需求，提出了一种有效的解决方案。Kendo Grid默认选择机制无法满足特定条件下的选择限制，直接在change事件中阻止选择也无效，因为Kendo Grid内部状态已更新。本文重点介绍了如何利用dataBound事件，结合JavaScript/jQuery拦截选择列复选框的点击事件，在Kendo Grid处理点击事件之前介入，根据自定义条件阻止默认选择行为。通过反转复选框状态、停止事件传播`e.stopImmediatePropagation()`，并提供用户反馈，从而在UI和Kendo Grid内部状态层面同步实现条件性选择或阻止选择。此方法不仅适用于Kendo Grid的选择功能，还可以推广到Kendo UI其他组件中，实现对组件默认交互行为的细粒度控制，提升应用程序的业务逻辑准确性和用户体验。

Kendo Grid选择机制的挑战

Kendo Grid提供了一种便捷的行选择功能，通常通过在网格配置中添加一个selectable列来实现。然而，在某些业务场景下，我们可能需要根据特定条件来阻止用户选择或取消选择某一行。例如，如果某商品已停产，则不允许用户选择该商品行。

直接在Kendo Grid的change事件中尝试阻止选择通常是无效的。这是因为change事件在Kendo Grid的内部选择逻辑（包括更新this.select()、this.selectedKeyNames()等状态）执行之后才触发。因此，即使在change事件中手动取消了UI上的复选框，Kendo Grid的内部状态仍然会认为该行已被选中，导致UI与内部数据不一致。

要实现真正的条件性选择控制，我们需要在Kendo Grid处理点击事件之前介入，并在满足条件时阻止其默认的选择行为。

利用dataBound事件实现精细控制

解决上述挑战的关键在于利用Kendo Grid的dataBound事件。dataBound事件在Kendo Grid的数据绑定完成并渲染到DOM之后触发。这为我们提供了一个理想的时机，来绑定自定义的事件处理器到网格中生成的特定元素上，例如选择列的复选框。

通过在dataBound事件中为每个选择复选框添加一个click事件处理器，我们可以在Kendo Grid的默认选择逻辑执行之前捕获到点击事件。在这个自定义处理器中，我们可以：

1. 获取当前行的数据项：通过点击的复选框向上追溯到其所在的行，然后使用grid.dataItem()方法获取该行绑定的数据。
2. 评估自定义条件：根据获取到的数据项，判断是否满足阻止选择的条件（例如，dataItem.Discontinued为真）。
3. 阻止默认行为：如果条件满足，则执行以下操作：
   • 反转复选框状态：由于点击事件已经发生了，复选框的UI状态可能已经改变。我们需要将其状态反转回来，以保持与我们阻止选择的意图一致。
   • 停止事件传播：调用e.stopImmediatePropagation()方法。这是至关重要的一步，它不仅会阻止当前事件的进一步传播，还会阻止同一事件的其他处理器（包括Kendo Grid自身的选择处理器）被调用。这样，Kendo Grid的内部选择逻辑就不会被触发，从而实现了真正的条件性阻止选择。
   • 提供用户反馈：通过kendo.alert()或其他方式告知用户为何无法选择该行。

示例代码

以下代码演示了如何在Kendo Grid中实现对“已停产”商品的条件性选择阻止：

$(document).ready(function() {
    $("#grid").kendoGrid({
        dataSource: {
            // 示例数据源配置
            data: [
                { ProductID: 1, ProductName: "Chai", Discontinued: false },
                { ProductID: 2, ProductName: "Chang", Discontinued: true },
                { ProductID: 3, ProductName: "Aniseed Syrup", Discontinued: false },
                { ProductID: 4, ProductName: "Chef Anton's Cajun Seasoning", Discontinued: true }
            ],
            schema: {
                model: {
                    id: "ProductID",
                    fields: {
                        ProductID: { type: "number" },
                        ProductName: { type: "string" },
                        Discontinued: { type: "boolean" }
                    }
                }
            }
        },
        height: 300,
        selectable: "multiple row", // 启用多行选择
        columns: [
            { selectable: true, width: "50px" }, // 选择列
            { field: "ProductName", title: "Product Name" },
            { field: "Discontinued", title: "Discontinued", template: "#= Discontinued ? 'Yes' : 'No' #" }
        ],
        // 关键在于dataBound事件
        dataBound: function() {
            var grid = this;
            // 找到所有选择列的复选框并绑定点击事件
            grid.tbody.find('tr .k-select-checkbox').on('click', function(e) {
                var dataItem = grid.dataItem($(this).closest("tr")); // 获取当前行的数据项

                // 如果商品已停产
                if (dataItem.Discontinued) {
                    // 反转复选框的UI状态，使其看起来没有被选中
                    $(this).prop('checked', !$(this).prop('checked'));
                    // 阻止事件进一步传播，防止Kendo Grid的默认选择逻辑执行
                    e.stopImmediatePropagation();
                    // 给出用户提示
                    kendo.alert(`${dataItem.ProductName} 已停产，您不能选择它！`);
                }
            });
        }
    });
});

代码解析：

1. selectable: "multiple row"：配置Kendo Grid启用多行选择功能。
2. { selectable: true, width: "50px" }：定义一个选择列，它会渲染出复选框。
3. dataBound: function() { ... }：这是核心逻辑所在。当网格数据绑定并渲染完成后，此函数会被调用。
4. grid.tbody.find('tr .k-select-checkbox').on('click', function(e) { ... })：
   • grid.tbody：获取网格的表格主体部分。
   • find('tr .k-select-checkbox')：查找所有行中带有k-select-checkbox类的元素，这些就是选择列的复选框。
   • .on('click', ...)：为这些复选框绑定一个点击事件处理器。
5. var dataItem = grid.dataItem($(this).closest("tr"));：$(this)是当前被点击的复选框。closest("tr")向上查找最近的元素（即当前行）。grid.dataItem()方法根据行元素获取其绑定的原始数据对象。
6. if (dataItem.Discontinued)：检查数据项的Discontinued属性是否为true。
7. $(this).prop('checked', !$(this).prop('checked'));：如果条件满足，将复选框的checked属性设置为其当前值的反面。例如，如果用户点击使其变为选中状态，这里会立即将其设置为未选中状态。
8. e.stopImmediatePropagation();：关键步骤。阻止此事件冒泡到父元素，并且阻止同一元素上的其他事件处理器（包括Kendo Grid内部的click处理器）被触发。这确保了Kendo Grid不会更新其内部的选择状态。
9. kendo.alert(...)：向用户显示一个警告消息。

注意事项与总结

• 事件传播：理解e.stopImmediatePropagation()与e.stopPropagation()的区别至关重要。e.stopPropagation()只阻止事件冒泡，但同一元素上的其他事件处理器仍会执行。而e.stopImmediatePropagation()则会阻止所有后续的事件处理器执行，包括同一元素上的其他处理器。在Kendo Grid这种内部有复杂事件处理机制的组件中，通常需要使用e.stopImmediatePropagation()来彻底阻止其默认行为。
• 性能考量：如果网格数据量非常大，dataBound事件可能会频繁触发，且每次都会重新绑定事件。对于极高性能要求的场景，可以考虑使用事件委托（将点击事件绑定到grid.tbody，然后根据e.target判断是否是复选框）来减少事件绑定次数，但对于大多数应用，当前方案的性能已足够。
• 用户体验：当阻止用户选择时，提供清晰的反馈（如kendo.alert或在UI上显示提示信息）是非常重要的，以避免用户感到困惑。
• 适用性：这种通过拦截UI元素事件来修改或阻止组件默认行为的模式，不仅适用于Kendo Grid的选择功能，也可以推广到Kendo UI其他组件中，当需要对组件的默认交互行为进行细粒度控制时，这是一种非常有效的技术。

通过上述方法，我们能够有效地在Kendo Grid中实现条件性行选择控制，确保UI状态与Kendo Grid的内部选择状态保持一致，从而提升应用程序的业务逻辑准确性和用户体验。

到这里，我们也就讲完了《KendoGrid条件行选实现全解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！