jQuery UI Widgets › Forums › Navigation › Tree › how to get only child items on getCheckedItems
This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 10 years, 7 months ago.
-
Author
-
Hi,
I am using jqxtree with hasThreeStates property. i could able to select all the childs or parents i need, but in an event i need only the child values of all selected parents (or sub-parents). suppose, the first parent node has two child nodes and each child node contains two other childs, on selecting this parent node, i should get all the four last child nodes.
->ONE
->one
->1
->2
->two
->3
->4
->TWO
->two
->threeso, on selecting ONE, i need values to be returnes as 1,2,3,4. pls let me know any way to do this.
Thanks & Regards
_ _Nagoor
Hello Nagoor,
Here is an example:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#jqxTree').jqxTree({ height: '300px', width: '300px', checkboxes: true, hasThreeStates: true }); $("#getItems").click(function () { var items = $('#jqxTree').jqxTree('getCheckedItems'); var secondLevelItems = new Array(); for (var i = 0; i < items.length; i++) { if (items[i].level == 2) { secondLevelItems.push(items[i].label); } } alert(secondLevelItems); }); }); </script> </head> <body class='default'> <button id="getItems"> Get items</button> <div id='jqxTree'> <ul> <li item-expanded='true' item-checked='true'>ONE <ul> <li item-expanded='true'>One <ul> <li>1</li> <li>2</li> </ul> </li> <li item-expanded='true'>Two <ul> <li>3</li> <li>4</li> </ul> </li> </ul> </li> <li>TWO <ul> <li>Two</li> <li>Three</li> </ul> </li> </ul> </div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/HI Dimitar,
Thank you very much for reply.the above example is pretty helpful for me. In my application it is not necessarily 2 levels. each parent may have more than 2 or 3 levels. for instance, the first parent may have 2 levels of child nodes and the second may have only one child and it goes on. is there any way to find the last level for each parent so that i can implement the above example for each parent level.
Pls help meThanks & Regards
Nagoor
Hi Nagoor,
In that case, modify the code as follows:
$("#getItems").click(function () { var items = $('#jqxTree').jqxTree('getCheckedItems'); var leafItems = new Array(); for (var i = 0; i < items.length; i++) { if (items[i].hasItems == false) { leafItems.push(items[i].label); } } alert(leafItems); });
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.