web-dev-qa-db-ja.com

jstreeチェックボックスの操作

すべてのノードにチェックボックスが付いたjstreeがあります。以下を実現したい。 APIのどのメソッドまたは部分がそれを行うのに役立つかを教えてください。

  1. 親ノードが選択されているときに子ノードをチェックしたくありません。現在、すべての子が選択されます。
  2. 子ノードがチェックされている場合は、そのすべての親ノードをチェックします。現在、親ノードは部分的にチェックされます（正方形）。部分選択を完全に削除したい。つまり、jstreeチェックボックスの動作を完全に変更したいのです。

APIドキュメントを検索しましたが、何も見つかりませんでした。

javascriptjqueryhtmlcssjstree
13
Ashwin

Real_checkboxesオプションを見てください。これはあなたが始めるかもしれません：

        $("#jstree").jstree({
           "checkbox": {
              real_checkboxes: true,
              real_checkboxes_names: function (n) {
                 var nid = 0;
                 $(n).each(function (data) {
                    nid = $(this).attr("nodeid");
                 });
                 return (["check_" + nid, nid]);
              },
              two_state: true
           },
           "plugins": ["themes", "json_data", "ui", "checkbox"]
        })
        .bind('open_node.jstree', function (e, data) {
           $('#jstree').jstree('check_node', 'li[selected=selected]');
        })

子がチェックされたときに親をチェックするように、バインド動作を変更する必要があるでしょう。

8
chris

JSTreeバージョン3.1.1の時点で、これが私が行うことです。

$('#data').jstree({
    'core' : {
        'data' : [
            { "text" : "Root node", "children" : [
                    { "text" : "Child node 1" },
                    { "text" : "Child node 2" }
            ]},
            { "text" : "Root node 2", "children" : [
                    { "text" : "Child node 1" },
            ]}
        ]
    },
    'checkbox': {
        three_state: false,
        cascade: 'up'
    },
    'plugins': ["checkbox"]
});

JSFiddleデモ

ここでの魔法はチェックボックスパラメータで発生することに注意してください。

ドキュメントから：

three_state：チェックボックスをカスケードして状態を未定にするかどうかを示すブール値。デフォルトはtrueです。

cascade：この設定は、カスケードノードと未決定ノードの適用方法を制御します。 「up」が文字列に含まれている場合-カスケードアップが有効になっている場合、「down」が文字列に含まれている場合-カスケードダウンが有効になっている場合、「undetermined」が文字列に含まれている場合-未決定のノードが使用されます。 three_stateがtrueに設定されている場合、この設定は自動的に「上+下+未定」に設定されます。デフォルトは ''です。

このドキュメントは、v.3.1.1のソースコード内にあります。

[〜＃〜] edit [〜＃〜]v3.3.0をチェックしたところ、これらの属性のドキュメントが変更されましたが（私の意見では、さらに悪いことに）、 コードはまったく同じように機能します 。それまでの間、これらの属性はAPIにリストされているように見えますが、 three_state および cascade であり、これを書いている時点では、ソースコードよりも優れたドキュメントがあるようです。

親の下に複数の子ノードがある場合、子の1つだけをチェックすると、親はチェックされないことに注意してください。親で有効にするには、すべてのノードをチェックする必要があります。

お役に立てれば！

9
Hanna

私は質問と同様の要件があり、上記の@chrisの回答を試しましたが、提案された回答では成功しませんでした。

これが私がこれを機能させるためにしたことです

.bind('check_node.jstree', function (e, data) { //check all parent nodes
    //var currentNode = data.rslt.obj.attr("id");
        var parentNode =  data.rslt.obj.attr("parent_id")
        $('#demo').jstree('check_node', '#'+parentNode);
})
.bind('uncheck_node.jstree', function (e, data) {//uncheck all child nodes
    var allChildNodes = data.inst._get_children(data.rslt.obj);
        allChildNodes.each(function(idx, listItem) { 
            $('#demo').jstree('uncheck_node', '#'+$(listItem).attr("id"));
        });
})
.jstree({ 
// List of active plugins
    "checkbox": {
        real_checkboxes: true,
            two_state: true,
            checked_parent_open: true,
            override_ui:true
    },
    "plugins" : [ 
        "themes","json_data","ui","cookies","dnd","search","types","hotkeys","contextmenu","crrm", "checkbox"
    ]
})
1
Krishan Gopal

これは私が使用したものです。他のものほど簡潔ではありませんが、機能します：

$('#jstree').jstree( {
  "plugins" : ["checkbox"],
  "checkbox": {
    "three_state": false
  }
}).on("select_node.jstree", function (e, data) {
  var selectedNode;
  if (data.selected.length == 1) {
    lastSelected = data.selected.slice(0);
    selectedNode = data.selected[0];
  } else {
    // Get the difference between lastselection and current selection
    selectedNode = $.grep(data.selected, function(x) {return $.inArray(x, lastSelected) < 0});
    lastSelected = data.selected.slice(0); // trick to copy array
  }
  // Select the parent
  var parent = data.instance.get_node(selectedNode).parent;
  data.instance.select_node(parent);
}).on("deselect_node.jstree", function (e, data) {
  // Get the difference between lastselection and current selection
  var deselectedNode = $.grep(lastSelected,function(x) {return $.inArray(x, data.selected) < 0})
  , children = data.instance.get_children_dom(deselectedNode);
  if (children.length) {
    children.each(function(i, a) {
      data.instance.deselect_node(a);
      lastSelected = data.selected.slice(0);
    });
  } else {
    lastSelected = data.selected.slice(0);
  }
});
1
Saad Farooq