在js节点中显示颜色 [英] Show color in js nodes

问题描述

我很难在js树中显示不同的颜色.下面是我尝试过的编码:

I have a problem to show the different color in the js tree. Below is my coding what I've tried:

 <?php 
    $folderData = mysqli_query($mysql_con,"select f.id, f.name, f.parentid, f.status, f.add_underline,f.file_type, f.jenis_fail from filing_code_management f where f.status = 1 and f.jenis_fail = 1 union all select s.id, s.file_name,s.id_category, s.status, s.add_underline, s.file_type, s.jenis_fail from upload_filing_dms s where s.status = 1 and s.jenis_fail = 1");
   $folders_arr = array();
   while($row = mysqli_fetch_assoc($folderData)){
      $parentid = $row['parentid'];

$rrr  = "Testing";
      // 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" => $rrr. ' ' .$row['name'] . ' ' ."<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'],"file_type"=>$row['file_type']) ,
         "state" => array("selected" => $selected,"opened"=>$opened) 
     
      );
   }

   ?> 

JavaScript

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(0, 3), 10))+ ";"+ getStrike(n.data.status) + getUnderline(n.data.add_underline)+ get_file_type(n.data.file_type)
            tree.redraw_node(n.id); //Redraw tree
            colorNodes(n.children); //Update leaf nodes
          });
        };

如果我添加了"Testing"(测试)，则我的输出不能跟随数字显示颜色.数字前面的单词.就像图片下面的一样:

My output cannot follow the number to present the color if I've added "Testing" word in the front of the number.Like below the picture:

实际上，我希望输出如下图所示.所述测试"指的是测试".带颜色的单词可以显示数字的前面.

Actually I want the output like below the picture. The "Testing" word with color can show infront of number.

这是我正在工作的jsfiddle: https://jsfiddle.net/jo01vhkw/

This is my working jsfiddle: https://jsfiddle.net/jo01vhkw/

希望有人可以指导我解决问题.谢谢.

Hope someone can guide me how to solve it. Thanks.

更新了跨度

  "text" => "<span>".$rrr."</span>" . ' ' .$row['name'] . ' ' ."<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'],

推荐答案

您的代码正确.

只需编辑此句子:

tree.get_node(n.id).a_attr.style = "color:" + getColor(parseInt(n.text.substr(0, 3), 10))+ ";"+ getStrike(n.data.status) + getUnderline(n.data.add_underline)+ get_file_type(n.data.file_type)

到

tree.get_node(n.id).a_attr.style = "color:" + getColor(parseInt(n.text.substr(5, 3), 10))+ ";"+ getStrike(n.data.status) + getUnderline(n.data.add_underline)+ get_file_type(n.data.file_type)

您在这里遇到的问题:

n.text.substr(0, 3)

如果要访问标签中的span标签，可以尝试以下方法:

And if you want access to span tag in a tag, you can try this method:

$($(tree.get_node(n.id,true)).children().find('span')).each(function(i, e){
    $(e).css('color', 'red')
})

当然，您需要将其放在 之后tree.redraw_node()

Of course, you need put it after tree.redraw_node()

这篇关于在js节点中显示颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！