留言板

Expand Collapsable data

Tanya Sinha,修改在7 年前。

Expand Collapsable data

New Member 帖子: 2 加入日期: 15-3-9 最近的帖子
Hi All,

I am currently using liferay-ui:search-container to display a datagrid. Now our current data would also contain some child data. We want the child data displayed as a collapsable below the parent. Please let me know if liferay-ui:search-container has such functionality. Or if there is some other way to perfrom the same


example



----parent> id col1 col2 col3 parent_id
1 a b c null
---child 2 x y z 1 (visible only when user clicks on parent)


please help.
thumbnail
Neha Goyal,修改在7 年前。

RE: Expand Collapsable data

Regular Member 帖子: 121 加入日期: 13-5-14 最近的帖子
You try jsTree plugin.

May be blow code snippet will help you.
Note: You need to download jquery,jstree.min.js and style.min.css file.

Link: http://jsfiddle.net/3q9Ma/1/ and http://jsfiddle.net/gdonarum/2Jg3B/ may help you.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsTree </title>
<!-- 2 load the theme CSS file -->
<link rel="stylesheet" href="dist/themes/default/style.min.css" />
</head>
<body>
<!-- 3 setup a container element -->
<div id="jstree">
<!-- in this example the tree is populated from inline HTML -->
<ul>
<li>Root node 1
<ul>
<li id="child_node_1">Child node 1</li>
<li>Child node 2</li>
</ul>
</li>
<li>Root node 2</li>
</ul>
</div>
<button>demo button</button>

<!-- 4 include the jQuery library -->
<script src="path/jquery.js"></script>
<!-- 5 include the minified jstree source -->
<script src="path/jstree.min.js"></script>
<script>
$(function () {
// 6 create an instance when the DOM is ready
$('#jstree').jstree();
// 7 bind to events triggered on the tree
$('#jstree').on("changed.jstree", function (e, data) {
console.log(data.selected);
});
// 8 interact with the tree - either way is OK
$('button').on('click', function () {
$('#jstree').jstree(true).select_node('child_node_1');
$('#jstree').jstree('select_node', 'child_node_1');
$.jstree.reference('#jstree').select_node('child_node_1');
});
});
</script>
</body>
</html>
Tanya Sinha,修改在7 年前。

RE: Expand Collapsable data

New Member 帖子: 2 加入日期: 15-3-9 最近的帖子
Thanks but need table structure
thumbnail
Neha Goyal,修改在7 年前。

RE: Expand Collapsable data

Regular Member 帖子: 121 加入日期: 13-5-14 最近的帖子
Try below code:

and take reference from http://culmat.github.io/jsTreeTable/

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>renderTree</title>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script src="../treeTable.js"></script>
<style type="text/css">
td {
border: 1px solid #999;
padding-left: 8px;
padding-right: 8px;
}
</style>


</head>
<body>
<button onClick='window.location="view-source:" + window.location.href'>View
Source</button>
<button onClick='window.history.back()'>Back</button>
<br />

<table id="table">
<tr>
<th>name</th>
<th>area (km²)</th>
</tr>
<tr data-tt-id="america">
<td>America</td>
<td></td>
</tr>
<tr data-tt-id="NA" data-tt-parent-id="america">
<td>North America</td>
<td></td>
</tr>
<tr data-tt-id="SA" data-tt-parent-id="america">
<td>South America</td>
<td></td>
</tr>
<tr data-tt-id="arg" data-tt-parent-id="SA">
<td>Argentina</td>
<td>2766890</td>
</tr>
<tr data-tt-id="bol" data-tt-parent-id="SA">
<td>Bolivia</td>
<td>1098580</td>
</tr>
<tr data-tt-id="bra" data-tt-parent-id="SA">
<td>Brazil</td>
<td>8511965</td>
</tr>
<tr data-tt-id="para" data-tt-parent-id="bra">
<td>Para</td>
<td>1247689</td>
</tr>
</table>

<script type="text/javascript">
com_github_culmat_jsTreeTable.register(this)

treeTable($('#table'))
</script>


</body>
</html>