TreeGrid에 체크 박스를 하위 레벨 때와 같은 JSON 데이터로 내가 열 "이름"에 포함 된 체크 박스와 TreeGrid에 구축 한 부모

Question

마르크 :

{"id":"1","name":"<input type='checkbox' class='itmchk' ><strong>ECHANGEUR<\/strong>","level":"0","parent":"null","isLeaf":false,"expanded":true,"loaded":true} 

이 체크 박스는 나무 마진을 따라하기 때문에 (I 희망 나는 프랑스 인이기 때문에 잘 알고있다.)

하나의 행을 표시/표시 해제 할 때 하위 수준 확인란을 선택/선택 취소하고 싶지만 읽은 후에 게시물을 보게되면 예상 한 결과를 얻을 수 있습니다. 예를 들어

설명 : 나는 부모 행의 체크 박스를 클릭하면 는 (그래서 선택 해제 될)는, 행

내가있는 jqGrid와 안돼서하지만 누구 내가 속성을 배우고 싶은 훌륭한 도구입니다 UNCHECKED 될 하위 수준. 제발 이런 식으로 나를 몰 수 있습니까? 아니면 제가하고 싶은 것을 찾을 수있는 곳을 제안 할 수 있습니까? 나는 문서를 찾았지만 성공하지 못했습니다. 사전 JiheL

난 당신이 JSON 데이터의 내부에 HTML 조각을 배치하지 않는 것이 좋습니다 모든

Answer 1

최초의

많은 감사합니다. 하나는 그리드 셀 안에 체크 박스를 포함 custom formatter를 사용할 수 있습니다

formatter: function (cellvalue) { 
    return "<input type='checkbox' class='itmchk' ><strong>" + 
     $.jgrid.htmlEncode(cellvalue) + "</strong>"; 
} 

는 그리드의 beforeSelectRow 콜백을 사용할 수있는 체크 박스의 체크/선택 취소를 제어 할 수 있습니다. jqGrid는 내부적으로 그리드 본문에 click 이벤트를 바인딩합니다. 따라서 이벤트 핸들러는 event bubbling 요소에 직접 존재하지 않습니다. 그것은 하나의 beforeSelectRow 콜백 내부의 모든 체크 박스의 체크/체크 해제를 잡을 수 있습니다. beforeSelectRow 안에 먼저 제어하려는 확인란을 클릭했는지 테스트해야합니다.

콜백 beforeSelectRow에는 rowid과 event object의 두 매개 변수가 있습니다. 이벤트 개체의 target 속성은 사용자가 클릭 한 DOM 요소입니다. 이러한 모든 체크 박스에 사용자 정의 itmchk 클래스를 추가하기 때문에 클릭 된 요소의 클래스를 검증하기에 충분합니다.

다음 문제는 getNodeChildren과 같은 TreeGrid와 함께 작동하는 많은 jqGrid 메소드가 record을 입력 매개 변수로 가지고 있지만 대신 rowid 만 가질 수 있다는 것입니다. jqGrid는로드 된 항목을 로컬에 저장합니다. 따라서 record을 rowid에서 가져 오는 가장 간단한 방법은 getLocalRow 방법을 사용하는 것입니다.

beforeSelectRow 콜백의 코드는 다음이 될 수있는 결과 :

beforeSelectRow: function (rowid, e) { 
    var $this = $(this), 
     isLeafName = $this.jqGrid("getGridParam", "treeReader").leaf_field, 
     localIdName = $this.jqGrid("getGridParam", "localReader").id, 
     localData, 
     state, 
     setChechedStateOfChildrenItems = function (children) { 
      $.each(children, function() { 
       $("#" + this[localIdName] + " input.itmchk").prop("checked", state); 
       if (!this[isLeafName]) { 
        setChechedStateOfChildrenItems($this.jqGrid("getNodeChildren", this)); 
       } 
      }); 
     }; 
    if (e.target.nodeName === "INPUT" && $(e.target).hasClass("itmchk")) { 
     state = $(e.target).prop("checked"); 
     localData = $this.jqGrid("getLocalRow", rowid); 
     setChechedStateOfChildrenItems($this.jqGrid("getNodeChildren", localData), state); 
    } 
} 

그것은 아이들의 체크 박스가 체크 될 것이라고 언급하는 것이 중요합니다/단지 이전에로드 된 항목에 체크되지 않은. 한 번에 그리드의 데이터를로드하고 loaded: true 속성을 사용하기 때문에 문제가되지 않습니다.

해당 demo은 위의 코드가 실제로 작동 함을 보여줍니다. 이전 질문에 답하여 만든 데모를 수정 한 것입니다.