Question

我正在使用JSTree，这是我对contextmenu插件的设置：

"contextmenu":{         
    "items": function($node) {
        return {
            "Remove": {
                "separator_before": false,
                "separator_after": false,
                "label": "Delete group",
                "action": function (obj) {
                    $tree.jstree("get_children_dom", $node).each(function(child){
                        $tree.jstree("move_node", $tree.jstree("get_node", child, true), "#", "last", function(node, parent, pos){
                            alert(1);
                        });
                    });
                    $tree.jstree("delete_node", $node);
                }
            }
        };
    }
}

基本上，我希望被删除的群组中的孩子向上移动。我目前得到的功能应该将节点放在最后，但是如何将它们放在已删除节点的位置？此外，当前的代码不起作用 - 我做错了什么？

最后但并非最不重要的一点，如何在删除之前检查节点类型？

提前致谢

Answer 1

基本上，我希望被删除的群组中的孩子向上移动。

如果向上指的是进入已删除节点的位置，请检查以下示例：

var data = [{
  'text': 'item 1',
  'children': [{
    text: 'item 1-1',
    children: [{
      text: 'item 1-1-1',
      children: [{
        text: 'item 1-1-1-1'
      }, {
        text: 'item 1-1-1-2'
      }]
    }, {
      text: 'item 1-1-2'
    }, {
      text: 'item 1-1-3'
    }]
  }, {
    text: 'item 1-2',
    children: [{
      text: 'item 1-2-1'
    }, {
      text: 'item 1-2-2'
    }]
  }, {
    text: 'item 1-3',
    children: [{
      text: 'item 1-3-1'
    }, {
      text: 'item 1-3-2'
    }]
  }, {
    text: 'item 1-4',
    children: [{
      text: 'item 1-4-1'
    }, {
      text: 'item 1-4-2'
    }]
  }]
}, {
  'text': 'item 2',
  children: [{
    text: 'item 2-1',
    children: [{
      text: 'item 2-1-1'
    }, {
      text: 'item 2-1-2'
    }]
  }, {
    text: 'item 2-2',
    children: [{
      text: 'item 2-2-1'
    }, {
      text: 'item 2-2-1'
    }]
  }, {
    text: 'item 2-3'
  }]
}, {
  'text': 'item 3',
  children: [{
    text: 'item 3-1',
    children: [{
      text: 'item 3-1-1'
    }, {
      text: 'item 3-1-2'
    }]
  }, {
    text: 'item 3-2'
  }]
}, {
  'text': 'item 4 (you cannot delete this one)',
  'disableDelete': true,
  children: [{
    text: 'item 4-1'
  }, {
    text: 'item 4-2'
  }, {
    text: 'item 4-3'
  }]
}];

var $tree = $('#jstree_demo').jstree({
  'plugins': ['contextmenu'],
  'core': {
    'animation': 0,
    'check_callback': true,
    'themes': {
      'stripes': true
    },
    'data': data
  },
  'contextmenu': {
    'items': function($node) {
      return {
        'Remove': {
          'separator_before': false,
          'separator_after': false,
          'label': 'Delete group',
          'action': function(obj) {

            if ($node.original.disableDelete) {
              document.write('deletion is forbidden for this node');
              return;
            }

            var nodes = $node.children.slice(0); // jstree behaves erratic if we try to move using $node.children directly, so we will clone the array to prevent this issue

            var $row = $(obj.reference[0].closest('li'));

            $tree.jstree('move_node', nodes, $node.parent, $row.index());

            $tree.jstree('delete_node', $node);

          }
        }
      };
    }
  }
});

<div id="jstree_demo"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css">

最后但并非最不重要的一点，如何在删除之前检查节点类型？

我添加了一个小样本，向您展示如何完成它。检查节点的自定义属性disableDeletion的声明：

var data = [{'text': 'item 4 (you cannot delete this one)', 'disableDelete': true}]

上下文菜单操作中的验证：

if ($node.original.disableDelete) {
    document.write('deletion is forbidden for this node');
    return;
}

JSTree：移动所有子节点

1 个答案: