jsTree側の変更をサーバサイドに連携する方法

<script>
$('#test').jstree({ 
  'core' : {
    'data' : <?php echo $json ?>
  } 
})
</script>

前回、上のような形で$jsonに受け取ったツリー構造をjsTreeに表示した。
jsTreeは、ツリーに対する操作などのイベントを検知できるので、各イベント時の動作を作りこめる。

<script>
$('#test').jstree({ 
  'core' : {
    'data' : <?php echo $json ?>
  } 
})
.on('changed.jstree', function (e, data) {
  console.log("test");
});
</script>

ツリーに対するクリックで状態が変化すると、changedイベントが発火する。上述のコードではクリック時に"test"をコンソール出力させて動作を確認できる。
westplain.sakuraweb.com


さて、前回はサーバ側で定義したarray構造をjsTreeのjavascriptに連携したが、
サーバ側にもっているデータをjsTreeに反映させるだけでなく、jsTree側で行った操作もサーバ側に反映させたいと思うものである。
どうしたらいいのかなと思ったところ、stackoverflowに面白い書き込みをみつけた。

stackoverflow.com

var v = $('#data').jstree(true).get_json();
var mytext = JSON.stringify(v);

get_json()メソッドで、現在のjsTreeの状態をJson文字列にすることができるらしい。あとはAjaxでサーバ側にこのデータを送信して、
サーバ側でJson文字列をdecodeしてやれば、jsTreeの最新の状態を常に連携できそうである。

<?php
if($_SERVER["REQUEST_METHOD"] == "POST") {
    var_dump(json_decode($_POST['test']));
}

試しにこういうAjaxから叩くようのAPIを用意しておく。
前回の.phpにその受け口に対して現状のjsTreeをJson文字列で送って疎通を確認してみよう。

<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.2/themes/default/style.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.2/jstree.min.js"></script>
</head>
<body>
<?php
$arr = [
	0 => [
		'id' => "1",
		'parent' => "#",
		'text' => "test"
	],
	1 => [
		'id' => "2",
		'parent' => "#",
		'text' => "test2"
	],
	2 => [
		'id' => "3",
		'parent' => "2",
		'text' => "child"
	]
];
$json = json_encode($arr);
?>

<div id="test">
</div>
	
<script>
$('#test').jstree({ 
  'core' : {
    'data' : <?php echo $json ?>
  } 
})
.on('changed.jstree', function (e, data) {

  var v = $('#test').jstree(true).get_json();
  var jsonTree = JSON.stringify(v);

  $.ajax({
    type: 'POST',
    url: "/test2.php",
    data:{ 
        'test' : jsonTree,
      }
    }).done(function(response) {
      console.log(response)
    }).fail(function(xhr,err){
  });
});
</script>

</body>
</html>


ツリーに対して操作を行うと、都度、最新の状態がサーバサイドに送信されているのが確認できる。


f:id:Kow:20181109125420j:plain


後はこのarrayをもとにして、DBの状態をupdateしてやれば、jsTreeの状態をサーバ側に連携させることができるだろう。