dojo 不存在子节点时，取消展开树节点的“+”

sd2nnvve 于 2022-12-16 发布在 Dojo

关注(0)|答案(3)|浏览(172)

我有一个dojo树，树上没有子节点的节点旁边不应该有“+”，通常单击它可以展开并看到子节点。

var treeJSON = [{"id": "0", "name":"TreeTop",   "type":"Enterprise", "parent":"", "sort_key":"0",},{"id": "1", "name":"West", "type":"Region", "parent":"0", "sort_key":"1"},{"id": "2", "name":"East", "type":"Region", "parent":"0", "sort_key":"2"},{"id": "3", "name":"SE", "type":"Region", "parent":"2", "sort_key":"0"}];

dojo tree jsfiddle
我希望看到的是dojo示例中的内容（以编程方式运行Expanding和selection tree node示例：
以编程方式展开和选择树节点
您会注意到在dojo示例中，'Egypt'在启动时没有'+'，并且显示一个打开的文件夹，因为没有子文件夹。

dojo

来源：https://stackoverflow.com/questions/43926331/get-rid-of-for-expanding-tree-nodes-when-no-children-present

3条答案

按热度按时间

3pvhb19x1#

在该演示中，创建了dijit/Tree的新示例，并将属性autoExpand设置为true
(see正文最后一行中的data-dojo-props）。

require(["dojo/aspect", "dojo/_base/window","dojo/store/Memory", "dojo/store/Observable",
      "dijit/tree/ObjectStoreModel", "dijit/Tree", "dojo/parser",
      "dijit/tree/dndSource","dojo/topic"], function(aspect, win, Memory, Observable, ObjectStoreModel, Tree, parser, dndSource, topic){
try{
      var treeJSON = [{"id": "0", "name":"TreeTop",	"type":"Enterprise", "parent":"", "sort_key":"0",},{"id": "1", "name":"West", "type":"Region", "parent":"0", "sort_key":"1"},{"id": "2", "name":"East", "type":"Region", "parent":"0", "sort_key":"2"},{"id": "3", "name":"SE", "type":"Region", "parent":"2", "sort_key":"0"}];
       var myStore = new Memory({data: treeJSON});
       myStore.getChildren = function(object) {
         return this.query({parent: object.id}, {sort: [{attribute: "sort_key"}]});
       };

       aspect.around(myStore, "put", function(originalPut) {
	       return function(obj, options) {
	         if (options && options.parent) {
	           obj.parent = options.parent.id;
	         }
	         return originalPut.call(myStore, obj, options);
         }
       });
      myStore = new Observable(myStore);
      EvModel = new ObjectStoreModel({
        store: myStore,
        query: { id: "0" }
      });
      
      topic.subscribe("/dnd/drop",treeDropEvt2);
      
      tree = new Tree({
        autoExpand: true, // <== this was missing
        model: EvModel,
        dndController: dndSource,
        //onDndDrop: treeDropEvt,
        checkAcceptance:dndAccept,
	      checkItemAcceptance:itemTreeCheckItemAcceptance,
	      dragThreshold:8,
	      betweenThreshold: 5
      });

      tree.placeAt('currTree');

		  tree.onLoadDeferred.then(function(){
        console.log('onLoad event');
      });
      
      tree.set('paths',[['0','2','3']]); // Expand tree and highligh 'SE'
      
      tree.startup();
       
    } catch(err) {
      alert(err);
    }
    })
    
function treeDropEvt(source, nodes, copy) {
  console.log('treeDropEvt');
  console.dir(source);
  console.dir(nodes);
  console.dir(copy);
}

function treeDropEvt2(source, nodes, copy, target) {
  console.log('treeDropEvt2');
  console.dir(source);
  console.dir(nodes);
  console.dir(copy);
}

function dndAccept(source,nodes){
  console.log('dndAccept');
  console.dir(source);
  console.dir(nodes);
  return this.tree.id != "myTree";
}

function itemTreeCheckItemAcceptance(node,source,position){
  source.forInSelectedItems(function(item){
    console.log("testing to drop item of type " + item.type[0] + " and data " + item.data + ", position " + position);
  });
  var item = dijit.getEnclosingWidget(node).item;
  console.log('getEnclosingWidget(node).item: ');
  console.dir(item);
  console.dir(dijit.getEnclosingWidget(node));
   return position;
}

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" />
  
  <body class="claro">
  <table border=1>
  <tr><td style="text-align: center;">Current Tree</td></tr>
  <tr><td style="vertical-align: top">
    <div id="currTree"></div>
  </td></tr>
  </table>     
  </body>

赞(0）回复(0）举报 2022-12-16

4sup72z82#

在树的onOpenTreeNode函数中，我检查了每个子类，并像这样替换了类，但我已经知道它们是否有子类。

onOpenTreeNode: function(item, node) {
  if (node.containerNode)
    for (var i in node.containerNode.children) {
      var elem = node.containerNode.children[i];
      if (i < node.containerNode.childElementCount)
        domClass.replace(elem.children[0].children[1], "dijitTreeExpando dijitTreeExpandoLeaf");
    }
}

赞(0）回复(0）举报 2022-12-16

uxh89sit3#

我想出了一个解决方案，它可以删除没有子元素的树元素旁边的“+"图标，而不改变任何默认的树行为，我不明白为什么这不是Dojo树的默认行为。
总之，当树项没有任何子项时，我更改了expando节点对象的样式，因此background-image的css for +更改为none
在onOpen事件中：

itemObj.expandoNode.style['background-image'] = "none";

Updated jsfiddle showing a working example
当在初始化期间加载树时，我通过调用这个函数创建了一个父id的哈希值，并计算有多少引用了这个id（不需要计算，但我还是计算了）：

var parentIds = {};
function buildParentIds(treeJSON) {
  for (var i=0;i<treeJSON.length;i++) {
    var parentId = treeJSON[i].parent;
    if (!parentIds.hasOwnProperty(parentId)) {
      parentIds[parentId] = 0;
    } 
    parentIds[parentId]++;
  }
  console.log('buildParentIds()');
  console.dir(parentIds);
}

然后，在创建树对象时，我覆盖onOpen事件：

onOpen: function(item,node) {
  console.log('onOpen');
  if (node.containerNode) {
    for (var i = 0; i < node.containerNode.childElementCount; i++) {
      var chldNode = node.containerNode.childNodes[i];
      console.log('Node id: ' + chldNode.id);
      var itemObj = dijit.byId(chldNode.id);
      console.log('itemObj for ' + itemObj.item.name);
      console.dir(itemObj);
      //If item.id is not in parentIds then it has no children
      if (!parentIds.hasOwnProperty(itemObj.item.id)) {
        itemObj.expandoNode.style['background-image'] = "none";
      }
    }
  }
}

这样看起来更赏心悦目，也更直观，无需点击树节点上的每个+，就可以轻松查看哪些树元素没有子元素。您仍然可以点击+曾经所在的位置，这将导致打开文件夹，但由于没有子元素，该文件夹什么也不显示。

赞(0）回复(0）举报 2022-12-16

我来回答

dojo 不存在子节点时，取消展开树节点的“+”

3条答案

相关问题

热门标签

最新问答