jQuery組織結構圖如何對項目進行排序？使用

Question

我'這個插件：http://th3silverlining.com/2011/12/01/jquery-org-chart-a-plugin-for-visualising-data-in-a-tree-like-structure/

的問題是如何能在我，我需要它的方式<ul>項目進行排序？有沒有一些選擇，或者可能是一些開箱即用的解決方案？

Answer 1

試試這個，

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);