Как добавить зачеркивание в дереве js согласно условию?

Question

Я создал jsTree для отображения пути к папке. Моя проблема заключается в том, как добавить зачеркивание в соответствии с активным или неактивным условием в JSTree? Надеюсь, что кто-нибудь поможет мне решить эту проблему. Ниже мой код:

<?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'],
         "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>


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

  });


  /*   $(function() {
        $(document).tooltip();
      });  */

</script>

Внутри json_encode ($ folder_arr) содержимое:

[{"id":"1","parent":"#","text":"100 PENTADBIRAN <span id='category'>JTM<\/span>","category":"JTM","state":{"selected":false,"opened":false}},{"id":"2","parent":"#","text":"200 PENGURUSAN TANAH & BANGUNAN <span id='category'>JTM<\/span>","category":"JTM","state":{"selected":true,"opened":true}},{"id":"3","parent":"#","text":"300 PENGURUSAN ASET <span id='category'>JTM<\/span>","category":"JTM","state":{"selected":false,"opened":false}},{"id":"4","parent":"#","text":"400 PENGURUSAN KEWANGAN <span id='category'>JKP<\/span>","category":"JKP","state":{"selected":false,"opened":false}},{"id":"5","parent":"#","text":"500 PENGURUSAN SUMBER MANUSIA <span id='category'>JKP<\/span>","category":"JKP","state":{"selected":false,"opened":false}},{"id":"6","parent":"1","text":"100-1 PERUNDANGAN <span id='category'>JTM<\/span>","category":"JTM","state":{"selected":false,"opened":false}},{"id":"7","parent":"1","text":"100-2 PERHUBUNGAN AWAM <span id='category'>JKP<\/span>","category":"JKP","state":{"selected":false,"opened":false}},{"id":"8","parent":"6","text":"100-1-1 PENGGUBALAN-PENYEDIAAN-PINDAAN UNDANG-UNDANG-PERATURAN <span id='category'>JTM<\/span>","category":"JTM","state":{"selected":false,"opened":false}},{"id":"9","parent":"6","text":"100-1-2 KHIDMAT NASIHAT <span id='category'>JTM<\/span>","category":"JTM","state":{"selected":false,"opened":false}},{"id":"10","parent":"8","text":"100-1-1-1 UNDANG-UNDANG KECIL KERJA DI JALAN 1996 <span id='category'>JTM<\/span>","category":"JTM","state":{"selected":false,"opened":false}},{"id":"11","parent":"8","text":"100-1-1-2 UNDANG-UNDANG KECIL PERUNTUKAN MENGENAI LESEN BERSESAMA (MAJLIS PERBANDARAN) <span id='category'>JTM<\/span>","category":"JTM","state":{"selected":false,"opened":false}},{"id":"12","parent":"8","text":"100-1-1-3 UNDANG-UNDANG KECIL MENGKOMPAUN KESALAHAN-KESALAHAN (MAJLIS PERBANDARAN KLANG), JALAN PARIT DAN <span id='category'>JTM (BERHUBUNG KOD 100-1\/1\/2)<\/span>","category":"JTM (BERHUBUNG KOD 100-1\/1\/2)","state":{"selected":false,"opened":false}},{"id":"13","parent":"9","text":"100-1-2-1 JABATAN PENGUATKUASAAN <span id='category'>JTM<\/span>","category":"JTM","state":{"selected":false,"opened":false}},{"id":"14","parent":"9","text":"100-1-2-2 JABATAN BANGUNAN <span id='category'>JTM<\/span>","category":"JTM","state":{"selected":false,"opened":false}},{"id":"15","parent":"7","text":"100-2-1 PUBLISITI, PROMOSI DAN PROTOKOL <span id='category'>JKP<\/span>","category":"JKP","state":{"selected":false,"opened":false}},{"id":"16","parent":"15","text":"100-2-1-1 PUBLISITI DAN KENYATAAN MEDIA <span id='category'>JKP<\/span>","category":"JKP","state":{"selected":false,"opened":false}},{"id":"84","parent":"#","text":"201 HAHA <span id='category'>JTM<\/span>","category":"JTM","state":{"selected":false,"opened":false}}]

Я хочу, чтобы условие было таким, что если $ active = 0 тогда он покажет зачеркивание в jsTree. Иначе, если $ active = 1 , тогда он вернется к норме.

На самом деле я хочу фактический вывод, подобный приведенному ниже образцу изображения. Для вывода ниже я просто использовал программу Paint для редактирования, чтобы вам было проще узнать, что я хочу получить:

Мой рабочий код JSFiddle: здесь: https://jsfiddle.net/ason5861_cs/9x0dsotz/2/

Надеюсь, кто-нибудь может подсказать мне, как добавить зачеркивание в соответствии с активным или неактивным условием в мой код?

Примечание ： $ row ['name'] и $ row ['category'] необходимы для зачеркивания, если они неактивны.

Answer 1

С PHP вы можете иметь условное значение для установки значения переменной NULL в text-художественное оформление, которое изменяется на line-through. Это будет сделано с CSS. Просто создайте условие, которое проверяет, установлено ли значение $ active в 0, если оно есть, а затем установите значение переменной NULL для отображения сквозной строки. Если значение active не равно 0, то $ strikeThrough останется NULL и ничего не выведет, поэтому не изменится стиль текста, заключенный в тег span.

$strikeThrough = null;
if($active = 0){
$strikeThrough = 'text-decoration: line-through;'
    $output = "<span style='".$strikeThrough."'>" . $rs_wtpname . "</span>";
}
// no change needed for default Active

IN JS, вы можете использовать #folder_jstree nodelist для просмотра списка и обновления там. Вероятно, в вашей функции colorNodes у вас может быть условие для проверки значения состояния, а затем добавьте css к вашему значению, если установлено значение 0 (неактивно).

Если вы не можете получить статус из PHP в JS, вы можете сбросить значение в коде php, используя вышеупомянутый метод, в произвольный атрибут данных или даже атрибут alt, добавленный в #folder_jstree тег элемента span. Затем извлеките его, используя JS, и выполните условное выражение в JS.

РЕДАКТИРОВАТЬ: (25 апреля 2020 г.)

Хорошо, я думаю, что я вижу, что вы делаете с JSON и вашим $ folder_array сейчас и как он сохраняет данные для анализа в файле JSON.

Попробуйте следующий код в вашем 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']; //--> Here you are setting active state
}
$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;
      }

      //--> this would be the default state of active = 1 set in $output
      $output = $row['name'] . ' ' . "<span id='category'>". $row['category']."</span>";
      //--> Now we see if active is set to 0
      if($active === 0){
          //--> if active is set to 0 change the value of $output to reflect 'text-decoration'
          $output = "<span style='text-decoration: line-through;'>" . $row['name'] . ' ' . "<span id='category'>". $row['category']."</span></span>";
      }
      $folders_arr[] = array(
         "id" => $row['id'],
         "parent" => $parentid,
         "text" => $output, //--> save the proper $output in our array
         "category" => $row['category'],
         "state" => array("selected" => $selected,"opened"=>$opened) 
      );
   }