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的默认选择逻辑执行之前捕获到点击事件。在这个自定义处理器中，我们可以：
- 获取当前行的数据项：通过点击的复选框向上追溯到其所在的行，然后使用grid.dataItem()方法获取该行绑定的数据。
- 评估自定义条件：根据获取到的数据项，判断是否满足阻止选择的条件（例如，dataItem.Discontinued为真）。
-
阻止默认行为：如果条件满足，则执行以下操作：
- 反转复选框状态：由于点击事件已经发生了，复选框的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} 已停产，您不能选择它！`);
}
});
}
});
});代码解析：
- selectable: "multiple row"：配置Kendo Grid启用多行选择功能。
- { selectable: true, width: "50px" }：定义一个选择列，它会渲染出复选框。
- dataBound: function() { ... }：这是核心逻辑所在。当网格数据绑定并渲染完成后，此函数会被调用。
- grid.tbody.find('tr .k-select-checkbox').on('click', function(e) { ... })：
- grid.tbody：获取网格的表格主体部分。
- find('tr .k-select-checkbox')：查找所有行中带有k-select-checkbox类的元素，这些就是选择列的复选框。
- .on('click', ...)：为这些复选框绑定一个点击事件处理器。
- var dataItem = grid.dataItem($(this).closest("tr"));：$(this)是当前被点击的复选框。closest("tr")向上查找最近的
元素（即当前行）。grid.dataItem()方法根据行元素获取其绑定的原始数据对象。 - if (dataItem.Discontinued)：检查数据项的Discontinued属性是否为true。
- $(this).prop('checked', !$(this).prop('checked'));：如果条件满足，将复选框的checked属性设置为其当前值的反面。例如，如果用户点击使其变为选中状态，这里会立即将其设置为未选中状态。
- e.stopImmediatePropagation();：关键步骤。阻止此事件冒泡到父元素，并且阻止同一元素上的其他事件处理器（包括Kendo Grid内部的click处理器）被触发。这确保了Kendo Grid不会更新其内部的选择状态。
- 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的内部选择状态保持一致，从而提升应用程序的业务逻辑准确性和用户体验。
