Search code examples
phpdomjstree

How to arrange the prefix numbers arranged in order in the js tree?

I am using PHP to create the js tree to display the folder and sub folder name like the below output, my problem is how make the prefix number can in order show in the js tree :

Output1

Below is my coding:

  <?php 
   $folderData = mysqli_query($mysql_con,"SELECT * FROM folder_category where status=1");

   $folders_arr = array();
   while($row = mysqli_fetch_assoc($folderData)){
      $parentid = $row['parentid'];
      if($parentid == '0') $parentid = "#";

      $selected = false;$opened = false;
      if($row['id'] == 2){
         $selected = true;$opened = true;
      }
      $folders_arr[] = array(
         "id" => $row['id'],
         "parent" => $parentid,
         "text" => $row['name'] . ' ' . "<span id='category'>". $row['category']."</span>",
         "state" => array("selected" => $selected,"opened"=>$opened) 
      );
   }

   ?>

   <!-- Initialize jsTree -->
   <div id="folder_jstree" title="JTM"></div>
   <!-- Store folder list in JSON format -->
   <textarea style="" id='txt_folderjsondata'><?= json_encode($folders_arr) ?></textarea>


<script style="text/javascript">
$(document).ready(function(){
   var folder_jsondata = JSON.parse($('#txt_folderjsondata').val());

   $('#folder_jstree').jstree({ 'core' : {
      'data' : folder_jsondata,
      'multiple': false
} });

var getColor = function (i) {
    if (i >= 100 && i <= 199) { return "blue"; }
    else if (i >= 200 && i <= 299) { return "red"; }
    else if (i >= 300 && i <= 399) { return "yellow"; }
    else if (i >= 400 && i <= 499) { return "purple"; }
    else if (i >= 500 && i <= 599) { return "green"; }
    else { return "#000"; }
}
var colorNodes = function(nodelist){
    var tree = $('#folder_jstree').jstree(true);
    nodelist.forEach(function (n) {
        tree.get_node(n.id).a_attr.style = "color:" + getColor(parseInt(n.text.substr(0,3),10));
        tree.redraw_node(n.id); //Redraw tree
        colorNodes(n.children); //Update leaf nodes
    });
}

$('#folder_jstree').bind('load_node.jstree', function (e, data) {
    var tree = $('#folder_jstree').jstree(true);
    colorNodes(tree.get_json());
});
});

  $( function() {
    $( document ).tooltip();
  } );



</script>

Actually I want the output same like below the sample picture, below the sample picture is not using coding to make it, just I am used the paint software to edit and make it easy to let yours understand what I want to get the output:

enter image description here

The result of json_encode($folders_arr) in the below:


[{"id":"1","parent":"#","text":"100 Pentadbiran <span id='category'>JTM<\/span>","state":{"selected":false,"opened":false}},{"id":"2","parent":"#","text":"200 Pengurusan Tanah & Bangunan <span id='category'>JTM<\/span>","state":{"selected":true,"opened":true}},{"id":"3","parent":"#","text":"300 Pengurusan Aset <span id='category'>JTM<\/span>","state":{"selected":false,"opened":false}},{"id":"4","parent":"#","text":"400 Pengurusan Kewangan <span id='category'>JKP<\/span>","state":{"selected":false,"opened":false}},{"id":"5","parent":"#","text":"500 Pengurusan Sumber Manusia <span id='category'>JKP<\/span>","state":{"selected":false,"opened":false}},{"id":"6","parent":"1","text":"100-1 Perundangan <span id='category'>JTM<\/span>","state":{"selected":false,"opened":false}},{"id":"7","parent":"1","text":"100-2 Perhubungan Awam <span id='category'>JKP<\/span>","state":{"selected":false,"opened":false}},{"id":"8","parent":"6","text":"100-1-1 Penggubalan-Penyediaan-Pindaan Undang-Undang-Peraturan <span id='category'>JTM<\/span>","state":{"selected":false,"opened":false}},{"id":"9","parent":"6","text":"100-1-2 Khidmat Nasihat <span id='category'>JTM<\/span>","state":{"selected":false,"opened":false}},{"id":"10","parent":"8","text":"100-1-1-1 Undang-Undang Kecil Kerja Di Jalan 1996 <span id='category'>JTM<\/span>","state":{"selected":false,"opened":false}},{"id":"11","parent":"8","text":"100-1-1-2 Undang-Undang Kecil Peruntukan Mengenai Lesen Bersesama (Majlis Perbandaran) <span id='category'>JTM<\/span>","state":{"selected":false,"opened":false}},{"id":"12","parent":"8","text":"100-1-1-3 Undang-Undang Kecil Mengkompaun Kesalahan-Kesalahan (Majlis Perbandaran Klang), Jalan Parit dan <span id='category'>JTM (Berhubung Kod 100-1\/1\/2)<\/span>","state":{"selected":false,"opened":false}},{"id":"13","parent":"9","text":"100-1-2-1 Jabatan Penguatkuasaan <span id='category'>JTM<\/span>","state":{"selected":false,"opened":false}},{"id":"14","parent":"9","text":"100-1-2-2 Jabatan Bangunan <span id='category'>JTM<\/span>","state":{"selected":false,"opened":false}},{"id":"15","parent":"7","text":"100-2-1 Publisiti, Promosi Dan Protokol <span id='category'>JKP<\/span>","state":{"selected":false,"opened":false}},{"id":"16","parent":"15","text":"100-2-1-1 Publisiti Dan Kenyataan Media <span id='category'>JKP<\/span>","state":{"selected":false,"opened":false}},{"id":"228","parent":"#","text":"101 Pentadbiran <span id='category'>JTM<\/span>","state":{"selected":false,"opened":false}},{"id":"231","parent":"#","text":"102 Pentadbiran <span id='category'>JTM<\/span>","state":{"selected":false,"opened":false}},{"id":"232","parent":"#","text":"301 Pengurusan Aset <span id='category'>JTM<\/span>","state":{"selected":false,"opened":false}},{"id":"233","parent":"#","text":"201 Pengurusan Tanah & Bangunan <span id='category'>JTM<\/span>","state":{"selected":false,"opened":false}},{"id":"234","parent":"#","text":"501 Pengurusan Sumber Manusia <span id='category'>JKP<\/span>","state":{"selected":false,"opened":false}},{"id":"235","parent":"#","text":"401 Pengurusan Kewangan <span id='category'>JKP<\/span>","state":{"selected":false,"opened":false}}]

My code is here: https://jsfiddle.net/ason5861_cs/9ofcgtdk/

Solution

  • The jsTree sort plugin should work in this case, you would need a custom sort comparator function though as the default one does a simple string comparison.

    $('#folder_jstree').jstree({
  'core': {
    'data': folder_jsondata,
    'multiple': false
  },
  'plugins': ['sort'],
  'sort': function (a, b) {
        return this.get_text(a).localeCompare(this.get_text(b), 'en', { numeric: true });
    }
});

    Here's an updated example based on your jsFiddle