颜色在 js 树中显示不正确

Question

我在获取 js 树中的颜色时遇到问题。以下是我的编码：

<?php 
   $folderData = mysqli_query($mysql_con,"SELECT * FROM filing_code_management where is_approved = 1");
   $folders_arr = array();
   while($row = mysqli_fetch_assoc($folderData)){
            $parentid = $row['parentid'];
            $siri_pindaan = $row['siri_pindaan'];
            $effective_date = $row['effective_date'];
            $filing_code_refer = $row['filing_code_refer'];
            $filing_code_link = $row['filing_code_link'];
            $row_name = $row['name'];

    $testing = "<span onclick='printing_dir_1(\"ringasan\", \"form\", \"print\",\"".$row['id']."\");'>$row_name</span>";
                          
      // echo $siri_pindaan;
      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" => $testing. ' ' ."<span id='open' style='font-size:9px;'>".$refer_to_code .$row['filing_code_refer']."</span>" .' '. "<span id='open' style='font-size:9px;'>".$link_to_code .$row['filing_code_link']."</span>" .' '. "<span id='open' style='font-size:9px;'>".$row['description_update']."</span>".' '. "<span style='display:none;' id='open'>".$siri_pindaan_edit."</span>",
            "category" => $row['category'],
            "filing_code_refer" => $row['filing_code_refer'],
            // "status" => $row['status'], // status 0 is inactive, status 1 is active
            "data" => array("status" => $row['status'],"add_underline"=>$row['add_underline']) ,
            "state" => array("selected" => $selected,"opened"=>$opened) 
     
      );
   }

   ?> 

这是javascript：

   .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
            });
          }
        });

        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 tree = $('#folder_jstree').jstree(true);
          nodelist.forEach(function(n) {
            tree.get_node(n.id).a_attr.style = "color:" + getColor(parseInt(n.text.substr(103, 3), 10))+ ";"+"text-decoration:" + getStrike(n.data.status) + getUnderline(n.data.add_underline);
            tree.redraw_node(n.id); //Redraw tree
            // $($(tree.get_node(n.id,true)).children().find('span')).each(function(i, e){
            // $(e).css('color', 'getColor(parseInt(n.text.substr(5, 3), 10))')
            // })
            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());
        });

如果我在数字前面添加了“$testing”变量字，我的输出不能跟随数字呈现颜色。如下图：

实际上我想要如下图所示的输出。颜色可以显示在数字前面。

这是我的工作 jsfiddle：https://jsfiddle.net/jv4k1f0s/1/

希望有人能指导我如何解决它。谢谢。

Answer 1

为方便起见，您可以将span标签中文本的位置更改为First。

例子：

这是您的数据：

[{"id":"824","parent":"#","text":"<span onclick='printing_dir_1(\"ringasan\", \"form\", \"print\",\"824\");'>101 PENTADBIRAN AM<\/span> <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'><\/span> <span style='display:none;' id='open'><\/span>","category":"","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}}]

您可以将文本键中的 MasterName 位置更改为 first，如下所示：

[{"id":"824","parent":"#","text":"101 PENTADBIRAN AM<span onclick='printing_dir_1(\"ringasan\", \"form\", \"print\",\"824\");'><\/span> <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'><\/span> <span style='display:none;' id='open'><\/span>","category":"","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}}]

然后，你需要替换这个函数：

getColor(parseInt(n.text.substr(103, 3), 10))

到这里：

getColor(parseInt(n.text.substr(0, 3), 10))

更新： 您可以保留您的数据模板

尝试像这样使用 foreach 循环：

nodelist.forEach(function(n) {
          
            let masterTextTag = $($(tree.get_node(n.id,true)))
            
            if(masterTextTag !== undefined && masterTextTag.length != 0){
                let masterText = masterTextTag[0].textContent
              tree.get_node(n.id).a_attr.style = "color:" + getColor(parseInt(masterText.substr(0, 3), 10))+ ";"+"text-decoration:" + getStrike(n.data.status) + getUnderline(n.data.add_underline);
              tree.redraw_node(n.id); //Redraw tree
        
              colorNodes(n.children); //Update leaf nodes
            }
            
          });