質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.37%

リストより選択した項目の値と属性(ID)を取得したいです。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,769

score 8

 前提・実現したいこと

PHP(ver5.6)より配列より取得したデータをul,liタグでリスト化し、jstreeでツリーを表示します。
liのid属性に「hoge_id」を設定しています。作成されたツリーの1つを選択すると選択した値と属性値「hoge_id」を
取得しフォーム内で保持したいです。

例:ひ孫を選択したら'ひ孫'とidの値'10'

 発生している問題・エラーメッセージ

配列データからul,liのタグ編集、jstreeを使用したツリー表示はサンプルソース等を確認しながら
想定どおりの物ができたのですが、ツリー上の値を選択した後の挙動が以下の通りとなります。
選択した値:ツリー上に表示されているテキスト全てが取得されます。(例:親1親2親7・・・・ひ孫)
属性(ID)の取得:メッセージすら表示されません。

エラーメッセージは特に出力されていません。

 該当のソースコード

<?php
$data = [
    [
        'hoge_id' => 2,
        'hoge' => '親2',
        'parent_id' => 0,
    ],
    [
        'hoge_id' => 8,
        'hoge' => '孫',
        'parent_id' => 4,
    ],
    [
        'hoge_id' => 3,
        'hoge' => '子2-1',
        'parent_id' => 2,
    ],
    [
        'hoge_id' => 4,
        'hoge' => '子7-1',
        'parent_id' => 7,
    ],
    [
        'hoge_id' => 7,
        'hoge' => '親7',
        'parent_id' => 0,
    ],
    [
        'hoge_id' => 1,
        'hoge' => '親1',
        'parent_id' => 0,
    ],
    [
        'hoge_id' => 9,
        'hoge' => '孫2',
        'parent_id' => 4,
    ],
    [
        'hoge_id' => 10,
        'hoge' => 'ひ孫',
        'parent_id' => 9,
    ],
    [
        'hoge_id' => 11,
        'hoge' => '孫3',
        'parent_id' =>3,
    ]


];

class HtmlUlBuilder
{
    private $data;

    public function __construct($data)
    {
        $this->data = $data;
    }

    public function buildFromParent($parent_id)
    {
        $children = array_filter($this->data, function ($element) use ($parent_id) {
            return $element['parent_id'] === $parent_id;
        });

            if (count($children) === 0) return '';

            return '<ul>' . array_reduce($children, function ($current, $element) {

                if($element['hoge_id']=== 9){
                    //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>';
                    return $current . PHP_EOL . '<li id="'.$element['hoge_id'].'" data-jstree=\'{"opened":true,"selected":true}\'>'.$element['hoge'] . $this->buildFromParent($element['hoge_id']) . '</li>';
                }
                else{
                    return $current . PHP_EOL . '<li id="'.$element['hoge_id'].'">'.$element['hoge'] . $this->buildFromParent($element['hoge_id']) . '</li>';
                }

            }, '') . '</ul>';
    }
}

usort($data, function ($a, $b) {
    return $a['hoge_id'] > $b['hoge_id'];
});

    $builder = new HtmlUlBuilder($data);
    $html = $builder->buildFromParent(0);

    //echo $html;

    ?>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>階層データ</title>
        <link rel="stylesheet" href="./jstree/style.min.css">
        <script src="./jq/jquery-3.3.1.min.js"></script>
        <script src="./jstree/jstree.min.js"></script>
        <script src="./jq/testsq.js"></script>

    </head>
    <body>
    <form>
    <div id="tree1">
         <?php echo $html;?>

    </div>
    </form>
     <br>
     <br>

    </body>
</html>
$(function(){$('#tree1').jstree();});

$(function(){
    $("div > ul").click(function(){
        var dept_txt = $(this,"li").text();
        var dept_id = $(this,"li").attr('id');
        alert(dept_txt);
        alert(dept_id);
    })
});
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>階層データ</title>
        <link rel="stylesheet" href="./jstree/style.min.css">
        <script src="./jq/jquery-3.3.1.min.js"></script>
        <script src="./jstree/jstree.min.js"></script>
        <script src="./jq/testsq.js"></script>

    </head>
    <body>
    <form>
    <div id="tree1">
         <ul>
<li id="1">親1</li>
<li id="2">親2<ul>
<li id="3">子2-1<ul>
<li id="11">孫3</li></ul></li></ul></li>
<li id="7">親7<ul>
<li id="4">子7-1<ul>
<li id="8"></li>
<li id="9" data-jstree='{"opened":true,"selected":true}'>孫2<ul>
<li id="10">ひ孫</li></ul></li></ul></li></ul></li></ul>
    </div>
    </form>
     <br>
     <br>

    </body>
</html>

 試したこと

Jquery側の"div > ul"以外に"div>ul>li"や"div#ul"等に変更

 補足情報(FW/ツールのバージョンなど)

PHP:ver5.6
jstreeを使用

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • bat

    2018/02/18 00:16

    ご指摘いただいた通り分割しました。よろしくお願いします。

    キャンセル

  • kei344

    2018/02/18 02:51

    まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

    キャンセル

  • bat

    2018/02/18 02:57

    解決済とさせていただきました。有難うございました。

    キャンセル

回答 1

checkベストアンサー

+1

こんにちは。

ご質問のコードの、追加頂いた HTMLと JS をそのまま転記したものが以下です。

修正前:https://jsfiddle.net/jun68ykt/nfeodgr0/6/

上記は確かに、ご質問にある

ツリー上に表示されているテキスト全てが取得されます。

という挙動をしています。

これを以下のように修正しました。

修正後: https://jsfiddle.net/jun68ykt/nfeodgr0/12/

修正した部分は、

  $("div > ul").click(function(){
      var dept_txt = $(this,"li").text();
      var dept_id = $(this,"li").attr('id');
      alert(dept_txt);
      alert(dept_id);
  });

です。これを以下にしました。

  $("div > ul").on('click', 'li', function(event){
      var dept_txt = $(this).text();
      var dept_id = $(this).attr('id');
      alert(dept_txt);
      alert(dept_id);

      event.stopPropagation();
  });


上記で、 event.stopPropagation(); がないと、上の階層の <li> にも
click イベントが伝播されてしまい意図している動作になりません。

以上参考になれば幸いです。


備考

以下の部分

var dept_txt = $(this).text();


で、 .text() は子要素のテキストも含めて拾ってきてしまいますが、
選ばれた <li> のテキストだけを取得したい場合は、
以下の投稿が参考になるかもしれません。

using-text-to-retrieve-only-text-not-nested-in-child-tags


備考2

上記の stackoverflow の回答を、 jsFiddle でやってみましたが、うまくいかず、
たとえば 以下のようなややめんどうなことをしなければなりませんでした。

https://jsfiddle.net/jun68ykt/nfeodgr0/42/


備考3

上記のやり方でテキストを取ってくるのは、あまりシンプルとはいえないですし、
stackoverflow のどの回答も簡単とは言えなさそうですので、
回避策として、 各 <li> に data 属性を加えて、

<li id="4" data-text="子7-1">
  子7-1
  <ul>
   ・・・


とすれば、取得するところは、

  var dept_txt = $(this).data('text');


で、 "子7-1" を取ってこれます。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/02/18 02:14

    jun68ykt様
    回答ありがとうございます。
    頂いた回答を元にソースを修正し、無事要件を満たす事ができました。
    イベントが伝播されてしまうことがある事も勉強になりました。
    本当に助かりました。ありがとうございます。

    キャンセル

  • 2018/02/18 02:58

    解決されたようですね、よかったです!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る