Я создаю js дерево на странице. Я написал jquery, чтобы вернуть цвет и сквозной переход в результате, но он не может работать, показывает правильный цвет и сквозной переход, если папка имя неактивно Кто-нибудь может помочь мне проверить, в какой части я ошибаюсь?
Ниже моя кодировка:
<?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>
<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
});
}
});
$('#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());
});
</script>
На самом деле я хочу вывод, как показано ниже:
Результат json_encode ($ folder_arr):
[{"id":"1","parent":"#","text":"100 PENTADBIRAN <span id='category'>JTM<\/span>","category":"JTM","data":{"status":"0"},"state":{"selected":false,"opened":false}},{"id":"2","parent":"#","text":"200 PENGURUSAN TANAH & BANGUNAN <span id='category'>JTM<\/span>","category":"JTM","data":{"status":"1"},"state":{"selected":true,"opened":true}},{"id":"3","parent":"#","text":"300 PENGURUSAN ASET <span id='category'>JTM<\/span>","category":"JTM","data":{"status":"0"},"state":{"selected":false,"opened":false}},{"id":"4","parent":"#","text":"400 PENGURUSAN KEWANGAN <span id='category'>JKP<\/span>","category":"JKP","data":{"status":"1"},"state":{"selected":false,"opened":false}},{"id":"5","parent":"#","text":"500 PENGURUSAN SUMBER MANUSIA <span id='category'>JKP<\/span>","category":"JKP","data":{"status":"1"},"state":{"selected":false,"opened":false}},{"id":"6","parent":"1","text":"100-1 PERUNDANGAN <span id='category'>JTM<\/span>","category":"JTM","data":{"status":"1"},"state":{"selected":false,"opened":false}},{"id":"7","parent":"1","text":"100-2 PERHUBUNGAN AWAM <span id='category'>JKP<\/span>","category":"JKP","data":{"status":"1"},"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","data":{"status":"1"},"state":{"selected":false,"opened":false}},{"id":"9","parent":"6","text":"100-1-2 KHIDMAT NASIHAT <span id='category'>JTM<\/span>","category":"JTM","data":{"status":"1"},"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","data":{"status":"1"},"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","data":{"status":"1"},"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)","data":{"status":"1"},"state":{"selected":false,"opened":false}},{"id":"13","parent":"9","text":"100-1-2-1 JABATAN PENGUATKUASAAN <span id='category'>JTM<\/span>","category":"JTM","data":{"status":"1"},"state":{"selected":false,"opened":false}},{"id":"14","parent":"9","text":"100-1-2-2 JABATAN BANGUNAN <span id='category'>JTM<\/span>","category":"JTM","data":{"status":"1"},"state":{"selected":false,"opened":false}},{"id":"15","parent":"7","text":"100-2-1 PUBLISITI, PROMOSI DAN PROTOKOL <span id='category'>JKP<\/span>","category":"JKP","data":{"status":"1"},"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","data":{"status":"1"},"state":{"selected":false,"opened":false}}]
Я чувствую, что этот код возвращает color: ${theColor}; text-decoration: ${isLineThrough}
; есть что-то проблема, надеюсь, кто-то может помочь мне решить эту проблему. Спасибо.