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

Question

質問

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

上図は、１度目に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"}}] }

参考

• Nestable

バージョン情報

Electron 1.4.12
jQuery 3.1.1

Comments

[GalwanKhalid]

thanks

Answer 1

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

Comments

[nnahito]

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

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

[退会済みユーザー]

そうみたいですね
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部しか表示されないので
テキスト部は自作するしかないのかな？メンドクサイです

[nnahito]

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

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

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