当不存在 children 时，摆脱用于扩展树节点的“+”

Question

我有一个 dojo 树，树上没有 children 的节点旁边不应有通常单击展开并查看 children 的“+”。我正在使用 dojo 版本 1.10.4.

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 and selecting tree nodes programmatically

您会在 dojo 示例中注意到 'Egypt' 在启动时没有“+”并显示一个打开的文件夹，因为没有 children。

Answer 1

在该演示中创建了 dijit/Tree 的新实例，其中属性 autoExpand 设置为 true
（请参阅最后的 data-dojo-props body).

行

    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>

Answer 2

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

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");
    }
}

Answer 3

我想出了一个解决方案，可以在不更改任何默认树行为的情况下删除没有子项的树元素旁边的“+”图像图标。为什么这不是 dojo 树的默认行为超出了我的范围。

总而言之，当树项没有任何子项时，我更改了样式 expando 节点对象的 css for background-image 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";
      }
    }
  }
}

这更加赏心悦目并且直观，可以轻松查看哪些树元素没有子元素，而无需单击树节点上的每个 +。您仍然可以单击 + 曾经所在的位置，这将导致打开的文件夹不显示任何内容，因为没有子项。

当不存在 children 时，摆脱用于扩展树节点的“+”

get rid of '+' for expanding tree nodes when no children present

dojo