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

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

ただいまの
回答率

90.85%

  • JavaScript

    14261questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    5991questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    433questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

  • Electron

    178questions

    Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

【jQuery/nestable】ツリーを作り直すと、expandボタンが表示されなくなる

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 829

nnahito

score 1644

 質問

jQueryのNestableというプラグインを使い、ツリービューを作っているのですが、
そのツリーを動的に、JSONファイルを読み込んで再度作成し直すと、
Expandボタンが表示されなくなってしまいます。
以下の図にサンプルを提示します。

イメージ説明

上図は、1度目にJSONデータから作成したツリーの図です。
これは、ツリーノード上の「+」ボタンから、ノードを追加した場合でもExpandボタンは表示されます。

しかし、この状態で別のJSONファイルからツリーを作り直すと、下図のようにExpandボタンが消えてしまいます。

イメージ説明

この理由をずっと探しているのですが、なかなか見つけることができません。

以下に、JavaScriptのコードを記載します。
他、必要な情報がございましたらご指摘ください。

 定義

この変数で、ツリーの個数やノードのIDを管理しています。

var $treeJsonID = '[{"id":1}]';

この変数に、ノードの中身を格納しています(質問には関係ないかと思われます。)

var $treeData = {
        "1":{
            "title": "New Node",
            "contents": ""
        }
    };

ツリーの表示エリアです

<!-- ノード -->
<div class="dd" id="TreeNode">
    <ol class="dd-list"></ol>
</div>

 ツリーを作成する関数

この関数に、定義した$treeJsonIDを渡します。

よろしくお願いいたします。

/* JSONからTreeを作成 */
    function createTreeNode(json){
        var obj = json;
        var output = '';

        function buildItem(item) {
            var html = '';
            html += "<li class='dd-item dd3-item' data-id='" + item.id + "' id='tree-"+ item.id +"'>";
            html += "<div class='dd-handle dd3-handle'></div>";
            html += '<div class="dd3-content"><a href="javascript:setEditData('+ item.id +');" id="tree-node-name-'+ item.id +'">' + $treeData[item.id]["title"] + '</a>';
            html += '<div class="right treatpanel">';
            html += '<a href="javascript:addTreeNode('+ item.id +');"><i class="tiny material-icons">add</i></a>';
            html += '<a href="javascript:deleteTreeNode('+ item.id +');"><i class="tiny material-icons">delete</i></a>';
            html += '<a href="#" onclick="$(\'#newNodeName\').val(\''+ $treeData[item.id]["title"] +'\');$(\'#newNodeNamesID\').val(\''+ item.id +'\');" data-target="editNodeNameModal"><i class="tiny material-icons">mode_edit</i></a>';
            html += '</div></div>';


            if (item.children) {
                html += "<ol class='dd-list'>";
                $.each(item.children, function (index, sub) {
                    html += buildItem(sub);
                });
                html += "</ol>";
            }

            html += "</li>\n";
            return html;
        }

        $.each(JSON.parse(obj), function (index, item) {
            output += buildItem(item);
        });


        $('.dd-list').html(output);

        $('#TreeNode').nestable();
        $('#TreeNode').trigger('create')

    }

 最初の起動

jQueryのdocument readyです。

$(document).ready(function(){
    // 最初のデータを作成
    createTreeNode($treeJsonID);

});

 データの作り直し

ボタンが押されたら、以下のように作り直そうと考えています。
なお、検証しましたが、ファイルのJSONに誤りはありませんでした。

$.getJSON('ファイルパス', function(json){
    $treeJsonID = JSON.stringify( json["treeid"][0] );
    $treeData = json["treedata"][0];


    $('.dd-list').empty();
    $('#TreeNode').nestable('destroy');

    createTreeNode($treeJsonID);
});

 一応

読み込み先のJSONデータです。

{ "treeid": [[{"id":1},{"id":2},{"id":3,"children":[{"id":4},{"id":5}]}]], "treedata": [{"1":{"title":"test1","contents":"001\naaa\nちゃんと出力されてますか?"},"2":{"title":"test2","contents":"002"},"3":{"title":"test3","contents":"003"},"4":{"title":"test4","contents":"004"},"5":{"title":"test5","contents":"005"}}] }

 参考

 バージョン情報

Electron 1.4.12
jQuery 3.1.1

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

0

Jquery forum の lschult32 さんのコメントが参考になると思います(そこのページの下から6番目)

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/01/08 19:44

    ご回答ありがとうございます。
    こちらの意味ですが、
    「<div class="dd" id="TreeNode">」を「<div>」で囲めばいい……という解釈になるのでしょうか?

    また、色々実験してみたところ、ツリーの情報がドラッグ・アンド・ドロップなどで更新された親ノードにExpandボタンがつくことが確認できました。
    全体的に更新イベントを発火させる方法などは有るのでしょうか?

    キャンセル

  • 2017/01/08 22:33 編集

    そうみたいですね
    Nestableで使用している領域のClassのCSSリセット
    <div id="NES">
    <div class="dd" id="TreeNode">
    <ol class="dd-list"></ol>
    </div>
    </div>
    id="NES"(適当)で丸ごと囲んで
    $("#NES").html('<div class="dd" id="TreeNode"><ol class="dd-list"></ol></div>');
    を実施し更新したら表示されましたね
    ---------------------------------------
    結構色々試している人はいるけど
    全体的に更新するイベントは無さそうですね
    メンドクサイ
    serializeイベントはid部しか表示されないので
    テキスト部は自作するしかないのかな?メンドクサイです

    キャンセル

  • 2017/01/08 22:51

    ご回答ありがとうございます!!!
    うおおおおおお!表示されました!!ありがとうございます!!

    しかし、こうしないといけないというのはかなり面倒くさいですね……
    使わせていただいていて何ですけど、面倒ですね^^;

    前回に引き続き解決まで導いてくださり、ありがとうございました!
    まだまだ、初心者エンジニアですが、精一杯勉強させていただきます。

    キャンセル

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

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

関連した質問

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

  • JavaScript

    14261questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    5991questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    433questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

  • Electron

    178questions

    Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。