javascript - Jqgrid 选择重复列的问题

Question

我在 Jqgrid 中遇到行选择问题。我在网格中有重复的行。 每当我选择重复项或它选择该重复行的第一条记录时。

Answer 1

这是很多刚开始使用jqGrid的人都会遇到的问题。如果您用具有 id 重复项 的行填充网格，就会出现这种奇怪的选择行为。因此了解 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。你会在最methods中找到rowid参数或events由 jqGrid 使用。行的 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>

该表仍然可以在大多数网络浏览器中显示，但使用网格可能确实存在问题。例如，如果您选择此类网格的最后一行，相应的 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"] }
    ]
}

例如。那么世界(包括网格)就会变得美好。