Support of SHIFT key for mutilple select

eitzenbe commented 6 years ago

AS of now ztree only supports multiple selection utilizing the Ctrl key. I wonder how difficult it would be to allow selections based on SHIFT key too?

zTree commented 6 years ago

If you load data of nodes with the async, which nodes will be selected when you press the 'shift' key? This is the key about your quesion.

eitzenbe commented 6 years ago

I am loading the tree in sync mode, but the topic is AFTER the tree has loaded and is displayed, you can use the CTRL key to select multiple nodes. On modern OS it is also possible to use the SHIFT key to select intervals of nodes. But this seems to be not supported in zTree....

example:

Node1 Node2 (child of 1) Node3 Node4 Node5

First I select Node1, then i press SHIFT and keep it pressed while clicking on Node4. Expected result: Nodes1 to 4 are now selected Actual Result: Only Node4 gets selected

zTree commented 6 years ago

I understand it in sync mode.

But I'm worried about what should I do in async mode. This is why I don't support SHIFT key.

I'm very confused about it.

Now, you can support SHIFT key by your self. And today, I will give you some code for it.

eitzenbe commented 6 years ago

I see what you mean, well basically I would expect the tree either 1) to remember the two "end points" of the SHIFT selection and add every new node received in async mode to the selection if it is "IN" or 2) ignore the SHIFT selection for newly received nodes completely. I assume BOTH is fine from UI perspective. It just needs to be clearly communicated and consistent. From that I would propose 1)

BTW thanx for all your work and the willingness to help

zTree commented 6 years ago

This code can support SHIFT. Bug this code can't support with async mode. You can refer it.

<!DOCTYPE html>
<HTML>
<HEAD>
  <TITLE></TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="../../../css/demo.css" type="text/css">
  <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
  <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
  <SCRIPT type="text/javascript">
    <!--
    var setting = {
      data: {
        simpleData: {
          enable: true
        }
      },
      callback: {
        beforeClick: beforeClick,
        onClick: onClick
      }
    };

    var zNodes = [
      {id: 1, pId: 0, name: "普通的父节点", open: true},
      {id: 11, pId: 1, name: "叶子节点 - 1"},
      {id: 12, pId: 1, name: "叶子节点 - 2"},
      {id: 13, pId: 12, name: "叶子节点 - 3"},
      {id: 2, pId: 0, name: "NB的父节点", open: true},
      {id: 21, pId: 2, name: "叶子节点2 - 1"},
      {id: 22, pId: 2, name: "叶子节点2 - 2"},
      {id: 23, pId: 22, name: "叶子节点2 - 3"},
      {id: 3, pId: 0, name: "郁闷的父节点", open: true},
      {id: 31, pId: 3, name: "叶子节点3 - 1"},
      {id: 32, pId: 3, name: "叶子节点3 - 2"},
      {id: 33, pId: 3, name: "叶子节点3 - 3"}
    ];

    var startNode;

    function beforeClick(treeId, treeNode, clickFlag) {
      var treeObj = $.fn.zTree.getZTreeObj('treeDemo');
      var selectedNodes = treeObj.getSelectedNodes();
      if (!clickFlag || selectedNodes.length === 0) {
        startNode = null;
      } else {
        startNode = selectedNodes[selectedNodes.length - 1];
      }
      return true;
    }

    function onClick(event, treeId, treeNode, clickFlag) {
      if (clickFlag && event.shiftKey) {
        selectNodes(startNode, treeNode);
      }
    }

    function selectNodes(startNode, endNode) {
      if (!startNode || !endNode || endNode === startNode) {
        return;
      }
      var startPath = startNode.getPath();
      var endPath = endNode.getPath();
      var i, t, needSwitch = null;
      for (i = 0; i < startPath.length && i < endPath.length; i++) {
        if (startPath[i] === endPath[i]) {
          continue;
        }
        needSwitch = startPath[i].getIndex() > endPath[i].getIndex();
        break;
      }
      if (needSwitch === null) {
        needSwitch = startPath.length > endPath.length;
      }
      if (needSwitch) {
        t = endNode;
        endNode = startNode;
        startNode = t;
      }
      var treeObj = $.fn.zTree.getZTreeObj('treeDemo');
      var n = startNode;
      while (n) {
        treeObj.selectNode(n, n !== startNode, true);
        if (n === endNode) {
          break;
        }
        if (n.isParent && n.children.length > 0) {
          n = n.children[0];
        } else if (!n.isLastNode) {
          n = n.getNextNode();
        } else {
          while (n) {
            n = n.getParentNode();
            if (n && !n.isLastNode) {
              n = n.getNextNode();
              break;
            }
          }
        }
      }
    }

    $(document).ready(function () {
      $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });
    //-->
  </SCRIPT>
</HEAD>

<BODY>
<h6>[ core/click.html ]</h6>
<div class="content_wrap">
  <div class="zTreeDemoBackground left">
    <ul id="treeDemo" class="ztree"></ul>
  </div>
</div>
</BODY>
</HTML>

eitzenbe commented 6 years ago

Cool stuff, adapted and added it to my code. SMall issue is with selecting nodes of different levels. The behaviour for draging such multiple selections is difficult to describe but it doesnt seem to be consistent. Sometimes only a single node is then dragged, sometimes...... I will have to find some time and analyse this in depth. For now BIG Thanx for the code snippet

zTree commented 6 years ago

sorry, zTree can't support this.

example: A --> A1/ A2/ A3 B --> B1/ B2/ B3 A1 --> A11 / A12 / A13

If you select A/A2/A1/A12, and you drag these nodes to B3's children. So how will I do with A3 / A11 / A13 ??

there are some difficult to do, because this plugin will support so many ideas for every one, so zTree can't support drag the nodes which have different parentNode.

dearsina commented 6 years ago

Thanks for the code snippet. I have a very simple, flat tree and being able to SHIFT+select is wonderful. My next challenge is to try to replicate multi-select on mobile (where there are no SHIFT or CTRL buttons).

zTree commented 6 years ago

@dearsina you can use beforeCheck and selectNode() method .

zTree / zTree_v3

Support of SHIFT key for mutilple select #324