Как определить номер префикса для отображения другого цвета в дереве js? - PullRequest
Новая
       24

Как определить номер префикса для отображения другого цвета в дереве js?

0 голосов
/ 16 апреля 2020

Я использую PHP, чтобы создать дерево js для отображения имени папки и подпапки, как показано ниже:

Output

Моя проблема заключается в том, как написать код logi c, чтобы определить номер префикса, чтобы показать другой цвет в папке дерева js и имени подпапки?

Я хочу, чтобы номер префикса следовал ниже номера диапазона : 

Prefix number |      Color 
--------------------------
100 until 199 |      Blue
200 until 299 |      Red
300 until 399 |      Yellow
400 until 499 |      Purple
500 until 599 |      Green

Ниже приведен мой код: 

 <?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'],
         "state" => array("selected" => $selected,"opened"=>$opened) 
      );
   }

   ?>

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


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

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

});

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

</script>

На самом деле я хочу, чтобы вывод был таким же, как под образцом изображения, под образцом изображения не используется кодирование, просто я Я использую программное обеспечение для рисования, чтобы отредактировать и сделать так, чтобы вы могли понять, что я хочу получить:

Output3

Результат json_encode ($ folder_arr) ниже: 

[{"id":"1","parent":"#","text":"100 Pentadbiran","state":{"selected":false,"opened":false}},{"id":"2","parent":"#","text":"200 Pengurusan Tanah & Bangunan","state":{"selected":true,"opened":true}},{"id":"3","parent":"#","text":"300 Pengurusan Aset","state":{"selected":false,"opened":false}},{"id":"4","parent":"#","text":"400 Pengurusan Kewangan","state":{"selected":false,"opened":false}},{"id":"5","parent":"#","text":"500 Pengurusan Sumber Manusia","state":{"selected":false,"opened":false}},{"id":"6","parent":"1","text":"100-1 Perundangan","state":{"selected":false,"opened":false}},{"id":"7","parent":"1","text":"100-2 Perhubungan Awam","state":{"selected":false,"opened":false}},{"id":"8","parent":"6","text":"100-1-1 Penggubalan-Penyediaan-Pindaan Undang-Undang-Peraturan","state":{"selected":false,"opened":false}},{"id":"9","parent":"6","text":"100-1-2 Khidmat Nasihat","state":{"selected":false,"opened":false}},{"id":"10","parent":"8","text":"100-1-1-1 Undang-Undang Kecil Kerja Di Jalan 1996","state":{"selected":false,"opened":false}},{"id":"11","parent":"8","text":"100-1-1-2 Undang-Undang Kecil Peruntukan Mengenai Lesen Bersesama (Majlis Perbandaran)","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","state":{"selected":false,"opened":false}},{"id":"13","parent":"9","text":"100-1-2-1 Jabatan Penguatkuasaan","state":{"selected":false,"opened":false}},{"id":"14","parent":"9","text":"100-1-2-2 Jabatan Bangunan","state":{"selected":false,"opened":false}},{"id":"15","parent":"7","text":"100-2-1 Publisiti, Promosi Dan Protokol","state":{"selected":false,"opened":false}},{"id":"16","parent":"15","text":"100-2-1-1 Publisiti Dan Kenyataan Media","state":{"selected":false,"opened":false}}]

Надеюсь, кто-нибудь может мне помочь или дать мне несколько идей, как это работает. Спасибо.

Мой код здесь: https://jsfiddle.net/ason5861_cs/n6deaocv/1/

1 Ответ

1 голос
/ 16 апреля 2020

Я не думаю, что это возможно в стандартной конфигурации с jsTree. Однако вы можете установить атрибуты li на узле и перерисовать его. Это обновит DOM с атрибутом. Я не уверен, что это лучший подход к go, но он работает. 

$('#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());
});
...