2017-03-28 196 views
0

這是從此post的後續行動。我瞭解父節點如何選擇所有的子節點。我有一個至少有3級節點的TreeGrid,每個級別2節點都有多個葉節點。我可以點擊級別2節點來選擇它下面的所有葉節點,但是如果我取消選中所有葉節點,我想更新節點的祖先。因此,我正在尋找一種方法,不僅可以將事件發送給子節點,還可以查找已選中/未選中的節點的父節點。另外,將第2級節點的複選框變灰顯示錶示並非節點下的所有葉子都被選中。Treegrid如何檢查/取消選中子節點的父節點

回答

0

經過一番挖掘,我找到了一種使用原始帖子代碼和一些自己的代碼進行工作的方法。當點擊jqgrid Tree網格中的複選框時,這將使節點的子節點和節點的父節點保持同步。

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; 
     } 
    } 
相關問題