Q&A
（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。またHTMLと、ライブラリは公式配布サイトのURLを質問文に追記ください。
前提・実現したいこと
jsTreeで最下層(葉っぱ)だけがcheck可能で、それ以外(親)のcheckboxをdisableにする方法が知りたいです。
ツリー生成時に子をもたないノードのチェックボックスをDisableにしたいです。
該当のソースコード
<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css" /> <script> $(function(){ var data1 = [{ "id": "W", "text": "World", "state": { "opened": true }, "children": [{"text": "Asia","disable_node":"true"}, {"text": "Africa"}, {"text": "Europe", "state": { "opened": false }, "children": [ "France","Germany","UK" ] }] }]; $('#Tree').jstree({ core: { data: data1, check_callback: false }, checkbox: { three_state : false, // to avoid that fact that checking a node also check others whole_node : false, // to avoid checking the box just clicking the node tie_selection : false // for checking without selecting and selecting without checking }, plugins: ['checkbox'] }) .on( "ready.jstree", function( e, data ) { $( "#Tree" ).jstree( "disable_node", "Europe" ); }) .on("check_node.jstree uncheck_node.jstree", function(e, data) { <!-- var parent_node = $("#Tree").jstree().get_node(data.node).parents; --> var parent_node = $("#Tree").jstree().get_node(data.node).children; if(parent_node.length>0) { data.node.state.checked=false; data.node.state.disabled=true; <!-- $("#Tree").jstree().disable_node(node); --> return false; } alert(data.node.id + ' ' + data.node.text + (data.node.state.checked ? ' CHECKED': ' NOT CHECKED')) }).bind('before.jstree', function(event, data){ switch(data.plugin){ case 'ui': if(data.inst.is_leaf(data.args[0])){ return false; } break; default: break; } }).on( "ready.jstree", function( e, data ) { var parent_node = $("#Tree").jstree().get_node(data.node).children; if(parent_node.length>0) { data.node.state.checked=false; data.node.state.disabled=true; <!-- $("#Tree").jstree().disable_node(node); --> return false; } } ); }); </script> </head> <body> <div id="Tree"> </div> </body> </html>
ご覧頂きありがとうございます。ソースコードを整形致しました。宜しくお願い致します。
プラグイン／ライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）
まだ質問が「受付中」になっていますが、ご自身の回答をもって「解決済」にされてはいかがでしょうか。
回答1件
0
自己解決
別のやり方で実現してみましたヽ(=´▽`=)ﾉ
javascript
1<!DOCTYPE html> 2<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 3<head> 4 <meta charset="utf-8" /> 5 <title>Simple jsTree</title> 6 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" /> 7 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> 8 <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script> 9 <script type="text/javascript"> 10 $(function () { 11 12 var jsondata = [ 13 { "id": "ajson1", "parent": "#", "text": "Simple root node" }, 14 { "id": "ajson2", "parent": "#", "text": "Root node 2" }, 15 { "id": "ajson3", "parent": "ajson2", "text": "Child 1" }, 16 { "id": "ajson4", "parent": "ajson2", "text": "Child 2" }, 17 ]; 18 19 createJSTree(jsondata); 20 }); 21 22 function createJSTree(jsondata) { 23 $('#SimpleJSTree').jstree({ 24 'core': { 25 'data': jsondata 26 }, 27 checkbox: { 28 three_state : false, // to avoid that fact that checking a node also check others 29 whole_node : false, // to avoid checking the box just clicking the node 30 tie_selection : false // for checking without selecting and selecting without checking 31 }, 32 plugins: ['checkbox'] 33 }) 34 .on("check_node.jstree uncheck_node.jstree", function(e, data) { 35 36 }) 37 .bind('before.jstree', function(event, data){ 38 console.log(data); 39 }) 40 .on("loaded.jstree", function (e, data) { 41 var isParent = data.instance.is_parent(); 42 console.log(jsondata); 43 for(var i=0;i<jsondata.length;i++) 44 { 45 var node = $('#SimpleJSTree').jstree(true).get_node(jsondata[i].id); 46 // var node = $('#SimpleJSTree').jstree(true).get_node('ajson2'); 47 if(node.children.length>0) 48 { 49 node.state.disabled=true; 50 } 51 52 } 53 }); 54 } 55 </script> 56</head> 57<body> 58 <div id="SimpleJSTree"></div> 59</body> 60</html> 61
投稿2019/02/03 05:19
総合スコア15
あなたの回答
tips
プレビュー
