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

Question

我正在使用 PHP 创建 js 树来显示文件夹和子文件夹名称，如下所示：我的问题是如何编写逻辑代码来检测前缀号以在js树文件夹和子文件夹名称中显示不同的颜色？我希望前缀编号跟在范围编号之后：Prefix number |      Color --------------------------100 until 199 |      Blue200 until 299 |      Red300 until 399 |      Yellow400 until 499 |      Purple500 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' : {

      '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());

});