如何在js树中同时显示颜色和删除线？

Question

在 js 树中同时显示颜色和删除线时出现问题。它只能在 js 树中显示颜色，如果 js 树文件夹名称未激活，则无法显示删除线。我已经设置了文件夹名 active 是 1 ，inactive 是 0 。

以下是我的编码，我认为这些代码需要组合才能工作，但我不知道如何组合它：

<script style="text/javascript">
  $(document).ready(function() {
    var folder_jsondata = JSON.parse($('#txt_folderjsondata').val());

    $('#folder_jstree').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 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());
    });

    $('#folder_jstree').bind('hover_node.jstree', function(e, data) {
      $("#" + data.node.id).attr("title", data.node.original.category);
    });

  });


  var StrikeNodes = function(nodelist) {
      var tree = $('#folder_jstree').jstree(true);
      nodelist.forEach(function(n) {
        tree.get_node(n.id).a_attr.style = "text-decoration:" + getStrike(n.data.status);
        console.log(getStrike(n.data.status))
        tree.redraw_node(n.id); //Redraw tree
        StrikeNodes(n.children); //Update leaf nodes
      });
    };

        var getStrike = function(status) {
      if (status === "0") {
        return "line-through;";
      }  else {
        return "";
      }
    };

    $('#folder_jstree').bind('load_node.jstree', function(e, data) {
      var tree = $('#folder_jstree').jstree(true);
      StrikeNodes(tree.get_json());
    });


</script>

这是我的php编码：

<?php 
   $folderData = mysqli_query($mysql_con,"SELECT * FROM filing_code_management");
    // $arr_sql5 = db_conn_select($folderData);
    // foreach ($arr_sql5 as $rs_sql5) {
    // $active = $rs_sql5['status'];
// }


   $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'] . ' ' . "<span id='category'>". $row['category']."</span>",
         "category" => $row['category'],
         // "status" => $row['status'], // status 0 is inactive, status 1 is active
         "data" => array("status" => $row['status']) ,
         "state" => array("selected" => $selected,"opened"=>$opened) 

      );
   }

   ?> 

 <!-- Initialize jsTree -->
   <div id="folder_jstree" title=""></div>
   <!-- Store folder list in JSON format -->
   <textarea style="" id='txt_folderjsondata'><?= json_encode($folders_arr) ?></textarea>

我在这里工作的 fs 小提琴编码：https://jsfiddle.net/ason5861_cs/ng2v75m8/1/

下面的示例图片是我希望实际输出可以显示正确的颜色和删除线（如果没有活动）。

Answer 1

我已经重写了你的代码。这应该可以按您的预期工作

$(document).ready(function() {
    var folder_jsondata = JSON.parse($('#txt_folderjsondata').val());

    $('#folder_jstree').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
        });
      }
    });

    $('#folder_jstree').bind('hover_node.jstree', function(e, data) {
      $("#" + data.node.id).attr("title", data.node.original.category);
    });

});

var StrikeNodes = function(nodelist) {
    var tree = $('#folder_jstree').jstree(true);
      nodelist.forEach(function(n) {
        tree.get_node(n.id).a_attr.style = getStrike(n);
        tree.redraw_node(n.id); //Redraw tree
        StrikeNodes(n.children); //Update leaf nodes
    });
};

var getStrike = function(n) {

   let { data: { status: stat } } = n
   let color = parseInt(n.text.substr(0, 3), 10)

   let isLineThrough = ''
   let theColor = '#000'

   if (stat == 0) isLineThrough = "line-through;";

   if (color >= 100 && color <= 199) {
     theColor = "blue";
   } else if (color >= 200 && color <= 299) {
     theColor = "red";
   } else if (color >= 300 && color <= 399) {
     theColor = "yellow";
   } else if (color >= 400 && color <= 499) {
     theColor = "purple";
   } else if (color >= 500 && color <= 599) {
     theColor = "green";
   }

   return `color: ${theColor}; text-decoration: ${isLineThrough}`;
};

$('#folder_jstree').bind('load_node.jstree', function(e, data) {
   var tree = $('#folder_jstree').jstree(true);
   StrikeNodes(tree.get_json());
});

我还编辑了你的小提琴https://jsfiddle.net/hte5jwx0/