Kendo UI Grid：页面上是否可以有多个网格而不会发生元素 ID 冲突？答案

【问题标题】：Kendo UI Grid: is it possible to have more than one grid on the page without element ID collisions?Kendo UI Grid：页面上是否可以有多个网格而不会发生元素 ID 冲突？
【发布时间】：2012-12-01 21:57:16
【问题描述】：

页面上是否可以有多个 Kendo UI 网格？编辑：网格必须同时可见。

对于我过去尝试过的一些 jQuery 网格，页面上不可能有多个网格实例，因为网格分配给其子 DOM 元素的 ID 没有以网格 ID 为前缀；页面上有多个网格会创建两个或多个具有相同 ID 的 DOM 元素。

【问题讨论】：

标签： grid kendo-ui

【解决方案1】：

是的，我已经在我的项目中实现了这个，没有你提到的问题。我在一页中有 3 个网格。

更新：基本小部件元素具有您自己分配的任何 ID。至于子元素，它们不使用 ID，而是使用数据属性。我还没有在我拥有的整个网格中看到一个 ID。这是一个表格标题在我的一个网格中的外观示例：

<thead class="k-reorderable" data-role="reorderable">
<tr>
<th class="k-header" data-title="Service name" data-field="Name" role="columnheader" data-role="sortable">
<a class="k-link" href="#">Service name</a>
</th>
<th class="k-header" data-title="Lasting time" data-field="LastingTime" role="columnheader" data-role="sortable">
<a class="k-link" href="#">Lasting time</a>
</th>
<th class="k-header" data-title="Price" data-field="Price" role="columnheader" data-role="sortable">
<a class="k-link" href="#">Price</a>
</th>
</tr>
</thead>

数据行使用 UID 来区分自己，这里是另一个例子：

<tr class="k-alt" role="row" data-uid="f2cd4f59-8492-4616-8fc6-5d65ec466437">
<td role="gridcell">Test</td>
<td role="gridcell">01:00:00</td>
<td role="gridcell">500</td>
</tr>

我建议您查看 http://demos.kendoui.com/ 上的示例并检查网格生成的 html 以了解更多详细信息。

我认为您不应该直接通过 DOM 访问特定的子元素。我建议坚持使用小部件 API，这就是它存在的原因。

希望这会有所帮助！

【讨论】：

对 OP 案例中的问题进行更详细的分析会更有帮助。
@Serge Belov：那些其他网格假设每页只有一个实例，并且没有在其子元素 ID 前添加网格 ID，例如不是 StockGrid-Header1 而是 Header1 （一个假设的例子）。页面上有两个网格，它们都包含一个“唯一”ID 为“Header1”的元素。因此，getElementById('Header1') 是不可能的；此外，由于这些同名元素并不总是嵌套在结构内的同一位置，根据启用的功能，几乎不可能创建通用函数来使用其他选择器来处理元素。
@Dennis Puzak：感谢您的回复。我很乐意给你绿色的复选标记，接受你的回答；但在我正式接受之前，您能否描述一下 Kendo UI ID 命名约定？我在这里是一个“坚持者”，要求一个非常具体的答案，只是因为对于那些其他网格，ID-collision bug 很微妙；每页多个网格似乎工作正常，我没有立即检测到任何行为异常。 Are the Kendo UI ID-naming conventions designed to prevent ID collisions with multiple object instances? 再次感谢。
如果我的回答不够具体，我向大家道歉。我是堆栈溢出的新手，首先想到的是什么，并考虑到有帮助的想法:) 我会更新我的答案。
@Dennis Puzak：感谢I haven't seen a single ID in the ... grid 的补充评论。

【解决方案2】：

哦，是的！我们的页面实际上有数百个。

但更准确地说，我们按需加载其中的大部分。首先看一下 Kendo TabControl，这真的很容易。

这是通过具有动态分配名称的部分加载它们的许多方法中的“一种”。我们甚至有一个使用 GUID 的案例。

@using Kendo.Mvc.UI
@model PeopleViewModel
@{
    Layout = null;
}
@(Html.Kendo().Grid<PersonQualificationModel>()
    .Name("QualificationEditGrid_" + Model.PersonId)
    .HtmlAttributes(new { style = "clear: both;" })
...

如果您允许编辑。如果您尝试在多个具有相同类型数据的网格中同时进行编辑，则会发生冲突。在此示例中，如果您尝试同时在不同的网格中编辑两个限定条件，则会导致问题。

编辑：

如果您知道您将拥有 N 个具有相同数据类型的网格，您可以创建 N 个模型并唯一地命名它们的属性，并在每个网格上使用每个不同的模型。这将在一定程度上解决您的碰撞问题。这甚至可能不是您要问的。

【讨论】：

感谢您的帮助。网格需要同时可见，因此选项卡控件和按需加载不是一个选项。例如(1) Top 10 个股及其数据；（二）十大房地产项目； (3) 十大赌博娱乐场——每个网格都有不同的架构。
显然你不明白我在解释什么。我的错。