I had an requirement like this Use of rowspan to group hierarchical data but expanding step by step onclick event using any javascript framework with ajax. So far have googled this http://www.igniteui.com/tree-grid/angular Any help with example or any approach.
Add a comment
|
1 Answer
Hoping it would help someone, here is the jsfiddle [http://jsfiddle.net/djlerman/bbj8k9pe/][1]
Adding code- if jsfiddle is dead. Also note, echo ajax not working in stackoverflow run snippet. Paste this code in jsfiddle.
/* This is an echo of some data sent back via ajax */
/* This data should be filtered by nodeID and return only childNodeID's. */
/* vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv. */
var jsonData = {
"nodeID": {
"1": [
{"ID": "1.1",
"childNodeType": "branch",
"childData": [
"1.1: column 1",
"1.1: column 2"
]
},
{"ID": "1.2",
"childNodeType": "leaf",
"childData": [
"1.2: column 1",
"1.2: column 2"
]
},
{"ID":"1.3",
"childNodeType": "leaf",
"childData": [
"1.3: column 1",
"1.3: column 2"
]
}
],
"1.1": [
{"ID":"1.1.1",
"childNodeType": "leaf",
"childData": [
"1.1.1: column 1",
"1.1.1: column 2"
]
},
{"ID":"1.1.2",
"childNodeType": "leaf",
"childData": [
"1.1.2: column 1",
"1.1.2: column 2"
]
}
],
"2": [
{"ID":"2.1",
"childNodeType": "leaf",
"childData": [
"2.1: column 1",
"2.1: column 2"
]
},
{"ID":"2.2",
"childNodeType": "leaf",
"childData": [
"2.2: column 1",
"2.2: column 2"
]
},
{"ID":"2.3",
"childNodeType": "leaf",
"childData": [
"2.3: column 1",
"2.3: column 2"
]
}
],
"3": [
{"ID":"3.1",
"childNodeType": "leaf",
"childData": [
"3.1: column 1",
"3.1: column 2"
]
},
{"ID":"3.2",
"childNodeType": "leaf",
"childData": [
"3.2: column 1",
"3.2: column 2"
]
},
{"ID":"3.3",
"childNodeType": "leaf",
"childData": [
"3.3: column 1",
"3.3: column 2"
]
}
]
}
};
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
/* This is an echo of some data sent back via ajax */
/* This data should be filtered by nodeID and return only childNodeID's. */
// initialize treeTable
$("#example-basic").treetable({
expandable: true,
onNodeExpand: nodeExpand,
onNodeCollapse: nodeCollapse
});
// expand node with ID "1" by default
$("#example-basic").treetable("reveal", '1');
// Highlight a row when selected
$("#example-basic tbody").on("mousedown", "tr", function() {
$(".selected").not(this).removeClass("selected");
$(this).toggleClass("selected");
});
function nodeExpand () {
// alert("Expanded: " + this.id);
getNodeViaAjax(this.id);
}
function nodeCollapse () {
// alert("Collapsed: " + this.id);
}
function getNodeViaAjax(parentNodeID) {
$("#loadingImage").show();
// ajax should be modified to only get childNode data from selected nodeID
// was created this way to work in jsFiddle
$.ajax({
type: 'POST',
url: '/echo/json/',
data: {
json: JSON.stringify( jsonData )
},
success: function(data) {
$("#loadingImage").hide();
var childNodes = data.nodeID[parentNodeID];
if(childNodes) {
var parentNode = $("#example-basic").treetable("node", parentNodeID);
for (var i = 0; i < childNodes.length; i++) {
var node = childNodes[i];
var nodeToAdd = $("#example-basic").treetable("node",node['ID']);
// check if node already exists. If not add row to parent node
if(!nodeToAdd) {
// create row to add
var row ='<tr data-tt-id="' +
node['ID'] +
'" data-tt-parent-id="' +
parentNodeID + '" ';
if(node['childNodeType'] == 'branch') {
row += ' data-tt-branch="true" ';
}
row += ' >';
// Add columns to row
for (var index in node['childData']) {
var data = node['childData'][index];
row += "<td>" + data + "</td>";
}
// End row
row +="</tr>";
$("#example-basic").treetable("loadBranch", parentNode, row);
}
}
}
},
error:function(error){
$("#loadingImage").hide();
alert('there was an error');
},
dataType: 'json'
});
}#loadingImage {
position:absolute;
width:48px; /*image width */
height:48px; /*image height */
left:50%;
top:75px;
margin-left:-24px; /*image width/2 */
margin-top:-24px; /*image height/2 */
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="http://ludo.cubicphuse.nl/jquery-treetable/css/jquery.treetable.theme.default.css" rel="stylesheet"/>
<link href="http://ludo.cubicphuse.nl/jquery-treetable/css/jquery.treetable.css" rel="stylesheet"/>
<script src="http://ludo.cubicphuse.nl/jquery-treetable/jquery.treetable.js"></script>
<div id="loadingImage" style="display: none">
<img src="//i.sstatic.net/FhHRx.gif" />
</div>
<table id="example-basic" >
<caption>
<a href="#" onclick="jQuery('#example-basic').treetable('expandAll'); return false;">Expand all</a>
<a href="#" onclick="jQuery('#example-basic').treetable('collapseAll'); return false;">Collapse all</a>
</caption>
<thead>
<tr>
<th>Tree column</th>
<th>Additional data</th>
</tr>
</thead>
<tbody>
<tr data-tt-id="1" data-tt-branch='true'>
<td>1: column 1</td>
<td>1: column 2</td>
</tr>
<tr data-tt-id="2" data-tt-branch='true'>
<td>2: column 1</td>
<td>2: column 2</td>
</tr>
<tr data-tt-id="3" data-tt-branch='true'>
<td>3: column 1</td>
<td>3: column 2</td>
</tr>
</tbody>
</table>