jsTreeの階層構造を扱うために

<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>

これだと、木構造はこうなってしまう。

f:id:Kow:20181109125420j:plain

親要素ではなく子要素をもった木構造だ。
これだと扱いにくい。なぜなら一つの親は複数の子要素を持ちうる。
逆に親要素をもつような木構造であれば、
子からみれば常にひとつの親を持つ扱いやすいデータ構造になる。

そのためには、

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

ではなく

  var v = $('#test').jstree(true).get_json('#', { 'flat': true });;

とすればいい。

f:id:Kow:20181110173608j:plain

するとこんな具合で、parentノードを持った木構造になってくれる。
DBにはparentカラムがあればいい。無数の子idを持つよりもずっと使いやすいだろう。

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

    foreach($arr as $node) {
        $row = [];
        $row['id']      = $node->id;
        $row['parent']  = $node->parent;
        $row['text']    = $node->text;
        $insertSet[] = $row;
    }

    var_dump($insertSet);
}


試しにAjaxの受け口を上のようにしてみるとこんな風に、永続化しやすいデータ構造が得られる。

f:id:Kow:20181110174713j:plain

もともとjsTreeにサーバ側から渡してJSON化したデータ構造ど同じデータ構造だ。