Q&A
PHPによる <?php echo $html;?> の部分の問題なのか、JavaScript側の問題なのかを検討するために、<?php echo $html;?> の部分がサーバーサイドでレンダリングされた 実際のHTML を、ブラウザの「ソースを表示」か、開発ツールのElements表示から、該当部分をコピーして質問に追加いただくことは可能でしょうか？
前提・実現したいこと
PHP（ver5.6）より配列より取得したデータをul,liタグでリスト化し、jstreeでツリーを表示します。
liのid属性に「hoge_id」を設定しています。作成されたツリーの１つを選択すると選択した値と属性値「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' => '孫２', 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}'>孫２<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を使用
該当のソースに「ソースを表示」から取得したソースを追記しました。よろしくお願いします。
質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
ご指摘いただいた通り分割しました。よろしくお願いします。
まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。
解決済とさせていただきました。有難うございました。
回答1件
0
ベストアンサー
こんにちは。
ご質問のコードの、追加頂いた HTMLと JS をそのまま転記したものが以下です。
修正前：https://jsfiddle.net/jun68ykt/nfeodgr0/6/
上記は確かに、ご質問にある
ツリー上に表示されているテキスト全てが取得されます。
という挙動をしています。
これを以下のように修正しました。
修正後： https://jsfiddle.net/jun68ykt/nfeodgr0/12/
修正した部分は、
javascript
1 $("div > ul").click(function(){ 2 var dept_txt = $(this,"li").text(); 3 var dept_id = $(this,"li").attr('id'); 4 alert(dept_txt); 5 alert(dept_id); 6 });
です。これを以下にしました。
javascript
1 $("div > ul").on('click', 'li', function(event){ 2 var dept_txt = $(this).text(); 3 var dept_id = $(this).attr('id'); 4 alert(dept_txt); 5 alert(dept_id); 6 7 event.stopPropagation(); 8 });
上記で、 event.stopPropagation(); がないと、上の階層の <li> にも
click イベントが伝播されてしまい意図している動作になりません。
以上参考になれば幸いです。
備考
以下の部分
javascript
1var dept_txt = $(this).text();
で、 .text() は子要素のテキストも含めて拾ってきてしまいますが、
選ばれた <li> のテキストだけを取得したい場合は、
以下の投稿が参考になるかもしれません。
using-text-to-retrieve-only-text-not-nested-in-child-tags
備考２
上記の stackoverflow の回答を、 jsFiddle でやってみましたが、うまくいかず、
たとえば 以下のようなややめんどうなことをしなければなりませんでした。
https://jsfiddle.net/jun68ykt/nfeodgr0/42/
備考3
上記のやり方でテキストを取ってくるのは、あまりシンプルとはいえないですし、
stackoverflow のどの回答も簡単とは言えなさそうですので、
回避策として、 各 <li> に data 属性を加えて、
html
1<li id="4" data-text="子7-1"> 2 子7-1 3 <ul> 4 ・・・
とすれば、取得するところは、
javascript
1 var dept_txt = $(this).data('text');
で、 "子7-1" を取ってこれます。
投稿2018/02/17 15:21
編集2018/02/17 16:30総合スコア9058
あなたの回答
tips
プレビュー
