Treegrid, wie übergeordnete Knoten von Kindern Knoten überprüfen/deaktivieren

Question

Dies ist ein Follow-up von diesem post. Ich verstehe, wie die übergeordneten Knoten alle untergeordneten Knoten auswählen können. Ich habe ein TreeGrid mit mindestens 3 Ebenen von Knoten und jeder der Level 2 Knoten hat mehrere Blattknoten. Ich kann auf den Knoten der Ebene 2 klicken, um alle darunter liegenden Blattknoten auszuwählen, aber wenn ich alle Blattknoten deaktiviere, möchte ich die Abstammung des Knotens aktualisieren. Also suche ich nach einer Möglichkeit, die Ereignisse nicht nur an die Kinder, sondern auch an die Eltern des aktivierten/unmarkierten Knotens zu blasen. Es wäre auch schön, das Kontrollkästchen des Knoten der Ebene 2 grau dargestellt zu zeigen, was bedeutet, dass nicht alle Blätter unter dem Knoten ausgewählt sind.

Answer 1

Nach einigem Graben habe ich einen Weg gefunden, das funktioniert sowohl mit dem Code aus dem ursprünglichen Post als auch mit meinem eigenen Code. Dadurch werden sowohl die untergeordneten Knoten als auch die übergeordneten Elemente des Knotens synchron gehalten, wenn Sie auf ein Kontrollkästchen im jqgrid-Baumraster klicken.

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

Der Zellenformatierer Teil:

{ 
     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; 
     } 
    }