前提・実現したいこと
PHP(ver5.6)より配列より取得したデータをul,liタグでリスト化し、jstreeでツリーを表示します。
liのid属性に「hoge_id」を設定しています。作成されたツリーの1つを選択すると選択した値と属性値「hoge_id」を
取得しフォーム内で保持したいです。
例:ひ孫を選択したら'ひ孫'とidの値'10'
発生している問題・エラーメッセージ
配列データからul,liのタグ編集、jstreeを使用したツリー表示はサンプルソース等を確認しながら
想定どおりの物ができたのですが、ツリー上の値を選択した後の挙動が以下の通りとなります。
選択した値:ツリー上に表示されているテキスト全てが取得されます。(例:親1親2親7・・・・ひ孫)
属性(ID)の取得:メッセージすら表示されません。
エラーメッセージは特に出力されていません。
該当のソースコード
PHP
1<?php 2$data = [ 3 [ 4 'hoge_id' => 2, 5 'hoge' => '親2', 6 'parent_id' => 0, 7 ], 8 [ 9 'hoge_id' => 8, 10 'hoge' => '孫', 11 'parent_id' => 4, 12 ], 13 [ 14 'hoge_id' => 3, 15 'hoge' => '子2-1', 16 'parent_id' => 2, 17 ], 18 [ 19 'hoge_id' => 4, 20 'hoge' => '子7-1', 21 'parent_id' => 7, 22 ], 23 [ 24 'hoge_id' => 7, 25 'hoge' => '親7', 26 'parent_id' => 0, 27 ], 28 [ 29 'hoge_id' => 1, 30 'hoge' => '親1', 31 'parent_id' => 0, 32 ], 33 [ 34 'hoge_id' => 9, 35 'hoge' => '孫2', 36 'parent_id' => 4, 37 ], 38 [ 39 'hoge_id' => 10, 40 'hoge' => 'ひ孫', 41 'parent_id' => 9, 42 ], 43 [ 44 'hoge_id' => 11, 45 'hoge' => '孫3', 46 'parent_id' =>3, 47 ] 48 49 50]; 51 52class HtmlUlBuilder 53{ 54 private $data; 55 56 public function __construct($data) 57 { 58 $this->data = $data; 59 } 60 61 public function buildFromParent($parent_id) 62 { 63 $children = array_filter($this->data, function ($element) use ($parent_id) { 64 return $element['parent_id'] === $parent_id; 65 }); 66 67 if (count($children) === 0) return ''; 68 69 return '<ul>' . array_reduce($children, function ($current, $element) { 70 71 if($element['hoge_id']=== 9){ 72 //return $current . PHP_EOL . '<li id="'.$element['hoge_id'].'">data-jstree=\'{"opened":true,"selected":true}\'>'.'<input type="hidden" id="hoge_id" Value="'.$element['hoge_id'].'">'.$element['hoge'] . $this->buildFromParent($element['hoge_id']) . '</li>'; 73 return $current . PHP_EOL . '<li id="'.$element['hoge_id'].'" data-jstree=\'{"opened":true,"selected":true}\'>'.$element['hoge'] . $this->buildFromParent($element['hoge_id']) . '</li>'; 74 } 75 else{ 76 return $current . PHP_EOL . '<li id="'.$element['hoge_id'].'">'.$element['hoge'] . $this->buildFromParent($element['hoge_id']) . '</li>'; 77 } 78 79 }, '') . '</ul>'; 80 } 81} 82 83usort($data, function ($a, $b) { 84 return $a['hoge_id'] > $b['hoge_id']; 85}); 86 87 $builder = new HtmlUlBuilder($data); 88 $html = $builder->buildFromParent(0); 89 90 //echo $html; 91 92 ?> 93 94<!DOCTYPE html> 95<html> 96 <head> 97 <meta charset="UTF-8"> 98 <title>階層データ</title> 99 <link rel="stylesheet" href="./jstree/style.min.css"> 100 <script src="./jq/jquery-3.3.1.min.js"></script> 101 <script src="./jstree/jstree.min.js"></script> 102 <script src="./jq/testsq.js"></script> 103 104 </head> 105 <body> 106 <form> 107 <div id="tree1"> 108 <?php echo $html;?> 109 110 </div> 111 </form> 112 <br> 113 <br> 114 115 </body> 116</html> 117
javascript
1$(function(){$('#tree1').jstree();}); 2 3$(function(){ 4 $("div > ul").click(function(){ 5 var dept_txt = $(this,"li").text(); 6 var dept_id = $(this,"li").attr('id'); 7 alert(dept_txt); 8 alert(dept_id); 9 }) 10});
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>階層データ</title> 6 <link rel="stylesheet" href="./jstree/style.min.css"> 7 <script src="./jq/jquery-3.3.1.min.js"></script> 8 <script src="./jstree/jstree.min.js"></script> 9 <script src="./jq/testsq.js"></script> 10 11 </head> 12 <body> 13 <form> 14 <div id="tree1"> 15 <ul> 16<li id="1">親1</li> 17<li id="2">親2<ul> 18<li id="3">子2-1<ul> 19<li id="11">孫3</li></ul></li></ul></li> 20<li id="7">親7<ul> 21<li id="4">子7-1<ul> 22<li id="8">孫</li> 23<li id="9" data-jstree='{"opened":true,"selected":true}'>孫2<ul> 24<li id="10">ひ孫</li></ul></li></ul></li></ul></li></ul> 25 </div> 26 </form> 27 <br> 28 <br> 29 30 </body> 31</html>
試したこと
Jquery側の"div > ul"以外に"div>ul>li"や"div#ul"等に変更
補足情報(FW/ツールのバージョンなど)
PHP:ver5.6
jstreeを使用
回答1件
あなたの回答
tips
プレビュー