Is Possible To Click The Js Tree Node To Echo The Data?
May I know is possible to click the js tree node to echo the data? My question is same like this question Click the each node in the js tree to show the value Below is show the dat
Solution 1:
so first we will bind changed.jstree event, and will grab the node text value.
.on('changed.jstree', function (e, data) {
let nodeText = data.instance.get_node(data.selected[0]).text;
})
Im assuming you will have pindaan and tarikh in the same format. something like below -
(NO.PINDAAN [NUMBER_HERE] TARIKH BERKUATKUASA [DATE_HERE] )
so we will use regex to fetch your variable from the template.
var regRet = nodeText.match(/(NO.PINDAAN (.*) TARIKH BERKUATKUASA (.*) )/i);
if(regRet && regRet.length === 4) {
renderData(regRet[2], regRet[3]);
} else {
renderData(' ', ' ');
}
and then call another function renderData, which actual populate values in heading.
functionrenderData(pindaan, tarikh) {
$('#pindaan').html(pindaan);
$('#tarikh').html(tarikh);
}
also set the value to empty if node doesn't have pindaan and tarikh value
<html><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" /><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script><divclass="box"><divclass="row"><divclass="col-lg-12"><header><h5>No. Pindaan [<spanid="pindaan"></span>] Tarikh Berkuatkuasa [<spanid="tarikh"></span>] </h5></header><divid="div-4"class="body"><divclass="x_content"><!-- Initialize jsTree --><divid="folder_jstree"title=""></div><!-- Store folder list in JSON format --><textareastyle=""id='txt_folderjsondata'>[{"id":"658","parent":"#","text":"100 PENTADBIRAN <spanid='open'style='font-size:9px;'> <\/span> <spanid='open'style='font-size:9px;'> <\/span> <spanid='open'style='font-size:9px;'>FAIL BARU<\/span> <spanid='open'><\/span>","category":"JTM","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"659","parent":"#","text":"200 PENGURUSAN TANAH & BANGUNAN <spanid='open'style='font-size:9px;'> <\/span> <spanid='open'style='font-size:9px;'> <\/span> <spanid='open'style='font-size:9px;'><\/span> <spanid='open'>(NO.PINDAAN 666 TARIKH BERKUATKUASA 2020-06-25 )<\/span>","category":"JTM","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"660","parent":"#","text":"300 PENGURUSAN ASET <spanid='open'style='font-size:9px;'> <\/span> <spanid='open'style='font-size:9px;'> <\/span> <spanid='open'style='font-size:9px;'><\/span> <spanid='open'>(NO.PINDAAN 777 TARIKH BERKUATKUASA 2020-06-19 )<\/span>","category":"JTM","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"661","parent":"#","text":"400 PENGURUSAN KEWANGAN <spanid='open'style='font-size:9px;'> <\/span> <spanid='open'style='font-size:9px;'> <\/span> <spanid='open'style='font-size:9px;'><\/span> <spanid='open'>(NO.PINDAAN 966 TARIKH BERKUATKUASA 2020-06-26 )<\/span>","category":"JKP","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"662","parent":"#","text":"500 PENGURUSAN SUMBER MANUSIA <spanid='open'style='font-size:9px;'> <\/span> <spanid='open'style='font-size:9px;'> <\/span> <spanid='open'style='font-size:9px;'><\/span> <spanid='open'>(NO.PINDAAN 966 TARIKH BERKUATKUASA 2020-06-26 )<\/span>","category":"JKP","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"663","parent":"658","text":"100-1 PERUNDANGAN <spanid='open'style='font-size:9px;'> <\/span> <spanid='open'style='font-size:9px;'> <\/span> <spanid='open'style='font-size:9px;'><\/span> <spanid='open'>(NO.PINDAAN 966 TARIKH BERKUATKUASA 2020-06-26 )<\/span>","category":"JTM","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"664","parent":"658","text":"100-2 PERHUBUNGAN AWAM <spanid='open'style='font-size:9px;'> <\/span> <spanid='open'style='font-size:9px;'> <\/span> <spanid='open'style='font-size:9px;'><\/span> <spanid='open'>(NO.PINDAAN 966 TARIKH BERKUATKUASA 2020-06-26 )<\/span>","category":"JKP","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"665","parent":"663","text":"100-1-1 PENGGUBALAN-PENYEDIAAN-PINDAAN UNDANG-UNDANG-PERATURAN <spanid='open'style='font-size:9px;'> <\/span> <spanid='open'style='font-size:9px;'> <\/span> <spanid='open'style='font-size:9px;'><\/span> <spanid='open'>(NO.PINDAAN 966 TARIKH BERKUATKUASA 2020-06-26 )<\/span>","category":"JTM","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"666","parent":"663","text":"100-1-2 KHIDMAT NASIHAT <spanid='open'style='font-size:9px;'> <\/span> <spanid='open'style='font-size:9px;'> <\/span> <spanid='open'style='font-size:9px;'><\/span> <spanid='open'>(NO.PINDAAN 966 TARIKH BERKUATKUASA 2020-06-26 )<\/span>","category":"JTM","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"667","parent":"665","text":"100-1-1-1 UNDANG-UNDANG KECIL KERJA DI JALAN 1996 <spanid='open'style='font-size:9px;'> <\/span> <spanid='open'style='font-size:9px;'> <\/span> <spanid='open'style='font-size:9px;'><\/span> <spanid='open'>(NO.PINDAAN 966 TARIKH BERKUATKUASA 2020-06-26 )<\/span>","category":"JTM","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"668","parent":"665","text":"100-1-1-2 UNDANG-UNDANG KECIL PERUNTUKAN MENGENAI LESEN BERSESAMA (MAJLIS PERBANDARAN) <spanid='open'style='font-size:9px;'> <\/span> <spanid='open'style='font-size:9px;'> <\/span> <spanid='open'style='font-size:9px;'><\/span> <spanid='open'>(NO.PINDAAN 966 TARIKH BERKUATKUASA 2020-06-26 )<\/span>","category":"JTM","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"670","parent":"666","text":"100-1-2-1 JABATAN PENGUATKUASAAN <spanid='open'style='font-size:9px;'> <\/span> <spanid='open'style='font-size:9px;'> <\/span> <spanid='open'style='font-size:9px;'><\/span> <spanid='open'>(NO.PINDAAN 966 TARIKH BERKUATKUASA 2020-06-26 )<\/span>","category":"JTM","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"671","parent":"666","text":"100-1-2-2 JABATAN BANGUNAN <spanid='open'style='font-size:9px;'> <\/span> <spanid='open'style='font-size:9px;'> <\/span> <spanid='open'style='font-size:9px;'><\/span> <spanid='open'>(NO.PINDAAN 966 TARIKH BERKUATKUASA 2020-06-26 )<\/span>","category":"JTM","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"672","parent":"664","text":"100-2-1 PUBLISITI, PROMOSI DAN PROTOKOL <spanid='open'style='font-size:9px;'> <\/span> <spanid='open'style='font-size:9px;'> <\/span> <spanid='open'style='font-size:9px;'><\/span> <spanid='open'>(NO.PINDAAN 966 TARIKH BERKUATKUASA 2020-06-26 )<\/span>","category":"JKP","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"673","parent":"672","text":"100-2-1-1 PUBLISITI DAN KENYATAAN MEDIA <spanid='open'style='font-size:9px;'> <\/span> <spanid='open'style='font-size:9px;'>Berhubung Kod:999<\/span> <spanid='open'style='font-size:9px;'><\/span> <spanid='open'>(NO.PINDAAN 966 TARIKH BERKUATKUASA 2020-06-26 )<\/span>","category":"JKP","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"674","parent":"665","text":"100-1-1-3 UNDANG-UNDANG KECIL MENGKOMPAUN KESALAHAN-KESALAHAN (MAJLIS PERBANDARAN KLANG) <spanid='open'style='font-size:9px;'>Rujuk Kod:TEST<\/span> <spanid='open'style='font-size:9px;'> <\/span> <spanid='open'style='font-size:9px;'><\/span> <spanid='open'>(NO.PINDAAN 966 TARIKH BERKUATKUASA 2020-06-26 )<\/span>","category":"JTM (BERHUBUNG KOD 100-1\/1\/2)","filing_code_refer":"TEST","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"755","parent":"#","text":"123 TEST <spanid='open'style='font-size:9px;'>Rujuk Kod:123<\/span> <spanid='open'style='font-size:9px;'> <\/span> <spanid='open'style='font-size:9px;'><\/span> <spanid='open'>(NO.PINDAAN 123 TARIKH BERKUATKUASA 2020-06-16 )<\/span>","category":"jtm","filing_code_refer":"123","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}}]</textarea><divclass="col-lg-12 col-md-offset-5"style="padding-bottom: 10px;"><buttonclass="btn btn-sm btn-primary">Print</button></div></div></div></div></div></div></html><scriptstyle="text/javascript">let obj = {
pindaan:'',
tarikh:''
}
$(document).ready(function() {
var folder_jsondata = JSON.parse($('#txt_folderjsondata').val());
$('#folder_jstree')
.on('changed.jstree', function (e, data) {
let nodeText = data.instance.get_node(data.selected[0]).text;
var regRet = nodeText.match(/(NO.PINDAAN (.*) TARIKH BERKUATKUasa (.*) )/i);
if(regRet && regRet.length === 4) {
renderData(regRet[2], regRet[3]);
} else {
renderData(' ', ' ');
}
})
.jstree({
'core': {
'data': folder_jsondata,
'multiple': false
},
'plugins': ['sort'],
'sort': function(a, b) {
returnthis.get_text(a).localeCompare(this.get_text(b), 'en', {
numeric: true
});
}
});
var getColor = function(i) {
if (i >= 100 && i <= 199) {
return"blue";
} elseif (i >= 200 && i <= 299) {
return"red";
} elseif (i >= 300 && i <= 399) {
return"yellow";
} elseif (i >= 400 && i <= 499) {
return"purple";
} elseif (i >= 500 && i <= 599) {
return"green";
} else {
return"#000";
}
};
var colorNodes = function(nodelist) {
var getStrike = function(status) {
if (status === "0") {
return"line-through";
} else {
return"";
}
};
var getUnderline = function(add_underline) {
if (add_underline === "1") {
return" underline;text-underline-position: under;";
} else {
return"";
}
};
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))+ ";"+"text-decoration:" + getStrike(n.data.status) + getUnderline(n.data.add_underline);
tree.redraw_node(n.id); //Redraw treecolorNodes(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);
});
});
functionrenderData(pindaan, tarikh) {
$('#pindaan').html(pindaan);
$('#tarikh').html(tarikh);
}
</script>You can also find the working fiddle here.
Post a Comment for "Is Possible To Click The Js Tree Node To Echo The Data?"