我想知道是否可以通过点击js树节点来回显数据？下面是数据方法编码：<h5>No. Pindaan [siri_pindaan input from user] Tarikh Berkuatkuasa [effective_date input from user]</h5>$folders_arr[] = array( "id" => $row['id'],"parent" => $parentid, "text" => $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 id='open'>".$siri_pindaan_edit."</span>","category" => $row['category'],"filing_code_refer" => $row['filing_code_refer'],"siri_pindaan" => $row['siri_pindaan'],"effective_date" = $row['effective_date'];"data" => array("status" => $row['status'],"add_underline"=>$row['add_underline']) ,"state" => array("selected" => $selected,"opened"=>$opened) );我需要在h5中显示$row['siri_pindaan']和$row[' effective_date']值。我的预期结果如下图所示，如果我单击 500 PENGURUSAN SUMBER MALAYSIA 树节点，值 966 和 2020-06-26 将显示在 h5顶部。
1 回答
牧羊人nacy
TA贡献1862条经验 获得超7个赞
所以首先我们将绑定changed.jstree事件，并获取节点文本值。
.on('changed.jstree', function (e, data) {
let nodeText = data.instance.get_node(data.selected[0]).text;
})
我假设您将拥有pindaan和tarikh相同的格式。像下面这样-
(NO.PINDAAN [NUMBER_HERE] TARIKH BERKUATKUASA [DATE_HERE] )
所以我们将使用正则表达式从模板中获取变量。
var regRet = nodeText.match(/(NO.PINDAAN (.*) TARIKH BERKUATKUASA (.*) )/i);
if(regRet && regRet.length === 4) {
renderData(regRet[2], regRet[3]);
} else {
renderData(' ', ' ');
}
然后调用另一个函数renderData，该函数实际填充标题中的值。
function renderData(pindaan, tarikh) {
$('#pindaan').html(pindaan);
$('#tarikh').html(tarikh);
}
如果节点没有值，也将值设置pindaan为tarikh空
<html>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div class="box">
<div class="row">
<div class="col-lg-12">
<header>
<h5>No. Pindaan [<span id="pindaan"> </span>] Tarikh Berkuatkuasa [<span id="tarikh"> </span>] </h5>
</header>
<div id="div-4" class="body">
<div class="x_content">
<!-- Initialize jsTree -->
<div id="folder_jstree" title=""></div>
<!-- Store folder list in JSON format -->
<textarea style="" id='txt_folderjsondata'>[{"id":"658","parent":"#","text":"100 PENTADBIRAN <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'>FAIL BARU<\/span> <span id='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 <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 id='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 <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 id='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 <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 id='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 <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 id='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 <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 id='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 <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 id='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 <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 id='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 <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 id='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 <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 id='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) <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 id='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 <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 id='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 <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 id='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 <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 id='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 <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'>Berhubung Kod:999<\/span> <span id='open' style='font-size:9px;'><\/span> <span id='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) <span id='open' style='font-size:9px;'>Rujuk Kod:TEST<\/span> <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'><\/span> <span id='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 <span id='open' style='font-size:9px;'>Rujuk Kod:123<\/span> <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'><\/span> <span id='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>
<div class="col-lg-12 col-md-offset-5" style="padding-bottom: 10px;">
<button class="btn btn-sm btn-primary">Print</button>
</div>
</div>
</div>
</div>
</div>
</div>
</html>
<script style="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) {
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 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 tree
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());
});
$('#folder_jstree').bind('hover_node.jstree', function(e, data) {
$("#" + data.node.id).attr("title", data.node.original.category);
});
});
function renderData(pindaan, tarikh) {
$('#pindaan').html(pindaan);
$('#tarikh').html(tarikh);
}
</script>
您还可以在这里找到工作小提琴。
https://jsfiddle.net/ewk0ay2r/
- 1 回答
- 0 关注
- 98 浏览
添加回答
举报
0/150
提交
取消