Проблема выбора Jqgrid с дубликатами столбцов - PullRequest
Новая
       7

Проблема выбора Jqgrid с дубликатами столбцов

0 голосов
/ 11 августа 2011

Я столкнулся с проблемой в Jqgrid с выбором строки. Я продублировал строки в сетке. всякий раз, когда я выбираю дубликат или он выбирает первую запись этой строки дубликата.

enter image description here

1 Ответ

4 голосов
/ 11 августа 2011

Это общая проблема для многих людей, которые начинают использовать jqGrid.Такое странное поведение выбора существует, если вы заполняете сетку строками, имеющими id дубликатов .Так что чрезвычайно важно понять, как jqGrid .

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> (строка таблицы) уникальный идентификатор .Вы найдете параметры rowid в большинстве методов или событий , используемых jqGrid.Идентификатор строки должен идентифицировать строку в наборе строк таблицы.В этом случае сетка будет выглядеть следующим образом: 

<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 должен быть уникальным на странице .Если вы присваиваете одинаковые идентификаторы строкам, как здесь, например, 

<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 в качестве идентификатора текущей строки и будет использовать $("#15").addClass("ui-state-highlight") для выделения текущей строки.Вместо этого код выберет (добавит класс "ui-state-highlight") только к первой строке , которая имеет id = "15".

Так что вы должны быть оченьбудьте осторожны, если вы заполните данные JSON, используемые в качестве входных данных jqGrid.Следующие данные, например, могут представлять сетку, содержащую: 

{
    "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"] }
    ]
}

, например.Тогда мир (включая сетку) станет нормальным.

...