jsTreeのデータ構造をフォームのsubmitでpostしたい

 まず、jsTreeをクリック時に、対応した要素に表示を切り替えたい。

<form name="testform" method="post" action="">
	<div class="hoge" id="test1">
	test1
	</div>
	<div class="hoge" id="test2" style="display: none">
	test2
	</div>
	<div class="hoge" id="test3" style="display: none">
	test3
	</div>
	<div class="hoge" id="test4" style="display: none">
	test4
	</div>
	<input id="testdata" type="hidden" name="data" value="">
	<input type="submit" onclick="foobar()">
</form>

 例えばこんな風にしておいて、4つ要素があるが選択されるまでは非表示としておく。

<script>
$('#test').jstree({ 
	'core' : {
		'data' : <?php echo $json ?>
	},
	"plugins" : [ "dnd", "contextmenu" ] 
}).on("select_node.jstree", function (e, data) {
	$(".hoge").each(function(i, o){
		$(o).hide();
	});
	$('#test'+data.node.id).show();
});
</script>

 のように、jsTreeのselect_nodeイベントでhideとshowを切り替える。
 例ではdivにすぎないが、ここにはinput要素が色々ならんでいる状態になる。
いろいろな入力値をjsTreeをクリックして表示を切り替えながら変更して、最後にsubmitしたい。
その時に、jsTree自体の状態も送りたい。

<script>
function foobar(){
	var v = $('#test').jstree(true).get_json();
	var mytext = JSON.stringify(v);
	$("#testdata").val(mytext);
	document.testform.submit();
}
</script>

 submitボタンのonclickで実行されるのが上のfoobar()である。jsTreeをJSON化してhiddenのvalueにセットした後に、submitする。
 試しにPOST値をダンプしてみると、ちゃんとjsTreeのJSONが受け取れる。


f:id:Kow:20181207114742j:plain