중복 열이있는 Jqgrid 선택 문제

Question

행 선택이있는 Jqgrid의 문제가 있습니다. 표에 행이 중복되었습니다. 내가 중복을 선택하거나 그 중복 행의 첫 번째 레코드를 선택할 때마다.

Answer 1

이있는 jqGrid를 사용하기 시작 많은 사람들의 일반적인 문제입니다. 이러한 비정상적인 선택 동작은 ID 중복을 갖는 행으로 표를 채우면 존재합니다. 따라서 입력의 ID가 jqGrid에 의해 어떻게 사용되는지 이해하는 것이 매우 중요합니다.

jqGrid는 격자를 표시하기 위해 내부적으로 HTML 마크 업을 사용합니다. 모든 표에 대해 <table>, <tbody> (표 본문 - 열 머리글 없음), <tr> (표 행) 및 <td> (표의 표)을 사용합니다. html로 조각 아래 하나가 그리드의 행-빠르게 액세스 할 수 있도록있는 jqGrid의 디자인은 예를

<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> 

에 대한 귀하의 그리드를 나타낼 수 있습니다. 빠른 액세스를 구현하려면 <tr> (테이블 행)에 고유 ID을 할당해야합니다. jqGrid가 사용하는 대부분의 methods 또는 events에서 ROWID 매개 변수를 찾을 수 있습니다. 행의 ID는 이어야 테이블의 행 세트에있는 행을 식별해야합니다. 경우에 그리드는 HTML 요소 의 ID가 페이지에 고유해야합니다 HTML 사양에 따라 다음

<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> 

처럼 될 것입니다. 당신은 예를

<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> 

테이블 여기를 같은 행에 중복 ID를 할당 할 경우 여전히 대부분의 웹 브라우저에 표시 할 수 있지만 그리드와 함께 작업하는 것은 정말 문제가 될 수 있습니다. 예를 들어 해당 그리드의 마지막 행을 선택하면 해당 jqGrid 코드는 현재 행의 ID로 15를 찾고 현재 행을 강조 표시하려면 $("#15").addClass("ui-state-highlight")을 사용합니다. 그 대신 코드는 id = "15"인 첫 번째 행에만 클래스를 선택합니다 ("ui-state-highlight"클래스 추가).

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

에 고정 될 수있다. 그러면 세상 (그리드 포함)은 괜찮을 것입니다.