如何检测前缀号以在js树中显示不同的颜色？

Question

我正在使用 PHP 创建 js 树来显示文件夹和子文件夹名称，如下所示：

我的问题是如何编写逻辑代码来检测前缀号以在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>

其实我想要的输出和下面的示例图片一样，下面的示例图片不是使用编码制作的，只是我使用画图软件进行编辑，让你很容易理解我想要得到的输出：

Answer 1

我认为这不可能作为 jsTree 的标准配置。但是，您可以在节点上设置 li 属性并重绘它。这将使用属性更新 DOM。我不确定这是否是解决此问题的最佳方法，但它确实有效。$('#folder_jstree').jstree({ 'core' : {&nbsp; &nbsp; &nbsp; 'data' : folder_jsondata,&nbsp; &nbsp; &nbsp; 'multiple': false} });var getColor = function (i) {&nbsp; &nbsp; if (i >= 100 && i <= 199) { return "blue"; }&nbsp; &nbsp; else if (i >= 200 && i <= 299) { return "red"; }&nbsp; &nbsp; else if (i >= 300 && i <= 399) { return "yellow"; }&nbsp; &nbsp; else if (i >= 400 && i <= 499) { return "purple"; }&nbsp; &nbsp; else if (i >= 500 && i <= 599) { return "green"; }&nbsp; &nbsp; else { return "#000"; }}var colorNodes = function(nodelist){&nbsp; &nbsp; var tree = $('#folder_jstree').jstree(true);&nbsp; &nbsp; nodelist.forEach(function (n) {&nbsp; &nbsp; &nbsp; &nbsp; tree.get_node(n.id).a_attr.style = "color:" + getColor(parseInt(n.text.substr(0,3),10));&nbsp; &nbsp; &nbsp; &nbsp; tree.redraw_node(n.id); //Redraw tree&nbsp; &nbsp; &nbsp; &nbsp; colorNodes(n.children); //Update leaf nodes&nbsp; &nbsp; });}$('#folder_jstree').bind('load_node.jstree', function (e, data) {&nbsp; &nbsp; var tree = $('#folder_jstree').jstree(true);&nbsp; &nbsp; colorNodes(tree.get_json());});