hi,how to get my all roles or permissions with jstree?

[hepanming007]

hi,how to get my all roles or permissions with jstree. https://github.com/vakata/jstree jstree needs a json data like : [{ "id":1,"text":"Root node","children":[ {"id":2,"text":"Child node 1","children":true}, {"id":3,"text":"Child node 2"} ] }] thanks.

[abiusx]

Hello, The new version will include a tree-structured array. At the moment, you can use descendants and pass it through a filter to make it recursive.

On Jul 21, 2015, at 3:59 AM, hepanming007 notifications@github.com wrote:

hi,how to get my all roles or permissions with jstree. https://github.com/vakata/jstree https://github.com/vakata/jstree jstree needs a json data like : [{ "id":1,"text":"Root node","children":[ {"id":2,"text":"Child node 1","children":true}, {"id":3,"text":"Child node 2"} ] }] thanks.

— Reply to this email directly or view it on GitHub https://github.com/OWASP/rbac/issues/71.

[hepanming007]

thanks

[bleuscyther]

+1 @hepanming007 for pointing me to JsTree

Code Example

Using JsTree version 3.2.1 I found it more easy to do it with the Alternative JSON format. It uses the parent uniq key to generate the tree.

Javascript Node (Docs)

// Alternative format of the node (id & parent are required)
{
  id          : "string" // required
  parent      : "string" // required
  text        : "string" // node text
  icon        : "string" // string for custom
  state       : {
    opened    : boolean  // is the node open
    disabled  : boolean  // is the node disabled
    selected  : boolean  // is the node selected
  },
  li_attr     : {}  // attributes for the generated LI node
  a_attr      : {}  // attributes for the generated A node
}

PHP

header('Content-Type: application/json; charset=utf-8');

$roles = \phpSec\SQL("SELECT ID AS id , Title AS text, Description AS description  FROM `phprbac_roles`",array());

                        foreach($roles as &$role){
                            $parent =  $rbac->Roles->parentNode($role['id']);
                            $role['parent'] = $parent['ID'];
                            $role['depth'] = $rbac->Roles->depth($role['id']);
                            if($role['id'] == 1){
                                $role['text'] = 'System';
                                $role['description'] = 'Account with limited capabilities managing the system';
                                $role['parent'] = '#';
                            }
                        }

 print(json_encode($roles));

Pushing this further:

Trying to find out the best way to modify the context menu items plugin so it can handle :

• description (add, edit)
• remove and recursive remove

Adding description to tree nodes

To display the description i used Twitter Bootstrap Tooltip plugin. If you use similar solution you have to know that you can add attributes on the fly to the <a/> link using the node a_att attribute, example using an angularJs resource (with angular-ui bootstrap )

 var roles = Roles.query(function () {
                        for (var i = 0; i < roles.length; i++) {
                            roles [i].state = {};
                            roles[i].a_attr = {
                                // Angular-ui bootstrap                               
                                tooltip: roles[i].description,
                                // Regular Twitter Bootstrap
                                 title : roles[i].description
                            };
                           ....
                           roles [i].state.opened = true;
                      }
                      $scope.rolesList = roles;
});

Note that if parent is closed child nodes are not created so you will need to initialise the plugin when parent is opened :

// in angularJS `angular.element` warps jquery's `$`
angular.element('#myTree').jstree({
                            ...
                        }).bind("changed.jstree", function (e, data1) {
                            console.log(data1.changed.selected); // newly selected
                            console.log(data1.changed.deselected); // newly deselected
                        }).bind('ready.jstree', function () {
                                //update when tree is ready 
                                // [AngularJS] 
                                $compile(angular.element('#myTree').find('a'))($scope);
                               // [no-AngularJS]                  
                                 $(function () {
                                        $('#myTree')..find('a').tooltip()
                                      })
                        }).bind('after_open.jstree', function () {
                            // Same as above
                        });
                        ...
});