如何删除js树中选中的下划线和划线？

Question

我在删除 js 树中的直通线时遇到问题。例如现在我的树节点是 199 test Rujuk Kod:100-1-1。我在 199 测试 Rujuk Kod:100-1-1 中添加了直通。但我只想在 199 test 中添加，Rujuk Kod:100-1-1 不想添加直通。希望有人能帮我解决这个问题。谢谢。

下面是我的编码：

<?php 

$folderData = mysqli_query($mysql_con,"SELECT * FROM filing_code_management");
$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'];
        if ($filing_code_refer != NULL) {
        $refer_to_code = "Rujuk Kod:";
        }
        if ($filing_code_refer == NULL) {
        $refer_to_code = " ";
        }
        if ($filing_code_link != NULL) {
        $link_to_code = "Berhubung Kod:";
        }
        if ($filing_code_link == NULL) {
        $link_to_code = " ";
        }

    
      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='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>",
         "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) 
     
      );
   }

   ?> 

<script>
 var colorNodes = function(nodelist) {
        var getStrike = function(status) {
      if (status === "0") {
        return "line-through";
      }  else {
        return "";
      }
    };
    
        var getUnderline = function(add_underline) {
      if (add_underline === "1") {
        return " underline;text-underline-position: under;";
      }  else {
        return "";
      }
    };
      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))+ ";"+"text-decoration:" + getStrike(n.data.status) + getUnderline(n.data.add_underline);
        tree.redraw_node(n.id); //Redraw tree
        colorNodes(n.children); //Update leaf nodes
      });
    };
</script>

这是我的 jsfiddle：https://jsfiddle.net/mLr5w2pd/1/

我的预期结果如下图所示：

已更新 下面是显示js树中的内容。

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

已更新 2

Answer 1

在css下面添加，使jstree-anchor里面的span变成inline-block，那么就没有'line-through'

了

.jstree-anchor span {
    display: inline-block;
}

勾选 fiddle https://jsfiddle.net/mL407ya1/

如果您注意到最后有 line-through，那是因为下面代码行 #2 (text)-

中的 space

{
 "id":"753","parent":"#",
 "text":"199 test <span id='open' style='font-size:9px;'>Rujuk Kod:190-1-1<\/span> <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'> <\/span>",
 "category":"jtm",
  "filing_code_refer":"190-1-1",
  "data":{"status":"0","add_underline":"0"},
  "state":{"selected":false,"opened":false}
}

如果您可以删除 <span> 和 </span> 之间的 space，它将按预期工作。

更新

如果您无法从源代码中删除 space，您可以在代码中使用正则表达式删除 space。当您将字符串解析为 json 数组时，请在解析前删除多余的 space。试试下面

let txtVal = $('#txt_folderjsondata').val();
txtVal = txtVal.replace(/> </g, '><');
var folder_jsondata = JSON.parse(txtVal);

试试下面的 fiddle。 https://jsfiddle.net/mL407ya1/1/

如何删除js树中选中的下划线和划线？

How to remove selected underline and line-through in the js tree?

javascript

css

jstree