Sebenarnya APEX tree telah memakai jsTree yang dimodifikasi dan dibundle dalam library js APEX. Namun yang dipakai masih versi lama. Librari jsTree ada di folder #IMAGE_PREFIX#libraries/jquery-jstree.
Anda sekarang bisa memakai jsTree versi stabil dari jstree v.1.0pre yang dapat di download dari sini.
Berikut referensi yang bisa anda pakai dalam membangun jstree kedalam apex.
Oke tanpa banyak nyengnyong lagi kita coba construct jsTree dalam APEX :
- Buatlah konstruksi pl/sql AJAX callback dengan nama GET_NODE_DATA dengan return xml data:
- '||
'
<![CDATA['||i.name||']]> ';
END LOOP;
l_xml := l_xml || ' - Buatlah js function untuk membangun tree yang dipanggil saat windows on load.
- Buatlah sebuah region dengan region source :
- Demo bisa dilihat disini untuk implementasi jstree on apex.oracle.
- Preview image
declare
l_xml VARCHAR2(32767):='';
l_loop_counter NUMBER(5);
BEGIN
FOR i IN (SELECT m.id,m.STATUS,
m.menu_id parent_id,
m.description name,
case when .. then
--- define your dynamic icon for node here
end tree_image,
case when
--- define your dynamic style for node here e.g : color,font
end tree_style,
m.TOOLTIP as tooltip,
null as link,
m.STATUS type_menu,m.alias
FROM your_table m
START WITH m.menu_id is null
CONNECT BY PRIOR m.id = m.menu_id
order siblings by m.seq
)
LOOP
l_xml := l_xml || ' ';
htp.prn(l_xml);
EXCEPTION
WHEN OTHERS THEN
RAISE;
END;
function loadDataTree() {
apex.server.process("GET_NODE_DATA", null,
{
dataType: 'text',
success: function (pData) {
constructTree(pData);
}
}
)
}
function constructTree(pData) {
$(function () {
var treeCon = $("#treeContainer").jstree({
"plugins": ["themes", "xml_data", "ui", "cookies"],
"ui": {
"select_limit": 2,
"select_multiple_modifier": "alt"
},
"core": {
"animation": 700,
"initially_open": [1,3], "load_open": true
},
"xml_data": {
"data": pData
},
"themes": {
"theme": "classic",
"dots": false,
"icons": true
},
"cookies": { prefix: "tree1", opts: { path: '/' } }
});
$("#treeContainer").on("dblclick", "a", function (e, data) {
document.location.href = $(e.target).attr('href');
});
});
};
