Edit user assigned group list sample

    jQuery code snippet:

    // create cms_dual_tree var uid = 'hesm'; // sample user id of Smith Helmut var sample_dual_tree = $("#sample-dual-tree").cms_dual_tree({ api: ['http://' + + '/cms/files/guide/jquery/api/grp/usr/' + uid,'http://' + + '/cms/files/guide/jquery/api/grp/all'] }); // click button "Cancel" $("#sample-grp-cancel").click(function(){ alert("Cancel"); }); // click button "Save" $("#sample-grp-save").click(function(){ var data="[]"; // group code array var rootNode = $('.cms-selectbox-tree-1', sample_dual_tree).fancytree("getTree").getRootNode(); // get tree root node var els = rootNode.getChildren()[0].getChildren(); // get assigned groups tree nodes if (els!=null){ // in not empty list var grp = new Array(); for (var i=1; i<=els.length; i++) grp.push(els[i-1].key); // push to group code array data = JSON.stringify(grp); // convert group code array into JSON } alert("Save JSON data: " + data); // show result }); // create jQuery UI Tabs $("#sample-tabs").tabs({ collapsible: false, active: 0 });

    HTML code snippet:

    <fieldset class="cms-form-fieldset"> <legend class="cms-form-legend">Edit user assigned group list sample</legend> <table class="cms-selectbox" id="sample-dual-tree"> <tr> <td><div class="cms-selectbox-tree-1" style="width: 300px; height: 350px"></div></td> <td style="width:100px" align="center"> <table> <tr><td><div class="cms-selectbox-button-add"><a href="" title='Add selected groups. Same can be done with drag and drop'></a></div></td></tr> <tr><td><div class="cms-selectbox-button-rem"><a href="" title='Remove selected groups. Same can be done with drag and drop'></a></div></td></tr> <tr><td><div class="cms-selectbox-button-add-all"><a href="" title='Add all groups. Same can be done with drag and drop'></a></div></td></tr> <tr><td><div class="cms-selectbox-button-rem-all"><a href="" title='Remove all groups. Same can be done with drag and drop'></a></div></td></tr> </table> </td> <td><div class="cms-selectbox-tree-2" style="width: 300px; height: 350px"></div></td> </tr> <tr><td colspan="3"><img src="/skin/images/dot.gif" height="14px"></td></tr> <tr> <td colspan="3"> <input type="submit" class="cms-form-submit" id="sample-grp-save" value="Save" title='Sample save'> <input type="submit" class="cms-form-submit" id="sample-grp-cancel" value="Cancel" title='Sample cancel'> </td> </tr> </table> <br> </fieldset>

    API URL: "/cms/files/guide/jquery/api/grp/usr/hesm" returns JSON data:

    [{"key":"###TARGET###","title":"Assigned Groups","isFolder":true,"children":[{"key":"sample","title":"Sample role","icon":"user-group-icon.png"}]}]

    API URL: "/cms/files/guide/jquery/api/grp/all" returns JSON data:

    [{"key":"###SOURCE###","title":"All Groups","isFolder":true,"children":[{"key":"admin","title":"Administrator","icon":"user-group-icon.png"},{"key":"demo","title":"Demo","icon":"user-group-icon.png"},{"key":"sample","title":"Sample role","icon":"user-group-icon.png"}]}]

    API URL page XML definitions in pages.xml file:

    <doc><url>/grp/usr/:uid</url><method>GET</method><fnc>sample_class::usrGrp</fnc></doc> <doc><url>/grp/all</url><method>GET</method><fnc>sample_class::grpAll</fnc></doc>

    Full subsite (based on KUSoftas CMS) configuration and PHP code of sample RESTful API can be found in folder: /cms/files/guide/jquery/api (see using CMS tool "Files":


    Option Method Callback
    .cms_dual_tree( [settings] )

    Description: Plugin will create 2 trees: left side - target tree (dynatree object with 'cms-selectbox-tree-1' class); right side - source tree (dynatree object with 'cms-selectbox-tree-2' class). You can add/remove target tree items using source tree items. Items can be added/removed using:

    • Drag & drop
    • Buttons
    • Dblclick

    Data can be loaded at the plugin intialization using API URL for left and right tree.
    Data can be read using dynatree() object on left and right tree.

    .cms_dual_tree( [settings] )
      • settings
      • Type: PlainObject
      • A set of key/value pairs that configure cms_dual_tree() plugin. All settings are optional.
          • images (default: '/cms/srv/admin/skin/images/')
          • Type: String
          • Folder path where is located dynatree node icon
          • icon (default: 'user-group-icon.png')
          • Type: String
          • Default dynatree node icon file name
          • title (default: 'Assigned Groups')
          • Type: String
          • Default left tree title (suitable when left tree represents new object)
          • cms_path (default: '/cms/srv')
          • Type: String
          • Relative path to CMS software
          • api (default: [])
          • Type: Array
          • Left and right tree data loading API URL

    In general for styling you can use jQuery UI Theming

    More detailed information about dynatree() styling you can find at site

    cms_dual_tree plugin has its own additional elements for styling and control:

    • class 'cms-selectbox-tree-1' - left side tree dynatree object
    • class 'cms-selectbox-tree-2' - right side tree dynatree object
    • class 'cms-selectbox-button-rem' - remove selected item/items from left tree button class
    • class 'cms-selectbox-button-add' - add selected item/items to left tree button class
    • class 'cms-selectbox-button-rem-all' - remove all items from left tree button class
    • class 'cms-selectbox-button-add-all' - add all items to left tree button class

    Plugin cms_dual_tree depends on following jQuery packages:

    Vulnerability Scanner