javascript - 具有重复列的 Jqgrid 选择问题

Question

我在 Jqgrid 中面临行选择问题。我在网格中复制了行。每当我选择重复项或它选择该重复行的第一条记录时。

Answer 1

对于许多开始使用 jqGrid 的人来说，这是一个常见的问题。如果您用具有id duplicates的行填充网格，则存在这种奇怪的选择行为。因此，了解 jqGrid 如何使用输入中的 id 非常重要。

jqGrid 使用内部 HTML 标记来显示网格。对于任何网格，它都使用<table>, <tbody>（表格的主体 - 没有列标题）、<tr>（表格的行）和<td>（表格的表格）。例如，下面的 HTML 片段可以代表您的网格

<table>
    <tbody>
        <tr><td>16</td><td>A11</td><td>Add</td></tr>
        <tr><td>1</td><td>Chart</td><td>Edit</td></tr>
        <tr><td>1</td><td>Chart</td><td>Delete</td></tr>
        <tr><td>1</td><td>Chart</td><td>View</td></tr>
        <tr><td>15</td><td>Manage</td><td>Edit</td></tr>
        <tr><td>16</td><td>A11</td><td>View</td></tr>
        <tr><td>15</td><td>Manage</td><td>Delete</td></tr>
    </tbody>
</table>

jqGrid 的设计是为了让人们可以快速访问网格的任何行。要实现快速访问，需要为每个<tr>（表格行）分配一个唯一的 id。您会在jqGrid 使用的大多数方法或事件中找到 rowid 参数。行的 id 应标识表行集中的行。在这种情况下，网格将如下所示

<table>
    <tbody>
        <tr id="a"><td>16</td><td>A11</td><td>Add</td></tr>
        <tr id="b"><td>1</td><td>Chart</td><td>Edit</td></tr>
        <tr id="c"><td>1</td><td>Chart</td><td>Delete</td></tr>
        <tr id="abc"><td>1</td><td>Chart</td><td>View</td></tr>
        <tr id="1"><td>15</td><td>Manage</td><td>Edit</td></tr>
        <tr id="2"><td>16</td><td>A11</td><td>View</td></tr>
        <tr id="35"><td>15</td><td>Manage</td><td>Delete</td></tr>
    </tbody>
</table>

根据 HTML 规范，任何 HTML 元素的 id在页面上都必须是唯一的。例如，如果您确实将重复的 id 分配给像这里这样的行

<table>
    <tbody>
        <tr id="16"><td>16</td><td>A11</td><td>Add</td></tr>
        <tr id="1"><td>1</td><td>Chart</td><td>Edit</td></tr>
        <tr id="1"><td>1</td><td>Chart</td><td>Delete</td></tr>
        <tr id="1"><td>1</td><td>Chart</td><td>View</td></tr>
        <tr id="15"><td>15</td><td>Manage</td><td>Edit</td></tr>
        <tr id="16"><td>16</td><td>A11</td><td>View</td></tr>
        <tr id="15"><td>15</td><td>Manage</td><td>Delete</td></tr>
    </tbody>
</table>

该表格仍然可以在大多数 Web 浏览器中显示，但使用网格可能真的有问题。例如，如果您选择此类网格的最后一行，则相应的 jqGrid 代码将找出 15 作为当前行的 id，并将$("#15").addClass("ui-state-highlight")用于突出显示当前行。取而代之的是，代码将仅选择（添加类“ui-state-highlight”）到具有 id="15"的第一行。

因此，如果您填写用作 jqGrid 输入的 JSON 数据，您应该非常小心。例如，以下数据可以表示网格包含：

{
    "total": 1,
    "page": 1,
    "records": 7,
    "rows": [
        { "id": "16", "cell": ["16", "A11", "Add"] },
        { "id": "1", "cell": ["1", "Chart", "Add"] },
        { "id": "1", "cell": ["1", "Chart", "Delete"] },
        { "id": "1", "cell": ["1", "Chart", "View"] },
        { "id": "15", "cell": ["15", "Manage", "Delete"] },
        { "id": "16", "cell": ["16", "A11", "View"] },
        { "id": "15", "cell": ["15", "Manage", "Edit"] }
    ]
}

JSON数据可以固定为

{
    "total": 1,
    "page": 1,
    "records": 7,
    "rows": [
        { "id": "1", "cell": ["16", "A11", "Add"] },
        { "id": "2", "cell": ["1", "Chart", "Add"] },
        { "id": "3", "cell": ["1", "Chart", "Delete"] },
        { "id": "4", "cell": ["1", "Chart", "View"] },
        { "id": "5", "cell": ["15", "Manage", "Delete"] },
        { "id": "6", "cell": ["16", "A11", "View"] },
        { "id": "7", "cell": ["15", "Manage", "Edit"] }
    ]
}

或者

{
    "total": 1,
    "page": 1,
    "records": 7,
    "rows": [
        { "id": "16_Add", "cell": ["16", "A11", "Add"] },
        { "id": "1_Add", "cell": ["1", "Chart", "Add"] },
        { "id": "1_Delete", "cell": ["1", "Chart", "Delete"] },
        { "id": "1_View", "cell": ["1", "Chart", "View"] },
        { "id": "15_Delete", "cell": ["15", "Manage", "Delete"] },
        { "id": "16_View", "cell": ["16", "A11", "View"] },
        { "id": "15_Edit", "cell": ["15", "Manage", "Edit"] }
    ]
}

例如。然后世界（包括网格）就会变得正常。