このような要件がありましたが、これはUse of rowspan to group hierarchical dataのような要件がありましたが、ajaxを使用して任意のjavascriptフレームワークを使用してステップonclickイベントを段階的に展開しています。これまでにこれまでgoogledこれは http://www.igniteui.com/tree-grid/angular 例または任意のアプローチのヘルプ。angularjsデータグリッドまたはツリーグリッドを展開して階層データを表示する
ここjsfiddleが死んでいる場合はコード - を追加するjsfiddleは[http://jsfiddle.net/djlerman/bbj8k9pe/][1]
で、それが誰かを助けることを望ん。また、注意してください、エコーajaxはstackoverflowで動作していないスニペットを実行します。このコードを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);
\t 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({
\t \t 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.stack.imgur.com/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>