理解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的默认选择行为。
核心思路
- dataBound事件：当Grid的数据加载或重新绑定完成时，dataBound事件会触发。这是附加自定义事件处理器的理想时机，因为此时Grid的行和复选框元素都已渲染到DOM中。
- 自定义点击处理器：我们为每个选择复选框（通常具有.k-select-checkbox类）添加一个click事件处理器。
- 条件判断：在点击处理器内部，获取当前行的数据项（dataItem），并根据业务逻辑进行条件判断。
- 阻止事件传播：如果条件满足，即该行不应被选中，我们首先将复选框的状态反转（因为用户已经点击，它可能已经变为选中状态），然后最关键的一步是调用e.stopImmediatePropagation()。这个方法会阻止当前事件的进一步传播，包括Kendo Grid自身监听的click事件，从而有效地阻止Grid更新其内部选择状态。
示例代码
以下代码演示了如何在Kendo Grid中实现这一功能，以“停产商品不能被选择”为例：
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
$("#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的数据被重新加载或分页时，都会重新为当前可见行中的选择复选框附加事件处理器。当用户点击一个“已停产”商品的复选框时：
- dataItem.Discontinued条件为真。
- $(this).prop('checked', !$(this).prop('checked')) 会将复选框的状态从选中（用户点击后的状态）反转回未选中。
- e.stopImmediatePropagation() 会阻止Kendo Grid内部用于处理选择的后续事件处理器执行。
- 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与数据不一致问题，从而提升了应用程序的健壮性和用户体验。
