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?
Try this,
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();
});
});
////////////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);
