質問編集履歴

修正後ソース追記

2021/04/14 08:10

投稿

tanakamaro

スコア13

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -358,7 +358,219 @@
 ### 試したこと
-図１から子要素を表示する方法が見当も付かず、ご質問させて頂きました。。
+アドバイス頂き修正しデータは取得できるようになりましたが、jsTreeに反映されません。。
+```ここに言語を入力
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>tree</title>
+    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
+    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.2/themes/default/style.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.2/jstree.min.js"></script>
+</head>
+<body>
+    <main>
+        <div id="wrapper">
+            <div id="jstree"></div>
+        </div>
+        </main>
+    <script type="text/javascript">
+        //階層変数
+        let json = [];
+        $.jstree.defaults.core.themes.responsive = true;
+        //階層構造生成
+        $(function() {
+            let hostUrl = "http://localhost:3000/hits";
+            $.ajax({
+                type: 'get',
+                url: hostUrl,
+                dataType : 'json'
+            }).done(function(data){
+                json = data;
+                //mapとfileterを後ほど合体
+                const arr = json.filter(function(value){
+                   return value.parentGroupId == "";
+                  });
+                const tree = arr.map((x) => {
+                    if(x.parentGroupId == ""){
+                        x.parentGroupId = "#";
+                    }
+                  return {'id' : x.groupId.toString() , 'parent' :x.parentGroupId.toString(), 'text' : x.itemName.toString(), 'code' : x.itemCode.toString()  };
+                });
+                $('#jstree').jstree({ 'core' : {
+                    "check_callback" : false,
+                    "themes" : { "stripes" : true, "icons": false, "responsive": false },
+                    'data' : tree,
+                }
+            });
+        }).fail(function(){
+            alert('No data');
+        });
+    });
+    //階層構造ノード選択時処理
+    $('#jstree').on('select_node.jstree', function(e, data) {
+        console.log("node_id: " , data,'original',data.node.original);
+        console.log(data.node.original.parent);
+        console.log(data);
+        $(function() {
+          let hostUrl = "http://localhost:3000/hits";
+          $.ajax({
+              type: 'get',
+              url: hostUrl,
+              data: {
+                parentGroupId: data.node.original.id,
+            },
+              dataType : 'json'
+          }).done(function(data){
+            console.log(data);
+              json = data;
+              //mapとfileterを後ほど合体
+              const arr = json.filter(function(value){
+                 return value.parentGroupId == "";
+                });
+              const tree = json.map((x) => {
+                  if(x.parentGroupId == ""){
+                      x.parentGroupId = "#";
+                  }
+                return {'id' : x.groupId.toString() , 'parent' :x.parentGroupId.toString(), 'text' : x.itemName.toString(), 'code' : x.itemCode.toString()  };
+              });
+              $('#jstree').jstree({ 'core' : {
+                  "check_callback" : false,
+                  "themes" : { "stripes" : true, "icons": false, "responsive": false },
+                  'data' : tree,
+              }
+          });
+      }).fail(function(){
+          alert('No data');
+      });
+  });
+       });
+  </script>
+</body>
+</html>
+```