javascript - 在js节点中显示颜色
问题描述
我在 js 树中显示不同颜色时遇到问题。以下是我尝试过的编码:
<?php
$folderData = mysqli_query($mysql_con,"select f.id, f.name, f.parentid, f.status, f.add_underline,f.file_type, f.jenis_fail from filing_code_management f where f.status = 1 and f.jenis_fail = 1 union all select s.id, s.file_name,s.id_category, s.status, s.add_underline, s.file_type, s.jenis_fail from upload_filing_dms s where s.status = 1 and s.jenis_fail = 1");
$folders_arr = array();
while($row = mysqli_fetch_assoc($folderData)){
$parentid = $row['parentid'];
$rrr = "Testing";
// echo $siri_pindaan;
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" => $rrr. ' ' .$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>".' '. "<span style='display:none;' id='open'>".$siri_pindaan_edit."</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'],"file_type"=>$row['file_type']) ,
"state" => array("selected" => $selected,"opened"=>$opened)
);
}
?>
Javascript
.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 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))+ ";"+ getStrike(n.data.status) + getUnderline(n.data.add_underline)+ get_file_type(n.data.file_type)
tree.redraw_node(n.id); //Redraw tree
colorNodes(n.children); //Update leaf nodes
});
};
如果我在数字前面添加了“测试”字样,我的输出无法跟随数字呈现颜色。如下图所示:
实际上我想要如下图所示的输出。带有颜色的“测试”字样可以显示在数字前面。
这是我的工作 jsfiddle:https ://jsfiddle.net/jo01vhkw/
希望有人能指导我如何解决它。谢谢。
更新跨度
"text" => "<span>".$rrr."</span>" . ' ' .$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>".' '. "<span style='display:none;' id='open'>".$siri_pindaan_edit."</span>",
"category" => $row['category'],
解决方案
你的代码是正确的。
只需编辑这句话:
tree.get_node(n.id).a_attr.style = "color:" + getColor(parseInt(n.text.substr(0, 3), 10))+ ";"+ getStrike(n.data.status) + getUnderline(n.data.add_underline)+ get_file_type(n.data.file_type)
至
tree.get_node(n.id).a_attr.style = "color:" + getColor(parseInt(n.text.substr(5, 3), 10))+ ";"+ getStrike(n.data.status) + getUnderline(n.data.add_underline)+ get_file_type(n.data.file_type)
你的问题在这里:
n.text.substr(0, 3)
如果你想访问标签中的span标签,你可以试试这个方法:
$($(tree.get_node(n.id,true)).children().find('span')).each(function(i, e){
$(e).css('color', 'red')
})
当然,你需要把它放在tree.redraw_node ()之后
推荐阅读
- c# - JSON.NET WriteRaw 在输出上放置额外的数据和右括号
- tomtom - TomTom 反向地理编码未返回某些 gps 坐标的街道名称
- r - 一致——但自动——Plotly 中的颜色选择
- php - 如何防止暴力登录到站点 - Laravel 5.7?
- mongodb - MongoDB 。处理数组和计算
- c++ - googletest 中的程序测试?
- asp.net - asp.net MVC 5 - 无法访问列表中的项目,在视图中
- botframework - 使用 MS Bot Framwork v4 提示用户在对话框流中上传文件
- android - 为所有屏幕尺寸精确设计活动
- php - 我如何检查缩略图 youtube api