zkの動的ツリーの親ノードの選択時にすべての子ノードを選択する方法は？

Question

私は現在、zkで動的なツリーを使っています。コードは次のとおりです：

<tree id="treeview" multiple="true" width="330px" model="@load(vm.treeModel)" 
          style="border: 1px solid #9D9D9D;" vflex="1" rows="14" > 
         <treecols sizable="true"> 
          <treecol /> 
         </treecols> 
         <template name="model"> 
          <treeitem> 
           <treerow> 
            <treecell><checkbox label="@load(each.data.name)" checked="true"/></treecell> 
           </treerow> 
          </treeitem> 
         </template> 
        </tree> 

親チェックボックスをオフにすると、すべての子がチェックされていないことが必要です。 逆も同様です。つまり、親チェックボックスをチェックすると、すべての子をチェックする必要があります。

これを行うには、zkのツリータグに利用できる属性はありますか？ そうでない場合、それを行う他の方法は何ですか？

Answer 1

私は同じ問題に直面していましたが、適切な選択イベントをすばやく正確にスローするクライアント側のソリューションがありました。

、あなたのツリーアイテムレンダラーで、それを有効にするには、このウィジェットリスナーを追加するには：あなたのケース（テンプレート）では

treeitem.setWidgetListener(Events.ON_CLICK, "selectSubTreesOnItemClick(this, event);"); 

を、このようにそれを実行します。

<tree xmlns:w="client"> 
    ... 
    <treeitem w:onClick="selectSubTreesOnItemClick(this, event)"> 

その後、次のインポートJSファイル（あなたのZULで、どこか<script src="/js/treeselection.js" />を追加）：

function selectSubTreesOnItemClick(item, event) { 
    // if clicked outside of check box, reset selection 
    if (!jq(event.target).is('.z-treerow')) { 
     item.getTree().clearSelection(); 

     // re-select clicked node 
     item.setSelected(true); 
    } 

    privateSelectDescendants(item); 

    privateSelectParentIfAllDescendantsSelected(item); 

    // update selection 
    item.getTree().fireOnSelect(item); 

    // prevent interference of the tree's default click behavior (like selection of the clicked node ;)). 
    event.stop(); 
} 

/** 
* @param parent if selected, selects all children (and grand-children and so on), otherwise 
*     removes them from selection. 
*/ 
function privateSelectDescendants(parent) { 
    var items = parent.getTree().itemIterator(); 

    // find all descendants of parent 
    while (items.hasNext() && items.next() !== parent) {} 
    var stopAt = privateGetFirstNonDescendant(parent); 

    // check descendants 
    while (items.hasNext()) { 
     var descendant = items.next(); 
     if (descendant === stopAt) { 
      break; 
     } else { 
      descendant.setSelected(parent.isSelected()); 
     } 
    } 
} 

/** 
* @param item parent will be selected if item and all its siblings are selected, otherwise 
*     unselected. Repeated for grandparents, great-grandparents, and so on. 
*/ 
function privateSelectParentIfAllDescendantsSelected(item) { 
    if (item.getParentItem() != null) { 
     var parent = item.getParentItem(); 

     // find all descendants of parent 
     var items = parent.getTree().itemIterator(); 
     while (items.hasNext()) { 
      if (items.next() === parent){ 
       break; 
      } 
     } 
     var stopAt = privateGetFirstNonDescendant(parent); 

     // check descendants 
     var allDescendantsSelected = true; 
     while (items.hasNext()) { 
      var child = items.next(); 
      if (child === stopAt) { 
       break; 
      } else if (!child.isSelected()) { 
       allDescendantsSelected = false; 
       break; 
      } 
     } 
     parent.setSelected(allDescendantsSelected); 

     // continue with grandparents 
     privateSelectParentIfAllDescendantsSelected(parent); 
    } 
} 

/** 
* @param item 
* @returns the next item that is on the same or a higher level as item. 
*    Undefined if item is the last node or only followed by children. 
*/ 
function privateGetFirstNonDescendant(item) { 
    var result = item.nextSibling; 

    while (!result && item.getParentItem() != null) { 
     item = item.getParentItem(); 
     result = item.nextSibling; 
    } 

    return result; 
} 

（UN）ツリーノードウィルを選択また、その子孫を選択する（un）。さらに、すべてのノードの兄弟が選択されている場合、親ノードが選択され、そうでない場合は選択されません（ルートノードまですべて移動します）。