如何根据条件在js树中添加删除线?
How to add strikethrough in the js tree according condition?
我创建了一个 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($folders_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 那么它将恢复正常。
实际上我想要像下面示例图片那样的实际输出。下面的输出我只是用画图软件编辑的,更容易让你知道我想要什么作为输出:
我的工作 JSFiddle 代码在这里:https://jsfiddle.net/ason5861_cs/9x0dsotz/2/
希望有人能指导我如何根据条件激活或不激活添加删除线到我的代码中?
注意:$row['name']和$row['category']不活动时需要将删除线放在一起
使用 PHP 时,您可以有条件地将 NULL 变量的值设置为更改为直通的文本修饰。这将通过 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
在 JS 中,您可以在列表中使用 #folder_jstree
nodelist
到 运行 并在那里更新。可能在您的 colorNodes 函数中,您可以有一个条件来检查状态的值,如果设置为 0(不活动),则将 css 附加到您的值。
如果您无法从 PHP 中获取状态到 JS,您可以使用上述方法将 php 代码中的值转储到任意数据属性中,甚至将 alt 属性添加到#folder_jstree
元素跨度标记。然后使用 JS 检索它并在 JS 中执行条件。
编辑: (2020 年 4 月 25 日)
好的,我想我知道你现在用 JSON 和你的 $folders_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)
);
}
我创建了一个 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($folders_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 那么它将恢复正常。
实际上我想要像下面示例图片那样的实际输出。下面的输出我只是用画图软件编辑的,更容易让你知道我想要什么作为输出:
我的工作 JSFiddle 代码在这里:https://jsfiddle.net/ason5861_cs/9x0dsotz/2/
希望有人能指导我如何根据条件激活或不激活添加删除线到我的代码中?
注意:$row['name']和$row['category']不活动时需要将删除线放在一起
使用 PHP 时,您可以有条件地将 NULL 变量的值设置为更改为直通的文本修饰。这将通过 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
在 JS 中,您可以在列表中使用 #folder_jstree
nodelist
到 运行 并在那里更新。可能在您的 colorNodes 函数中,您可以有一个条件来检查状态的值,如果设置为 0(不活动),则将 css 附加到您的值。
如果您无法从 PHP 中获取状态到 JS,您可以使用上述方法将 php 代码中的值转储到任意数据属性中,甚至将 alt 属性添加到#folder_jstree
元素跨度标记。然后使用 JS 检索它并在 JS 中执行条件。
编辑: (2020 年 4 月 25 日)
好的,我想我知道你现在用 JSON 和你的 $folders_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)
);
}