Color show not properly in the js tree

Question

I have a problem to get the color in the js tree. Below is my coding:

Answer 1

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
            }
            
          });