javascript – 重复列的Jqgrid选择问题

我在Jqgrid中遇到了行选择问题.我在网格中有重复的行.
每当我选择副本或它选择该重复行的第一个记录.

解决方法:

对于许多开始使用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.您将在jqGrid使用的最多methods或events中找到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"] }
    ]
}

例如.然后世界(包括网格)将变得可以.

标签：javascript,jquery,asp-net-mvc,jqgrid,jqgrid-asp-net
来源： https://codeday.me/bug/20191007/1867816.html