Dienstag, 26. September 2017

Implementing new Version (3.3.3) an ajax tree in apex (Lazy Loading)

jsTree is jquery plugin, that provides interactive trees. It is absolutely free, open source and distributed under the MIT license.

There is already Ajax Apex tree, but this is the old version (version 1.0.0). This old version was made by Tom (http://tpetrus.blogspot.de/2013/09/implementing-ajax-tree-in-apex.html) . It works very well but has some limit.

Today, I'll show how to use the new version of jstree (v3.3.3) in Apex. The blog of Tom helped me to integrate this new version of JStree (https://github.com/vakata/jstree) into Apex

1- Include all neccessary files

//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/themes/default/style.min.css
//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/jstree.min.js


2- Populating the tree using AJAX and lazy loading nodes

var init_tree = function() {

    $('#c_tree_id').jstree({
         'plugins': ['search','contextmenu','dnd','sort','state','types','wholerow','ui', 'themeroller'],
        'core': {
            "check_callback" : true, // enable all modifications
            'data': {
                'url': "wwv_flow.show",
                "dataType": "json",
                'data': function(node) {
                    var v_node_id;
                    if ($(node).attr("id") == '#') {
                        v_node_id = 0;
                    } else {
                        v_node_id = $(node).attr("id");
                    }
                    
                    return {
                        "p_request": "APPLICATION_PROCESS=GET_NODE_DATA",
                        "p_flow_id": $v('pFlowId'),
                        "p_flow_step_id": $v('pFlowStepId'),
                        "p_instance": $v('pInstance'),
                        "x01": v_node_id,
                        "x02": "LOAD"

                    };


                },
                "success": function(new_data) {

                    return new_data;


                }
            }
        },
    'search': {
        'case_insensitive': true,
        'show_only_matches' : true,
        'fuzzy' : false,
        
            'ajax' : {
            "dataType": "json",
            "url"            : apex.server.url ({p_request: "APPLICATION_PROCESS=GET_NODE_DATA",x01: $("#P27_SEARCH").val() })
            
         }   
        
    },
        "ui" : {

            "select_limit" : 2,

            "select_multiple_modifier" : "alt",

            "selected_parent_close" : "select_parent",

            "initially_select" : [ "phtml_2" ]

        },
        
        "types" : {
      "default" : {
        "icon" : "fa fa-folder"
      },
      "demo" : {
        "icon" : "fa fa-folder"
      }
    },
   
    }).on('search.jstree', function (nodes, str, res) {
    if (str.nodes.length===0) {
$('#c_tree_id').jstree(true).hide_all();
    }
})

};



3- Ajax Call Back

DECLARE 
    l_node emp.empno%TYPE; 
    l_json VARCHAR2(4000); 
BEGIN 
    IF apex_application.g_x02 = 'LOAD' 
       AND apex_application.g_x01 = 0 THEN 
      SELECT '[' 
             ||Listagg('{' 
                       || '"id":' 
                       ||id 
                       ||',' 
                       || '"text":' 
                       ||'"' 
                       ||name 
                       ||'"' 
                       || ',"icon":"' 
                       ||icon 
                       ||'"' 
                       ||',"children":' 
                       ||'true' 
                       || ',"state":"' 
                       ||CASE is_leaf 
                           WHEN 0 THEN 'closed' 
                           ELSE 'leaf' 
                         END 
                       ||'"' 
                       ||'}', ',') 
                 within GROUP(ORDER BY id) 
             ||']' 
      INTO   l_json 
      FROM   (SELECT LEVEL             lvl, 
                     empno             id, 
                     mgr               parent_id, 
                     ename             name, 
                     connect_by_isleaf is_leaf, 
                     icon   icon, 
                     empno             LINK 
              FROM   emp 
              CONNECT BY PRIOR empno = mgr 
              START WITH mgr IS NULL 
              ORDER  SIBLINGS BY ename) 
      WHERE  parent_id IS NULL; 

      htp.P(l_json); 
    ELSIF apex_application.g_x02 = 'LOAD' 
          AND apex_application.g_x01 != 0 THEN 
      SELECT '[' 
             ||Listagg('{' 
                       || '"id":' 
                       ||id 
                       ||',' 
                       || '"text":' 
                       ||'"' 
                       ||name 
                       ||'"' 
                       || ',"icon":"' 
                       ||icon 
                       ||'"' 
                       ||',"children":' 
                       ||CASE is_leaf 
                           WHEN 0 THEN 'true' 
                           ELSE 'false' 
                         END 
                       || ',"state":"' 
                       ||CASE is_leaf 
                           WHEN 0 THEN 'closed' 
                           ELSE 'leaf' 
                         END 
                       ||'"' 
                       ||'}', ',') 
                 within GROUP(ORDER BY id) 
             ||']' 
      INTO   l_json 
      FROM   (SELECT LEVEL             lvl, 
                     empno             id, 
                     mgr               parent_id, 
                     ename             name, 
                     connect_by_isleaf is_leaf, 
                     icon   icon, 
                     empno             LINK 
              FROM   emp 
              CONNECT BY PRIOR empno = mgr 
              START WITH mgr IS NULL 
              ORDER  SIBLINGS BY ename) 
      WHERE  parent_id = apex_application.g_x01; 

      htp.P(l_json); 
    END IF; 
END; 


Demo
https://apex.oracle.com/pls/apex/f?p=123868:54



Keine Kommentare:

Kommentar veröffentlichen