jqgrid subgrid의 위치를 ​​변경하거나 사용자 정의 컬럼에 서브 그리드 아이콘을 추가하십시오.

Question

저는 jqgrid를 처음 사용합니다. 내가 trirand.com에서 코드를 가지고 subgrid와 jqgrid를 만들고 싶습니다. 그러나이 예제에서 자식 행 또는 하위 글리프를 표시하는 하위 아이콘은 기본적으로 모든 행의 첫 번째 위치에 있습니다. 열 데이터 텍스트와 (+) 아이콘이 같은 테이블 셀에 있도록 아이콘의 위치를 ​​다른 열로 어떻게 바꿀 수 있습니까? 내 데이터가 JSON 형식이므로 아이콘 위치 요구 사항이 변경 될 수 있습니다. 그것의 클릭에 나는 관련된 subgrid를 보여줄 필요가있다.

모든 도움이 저에게는 매우 중요합니다.

Answer 1

이렇게하려면 하위 글리치를 토글하는 메서드를 사용할 수 있습니다. 이러한 메서드를 expandSubGridRow, collapseSubGridRow 또는 toggleSubGridRow라고합니다.

자세한 내용은 당신이 원하는 셀에 클릭 (포맷터 또는 cellattr 이벤트를 사용하여)를 결합 할 수 Guriddo documentation here

(가) 아 격자 행이 솔루션은있는 jqGrid의 버전에 따라

Answer 2

을 전환 참조 , 당신은 포크 jqGrid를 사용합니다. Tony Tomov는 상업적으로 Guriddo jqGrid JS을 개발했으며 free jqGrid을 개발했습니다. 완전히 무료로 사용할 수 있습니다.

무료 jqGrid 포크에 jqGrid의 이전 코드의 많은 부분을 다시 작성했습니다. 기능 중 하나 : "subgrid" 열을 격자의 다른 위치로 이동할 수 있습니다. 열을 재정렬하려면 remapColumns 이상의 새로운 remapColumnsByName 메서드를 사용해야합니다. 하나는 remapColumnsByName의 마지막 열을 건너 뛸 수 있습니다.이 위치는 변경되지 않거나 먼저 표준 열 (예 : rownumbers: true이 사용 된 경우 "rn" 열)을 건너 뛸 수 있습니다. 데모 https://jsfiddle.net/OlegKi/o1L8k2k6/는 열 "name" 및 "invdate" 후 "subgrid" 열을 이동하려면 다음 호출

.jqGrid("remapColumnsByName", ["name", "invdate", "subgrid"], true); 

를 사용합니다. "-"당신이 "+"/ 배치해야하는 경우 하나는

같은 결과를 볼 것이다 다른 컬럼의 내부 아이콘을 다음 우선 사용해야합니다, 사용자 정의 포맷터 내부에있는 아이콘을 배치 열의 클릭을 감지하려면 beforeSelectRow을 사용할 수 있습니다. 또한 .jqGrid("hideCol", "subgrid")을 사용하여 표준 subgrid 열을 숨길 수 있습니다. 정의 포매터의 코드

formatter: function (cellValue) { 
    // place the icon using Font Awesome icons (http://fontawesome.io/) 
    // the the original data itself. One should encode the data 
    // with respect of $.jgrid.htmlEncode for example to be sure that 
    // ANY data could be correctly displayed in the column (like ' symbol) 
    return "<span class='mysubgrid fa fa-fw fa-plus'></span>" + 
     "&nbsp;" + $.jgrid.htmlEncode(cellValue); 
} 

https://jsfiddle.net/OlegKi/o1L8k2k6/2/가

같다 아 격자

beforeSelectRow: function (rowid, e) { 
    var $target = $(e.target), $subgridTd; 
    if ($target.hasClass("mysubgrid")) { 
     $subgridTd = $target.closest("tr.jqgrow>td") 
      .siblings("td") 
      .filter(".ui-sgcollapsed"); 

     // simulate opening/closing of the subgrid 
     $target.removeClass("fa-minus fa-plus"); // remove both classes 
     $target.addClass(
      $subgridTd.hasClass("sgexpanded") ? 
       "fa-plus" : 
       "fa-minus" 
     ); 
     // simulate click on the original subgrid button 
     $subgridTd.find(".sgbutton").click(); 
    } 
    return true; // allow selection of the row 
} 

에게 폐쇄/개방 처리 부가 beforeSelectRow 다음 코드를 사용 데모, 예를 들면, 수