js树中的颜色显示不正确 [英] Color show not properly in the js tree

问题描述

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

I have a problem to get the color in the js tree. Below is my coding:

<?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：

This is 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，则我的输出不能跟随数字显示颜色数字前的可变字。如图片下方：

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

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

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

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

This is my working jsfiddle: https://jsfiddle.net/jv4k1f0s/1/

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

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

推荐答案

要轻松解决问题，可以将span标签中的文本位置更改为First。

To take the easy way out, you can change the position of text in span tag to 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，例如：

You can change position MasterName in text key to first, like this:

[{"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}}]

然后，您需要替换此函数：

And after that, you need to replace this function:

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

到此：

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

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

尝试使用如下所示的foreach循环：

Try use foreach loop like this:

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

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