Implementasi jsTree dalam APEX

Jika anda telah mengimplementasikan APEX tree dan kurang sreg dengan style-nya. Maka kita bisa mencoba dengan mengimplementasikan jsTree ke dalam APEX.

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.

• jsTree Documentation.
• Tom's Blog tentang ajax tree.

 Oke tanpa banyak nyengnyong lagi kita coba construct jsTree dalam APEX :

1. Buatlah konstruksi pl/sql AJAX callback dengan nama GET_NODE_DATA dengan return xml data:

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 || ''||
         '<![CDATA['||i.name||']]>';
      END LOOP;
         l_xml := l_xml || '';
      htp.prn(l_xml);
EXCEPTION
      WHEN OTHERS THEN
         RAISE;
END;

2. Buatlah js function untuk membangun tree yang dipanggil saat windows on load.

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

3. Buatlah sebuah region dengan region source :
4. Demo bisa dilihat disini untuk implementasi jstree on apex.oracle.
5. Preview image