Selasa, 29 Oktober 2013

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.
 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:
  2. 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;
    
  3. Buatlah js function untuk membangun tree yang dipanggil saat windows on load.
  4. 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');
          });
        });
    };
    
  5. Buatlah sebuah region dengan region source :
  6. Demo bisa dilihat disini untuk implementasi jstree on apex.oracle.
  7. Preview image 

Tidak ada komentar :

Posting Komentar