I have a problem to get the color in the js tree. Below is my coding:
<?php $folderData = mysqli_query($mysql_con,"SELECT * FROM filing_code_management where is_approved = 1"); $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']; $row_name = $row['name']; $testing = "<span onclick='printing_dir_1("ringasan", "form", "print","".$row['id']."");'>$row_name</span>"; // 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" => $testing. ' ' ."<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']) , "state" => array("selected" => $selected,"opened"=>$opened) ); } ?>
This is 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(103, 3), 10))+ ";"+"text-decoration:" + getStrike(n.data.status) + getUnderline(n.data.add_underline); tree.redraw_node(n.id); //Redraw tree // $($(tree.get_node(n.id,true)).children().find('span')).each(function(i, e){ // $(e).css('color', 'getColor(parseInt(n.text.substr(5, 3), 10))') // }) 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()); });
My output cannot follow the number to present the color if I’ve added “$testing” variable word in the front of the number.Like below the picture:
Actually I want the output like below the picture. The color can show infront of number.
This is my working jsfiddle: https://jsfiddle.net/jv4k1f0s/1/
Hope someone can guide me how to solve it. Thanks.
Advertisement
Answer
To take the easy way out, you can change the position of text in span tag to First.
Example:
This is your data:
[{"id":"824","parent":"#","text":"<span onclick='printing_dir_1("ringasan", "form", "print","824");'>101 PENTADBIRAN AM</span> <span id='open' style='font-size:9px;'> </span> <span id='open' style='font-size:9px;'> </span> <span id='open' style='font-size:9px;'></span> <span style='display:none;' id='open'></span>","category":"","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}}]
You can change position MasterName in text key to first, like this:
[{"id":"824","parent":"#","text":"101 PENTADBIRAN AM<span onclick='printing_dir_1("ringasan", "form", "print","824");'></span> <span id='open' style='font-size:9px;'> </span> <span id='open' style='font-size:9px;'> </span> <span id='open' style='font-size:9px;'></span> <span style='display:none;' id='open'></span>","category":"","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}}]
And after that, you need to replace this function:
getColor(parseInt(n.text.substr(103, 3), 10))
To this:
getColor(parseInt(n.text.substr(0, 3), 10))
Updated: You can keep your data template
Try use foreach loop like this:
nodelist.forEach(function(n) { let masterTextTag = $($(tree.get_node(n.id,true))) if(masterTextTag !== undefined && masterTextTag.length != 0){ let masterText = masterTextTag[0].textContent tree.get_node(n.id).a_attr.style = "color:" + getColor(parseInt(masterText.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 } });