如何在js树中同时显示颜色和删除线? [英] How to show the color and the strikethrough at the same time in the js tree?

问题描述

我很难在js树中同时显示颜色和删除线.它仅可以显示js树中的颜色，如果js树文件夹名称未处于活动状态，则不能显示删除线.我已经设置了文件夹名称active为1，inactive为0.

I have a problem to show the color and the strikethrough at the same time in the js tree. It just can show the color in the js tree, cannot show the strikethrough if the js tree folder name is no active. I have set if the folder name active is 1 , inactive is 0.

下面是我的编码，我认为这些代码需要组合才能起作用，但我不知道如何组合:

Below is my coding, I think these code need to combine to work, but I no idea how to combine it:

<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/

My working fs fiddle coding at here: https://jsfiddle.net/ason5861_cs/ng2v75m8/1/

下面的示例图片是我希望实际的输出可以显示正确的颜色和删除线(如果没有激活的话).

Below sample picture is I want the actual output can show the correct color and the strikethrough if no active.

推荐答案

我已经重写了您的代码.这应该可以按您期望的那样工作

I have rewritten your code. and this should work as you expect

$(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/

also i've edited your fiddle https://jsfiddle.net/hte5jwx0/

这篇关于如何在js树中同时显示颜色和删除线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！