jQuery org chart how to sort the items?

Question

I'am using this plugin: http://th3silverlining.com/2011/12/01/jquery-org-chart-a-plugin-for-visualising-data-in-a-tree-like-structure/

the question is how can I sort the <ul> items in the way I need it? are there some options or maybe some solutions out of the box?

Answer 1

Try this,

Demo

HTML

<div class="topbar">
        <div class="topbar-inner">
            <div class="container">
                <a class="brand" href="#">jQuery Organisation Chart</a>
                <ul class="nav">
                    <li><a href="http://github.com/wesnolte">Github</a></li>
                    <li><a href="http://twitter.com/wesnolte">Twitter</a></li>                  
                    <li><a href="http://th3silverlining.com">Blog</a></li>      
                </ul>
                <div class="pull-right">
                    <div class="alert-message info" id="show-list">Show underlying list.</div>

<pre class="prettyprint lang-html" id="list-html" style="display:none"></pre>       
                </div>              
            </div>
        </div>
    </div>

    <ul id="org" style="display:none">
    <li>
       Food
       <ul>
         <li id="beer">Beer</li>
         <li>Vegetables
           <a href="http://wesnolte.com" target="_blank">Click me</a>
           <ul>
             <li>Pumpkin</li>
             <li>
                <a href="http://tquila.com" target="_blank">Aubergine</a>
                <p>A link and paragraph is all we need.</p>
             </li>
           </ul>
         </li>
         <li class="fruit">Fruit
           <ul>
             <li>Apple
               <ul>
                 <li>Granny Smith</li>
               </ul>
             </li>
             <li>Berries
               <ul>
                 <li>Blueberry</li>
                 <li><img src="images/raspberry.jpg" alt="Raspberry"/></li>
                 <li>Cucumber</li>
               </ul>
             </li>
           </ul>
         </li>
         <li>Bread</li>
         <li class="collapsed">Chocolate
           <ul>
             <li>Topdeck</li>
             <li>Reese's Cups</li>
           </ul>
         </li>
       </ul>
     </li>
   </ul>            

    <div id="chart" class="orgChart"></div>

Jquery:

jQuery(document).ready(function() {
        $("#org").jOrgChart({
            chartElement : '#chart',
            dragAndDrop  : true
        });

     $("#show-list").click(function(e){
                e.preventDefault();

                $('#list-html').toggle('fast', function(){
                    if($(this).is(':visible')){
                        $('#show-list').text('Hide underlying list.');
                        $(".topbar").fadeTo('fast',0.9);
                    }else{
                        $('#show-list').text('Show underlying list.');
                        $(".topbar").fadeTo('fast',1);                  
                    }
                });
            });

            $('#list-html').text($('#org').html());

            $("#org").bind("DOMSubtreeModified", function() {
                $('#list-html').text('');

                $('#list-html').text($('#org').html());

                prettyPrint();                
            });
    });

Answer 2

  ////////////You can use this plugin also for json data
   ////////////Example
                          $(document).ready(function () {
                var ds = [{ id: "2", parentid: "1", text: "India", children: [{ id: "5", parentid: "2", text: "MP", children: [{ id: "7", parentid: "5", text: "Indore", children: [{ id: "8", parentid: "7", text: "Tillore", children: [] }] }] }, { id: "6", parentid: "2", text: "UP", children: [] }] }, { id: "3", parentid: "1", text: "Rusia", children: [] }, { id: "4", parentid: "1", text: "China", children: [] }];
                $("#mystring").CustomOrgChart({ dataSource: ds, hasTemplate: true, template: "<div style='color:red;' data-cardid='{0}'><span class='cardadd'>Add</span> <span class='cardedit'>edit</span> <span class='cardremove'>delete</span>{1}</div>",templatefields: ["id","text"] });
                $("#custome").jOrgChart({
                    chartElement: '#string',
                    dragAndDrop: true
                });
            });
       ////////////Plugin
            (function ($) {
                jQuery.fn.CustomOrgChart = function (options) {
                    var defaults = {
                        dataSource: [],
                        dispalyText: "text",
                        children: "children",
                        hasTemplate: false,
                        template: "{0}",
                        templatefields: ["text"]
                    };
                    var settings = $.extend(true, {}, defaults, options);

                    if (settings.dataSource) {
                        var string = "<ul id='custome' style='display:none'>" + GetNodes(settings.dataSource) + "</ul>";
                        console.log(string);
                        (this).append(string);
                        return this;
                    }

                    function GetNodes(dataSource) {
                        var Node = "";
                        var dataSource = dataSource.slice(0);
                        var dataSourceArray = $.isArray(dataSource[0]) ? dataSource : [dataSource];
                        for (var i = 0; i < dataSourceArray.length; i++) {
                            for (var j = 0; j < dataSourceArray[i].length; j++) {
                                var text = dataSourceArray[i][j][settings.dispalyText];
                                var children = dataSourceArray[i][j][settings.children];
                                Node += "<li>";

                                var template = settings.template;
                                var templatefields = settings.templatefields;
                                if (settings.hasTemplate) {
                                    for (var k = 0; k < templatefields.length; k++) {
                                        template = template.replace("{" + k + "}", dataSourceArray[i][j][templatefields[k]]);
                                    }

                                    Node += template;
                                }
                                else {
                                    for (var k = 0; k < templatefields.length; k++) {
                                        template = template.replace("{" + k + "}", dataSourceArray[i][j][templatefields[k]]);
                                    }
                                    Node += template;
                                }
                                if (children.length > 0) {
                                    Node += "<ul>" + GetNodes(children) + "</ul>";
                                }
                                Node += "</li>";
                            }
                        }
                        return Node;
                    }
                };
            })(jQuery);