Treegrid 자식 노드에서 부모 노드를 확인/선택 취소하는 방법

Question

이것은 post의 후속 조치입니다. 부모 노드가 모든 자식 노드를 선택하는 방법을 이해합니다. 적어도 3 레벨의 노드가있는 TreeGrid가 있고 레벨 2 노드에는 각각 여러 리프 노드가 있습니다. 레벨 2 노드를 클릭하여 그 아래에있는 모든 리프 노드를 선택할 수 있지만 모든 리프 노드의 선택을 취소하면 노드의 조상을 업데이트하려고합니다. 그래서 아이들에게 이벤트를 버블 할뿐만 아니라 체크/체크되지 않은 노드의 부모를 버블 할 방법을 찾고 있습니다. 또한 노드 아래의 모든 리프가 선택되지 않았 음을 의미하는 회색으로 표시된 레벨 2 노드의 체크 상자를 표시하는 것이 좋습니다.

Answer 1

일부 파고 들자 원래 게시물의 코드와 내 자신의 코드를 모두 사용하여이 작업을 수행 할 수있는 방법을 찾았습니다. jqgrid 트리 그리드의 체크 상자를 클릭하면 노드의 부모와 노드의 부모가 동기화됩니다.

beforeSelectRow: function (rowid, e) { 
      var $this = $(this), 
       isLeafName = $this.jqGrid("getGridParam", "treeReader").leaf_field, 
       localIdName = $this.jqGrid("getGridParam", "localReader").id, 
       localData, 
       state, 
       parentState, 
       parentChildren, 
       setChechedStateOfChildrenItems = function (children) { 
        $.each(children, function() { 
         $("#" + this[localIdName] + " input.itmchk").prop("checked", state); 
         updateSelectedNode(row_id, this[localIdName], state); 
         if (!this[isLeafName]) { 
          setChechedStateOfChildrenItems($this.jqGrid("getNodeChildren", this)); 
         } 
        }); 
       }, 
       setCheckedStateofParentItems = function (parent) { 
        parentChildren = $this.jqGrid("getNodeChildren", parent); 
        var selectedChildren = 0; 
        $.each(parentChildren, function() { 
         if ($("#" + this.id + " input.itmchk").prop("checked")) { 
          selectedChildren += 1; 
         } 
        }); 
        if (selectedChildren == 0) { 
         parentState = false; 
        } else { 
         parentState = true; 
        } 
        updateSelectedNode(row_id, parent.id, parentState); 
        $("#" + parent.id + " input.itmchk").prop("checked", parentState); 

        if (parent.parent != null) { 
         setCheckedStateofParentItems($this.jqGrid("getLocalRow", parent.parent), state) 
        } 
       } 

      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); 
       setCheckedStateofParentItems($this.jqGrid("getLocalRow", localData.parent), state) 
       updateSelectedNode(row_id, localData.id, state); //this does the checkbox we checked 
      } 
     }, 

셀 포매터 부 :

{ 
     name: 'name', width: 25, index: 'name', label: "ColumnName", labelAlign: "left", 
     formatter: function (cellvalue, options, rowObject) { 
      var result = "<input type='checkbox' class='itmchk' checked> &nbsp;" + $.jgrid.htmlEncode(cellvalue); 
      if (rowObject.selected == false) { 
       result = result.replace("checked", ""); 
      } 
      return result; 
     } 
    }