Kendo Grid中基于条件阻止行选择并同步内部状态的教程

本教程详细介绍了如何在ASP.net mvc的Kendo Grid中，根据特定条件阻止用户选择行，并确保ui显示与Kendo Grid内部选择状态（如this.select()）保持一致。通过利用dataBound事件为选择复选框添加自定义点击处理，并在条件满足时阻止事件传播，可以有效管理条件性行选择，避免仅更新UI而内部状态不同步的问题。

理解Kendo Grid的行选择机制

kendo grid提供了一种方便的方式来允许用户选择行，通常通过一个复选框列实现。当用户点击复选框时，grid会自动更新其内部选择状态（如this.select()、this.selectedkeynames()等），并触发change事件。然而，在某些业务场景中，我们可能需要根据特定条件（例如，商品已停产、订单已完成等）阻止用户选择某些行。

面临的挑战：UI与内部状态不同步

一个常见的误区是尝试在Grid的change事件中直接阻止或撤销选择。例如，开发者可能会尝试在change事件处理函数中找到对应的复选框并将其设置为未选中状态：

function onChange(e) {    var selectedRows = this.select();    for(var i = 0; i < selectedRows.length; i++){        // 假设这里有一些条件判断        if(conditionMet) {           selectedRows[i].find("input[type='checkbox']").prop('checked', false);           // 尝试阻止选择，但通常无效           alert("您不能选择此项！");        }    } }

这种方法的问题在于，change事件在Grid已经处理完选择逻辑、更新了内部状态之后才触发。因此，即使我们在UI上将复选框取消选中，Grid的内部选择状态仍然可能包含该行。这会导致UI显示与实际数据模型不一致，从而引发后续操作的逻辑错误。Kendo Grid的change事件本身并不能被阻止，它主要用于响应选择发生后的处理。

解决方案：利用dataBound事件和事件传播控制

要实现条件性阻止行选择，我们需要在Grid的默认选择逻辑执行之前介入。一个有效的方法是利用dataBound事件，在该事件中为选择复选框附加一个自定义的点击事件处理器，并通过阻止事件传播来阻止Grid的默认选择行为。

核心思路

1. dataBound事件：当Grid的数据加载或重新绑定完成时，dataBound事件会触发。这是附加自定义事件处理器的理想时机，因为此时Grid的行和复选框元素都已渲染到dom中。
2. 自定义点击处理器：我们为每个选择复选框（通常具有.k-select-checkbox类）添加一个click事件处理器。
3. 条件判断：在点击处理器内部，获取当前行的数据项（dataitem），并根据业务逻辑进行条件判断。
4. 阻止事件传播：如果条件满足，即该行不应被选中，我们首先将复选框的状态反转（因为用户已经点击，它可能已经变为选中状态），然后最关键的一步是调用e.stopImmediatePropagation()。这个方法会阻止当前事件的进一步传播，包括Kendo Grid自身监听的click事件，从而有效地阻止Grid更新其内部选择状态。

示例代码

以下代码演示了如何在Kendo Grid中实现这一功能，以“停产商品不能被选择”为例：

Sudowrite

对用户最友好的AI写作工具

74

查看详情

$("#grid").kendoGrid({     dataSource: {         type: "odata",         transport: {             read: "https://demos.telerik.com/kendo-ui/service/odata/Products"         },         pageSize: 20,         serverPaging: true,         serverSorting: true     },     height: 550,     sortable: true,     pageable: true,     columns: [         { selectable: true, width: "50px" }, // 选择列         { field: "ProductName", title: "Product Name" },         { field: "UnitPrice", title: "Unit Price", format: "{0:c}" },         { field: "UnitsInStock", title: "Units In Stock" },         { field: "Discontinued", title: "Discontinued" } // 假设有这个字段表示是否停产     ],     // 关键部分：dataBound 事件处理     dataBound: function() {         var grid = this;         // 查找所有选择复选框并附加点击事件         grid.tbody.find('tr .k-select-checkbox').on('click', function(e) {             var row = $(this).closest("tr");             var dataItem = grid.dataItem(row); // 获取当前行的数据项              // 如果商品已停产 (Discontinued 为 true)             if (dataItem.Discontinued) {                 // 将复选框状态反转，因为用户点击后它可能已变为选中                 $(this).prop('checked', !$(this).prop('checked'));                 // 阻止事件立即传播，防止Grid更新内部选择状态                 e.stopImmediatePropagation();                 // 给出用户提示                 kendo.alert(`${dataItem.ProductName} 已停产，您不能选择它！`);             }         });     } });

在上述代码中，dataBound事件确保了每当Grid的数据被重新加载或分页时，都会重新为当前可见行中的选择复选框附加事件处理器。当用户点击一个“已停产”商品的复选框时：

1. dataItem.Discontinued条件为真。
2. $(this).prop(‘checked’, !$(this).prop(‘checked’)) 会将复选框的状态从选中（用户点击后的状态）反转回未选中。
3. e.stopImmediatePropagation() 会阻止Kendo Grid内部用于处理选择的后续事件处理器执行。
4. kendo.alert() 提供友好的用户反馈。

这样，不仅UI上的复选框不会被选中，Grid的内部选择状态也永远不会包含该行，从而保持了UI与数据的一致性。

注意事项与最佳实践

• dataBound的重复执行：dataBound事件在每次数据绑定时都会触发，这意味着每次都会重新附加click事件处理器。为了避免重复绑定导致性能问题或意外行为，可以在附加事件之前使用off(‘click’)解除之前的绑定，或者使用事件委托（grid.tbody.on(‘click’, ‘.k-select-checkbox’, function(){…})）来优化。上述示例使用的是事件委托的变体，find后直接on，对于Grid来说通常是可接受的。
• 用户体验：当阻止用户操作时，提供清晰的反馈（如kendo.alert或在UI上显示提示信息）至关重要，让用户明白为什么他们的操作被阻止。
• 条件复杂性：如果条件判断逻辑非常复杂，可以将其封装成一个单独的函数，保持代码的清晰和可维护性。
• 替代方案（不推荐用于预防）：如果业务逻辑要求先允许选择，然后立即取消选择并更新Grid的内部状态，那么需要使用clearSelection()或select(rows)方法来手动管理选择。但这种方法通常会导致UI闪烁或用户体验不佳，且比直接阻止选择更为复杂，因此不推荐用于预防性场景。本教程介绍的方法旨在直接阻止无效的选择。

总结

通过在Kendo Grid的dataBound事件中，为选择复选框附加一个自定义的点击处理器，并在满足特定条件时利用e.stopImmediatePropagation()阻止事件传播，我们可以有效地实现基于条件的行选择控制。这种方法确保了Grid的UI显示与内部选择状态的完全同步，避免了常见的UI与数据不一致问题，从而提升了应用程序的健壮性和用户体验。