jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
294 lines (273 loc) • 13.9 kB
HTML
<html lang="en">
<head>
<meta name="keywords" content="jQuery Tree, Tree Widget, TreeView" />
<meta name="description" content="The jqxTree displays a hierarchical collection of items. You
can populate it from 'UL' or by using its 'source' property." />
<title id='Description'>The jqxTree displays a hierarchical collection of items. You
can populate it from 'UL' or by using its 'source' property.</title>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../scripts/demos.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 () {
// Create jqxTree
$('#jqxTree').jqxTree({ height: '450px', width: '300px'});
// Create and initialize Buttons
$('#Add').jqxButton({ height: '25px', width: '100px'});
$('#AddBefore').jqxButton({ height: '25px', width: '100px'});
$('#AddAfter').jqxButton({ height: '25px', width: '100px'});
$('#Update').jqxButton({ height: '25px', width: '100px'});
$('#Remove').jqxButton({ height: '25px', width: '100px'});
$('#Disable').jqxButton({ height: '25px', width: '100px'});
$('#EnableAll').jqxButton({ height: '25px', width: '100px'});
$('#Expand').jqxButton({ height: '25px', width: '100px'});
$('#Collapse').jqxButton({ height: '25px', width: '100px'});
$('#ExpandAll').jqxButton({ height: '25px', width: '100px'});
$('#CollapseAll').jqxButton({ height: '25px', width: '100px'});
$('#Next').jqxButton({ height: '25px', width: '100px'});
$('#Previous').jqxButton({ height: '25px', width: '100px'});
// Add
$('#Add').click(function () {
var selectedItem = $('#jqxTree').jqxTree('selectedItem');
if (selectedItem != null) {
// adds an item with label: 'item' as a child of the selected item. The last parameter determines whether to refresh the Tree or not.
// If you want to use the 'addTo' method in a loop, set the last parameter to false and call the 'render' method after the loop.
$('#jqxTree').jqxTree('addTo', { label: 'Item' }, selectedItem.element, false);
// update the tree.
$('#jqxTree').jqxTree('render');
}
else {
$('#jqxTree').jqxTree('addTo', { label: 'Item' }, null, false);
// update the tree.
$('#jqxTree').jqxTree('render');
}
});
// Add Before
$('#AddBefore').click(function () {
var selectedItem = $('#jqxTree').jqxTree('selectedItem');
if (selectedItem != null) {
$('#jqxTree').jqxTree('addBefore', { label: 'Item' }, selectedItem.element, false);
// update the tree.
$('#jqxTree').jqxTree('render');
}
});
// Update
$('#Update').click(function () {
var selectedItem = $('#jqxTree').jqxTree('selectedItem');
if (selectedItem != null) {
$('#jqxTree').jqxTree('updateItem', { label: 'Item' }, selectedItem.element);
// update the tree.
$('#jqxTree').jqxTree('render');
}
});
// Add After
$('#AddAfter').click(function () {
var selectedItem = $('#jqxTree').jqxTree('selectedItem');
if (selectedItem != null) {
$('#jqxTree').jqxTree('addAfter', { label: 'Item' }, selectedItem.element, false);
// update the tree.
$('#jqxTree').jqxTree('render');
}
});
// Remove
$('#Remove').click(function () {
var selectedItem = $('#jqxTree').jqxTree('selectedItem');
if (selectedItem != null) {
// removes the selected item. The last parameter determines whether to refresh the Tree or not.
// If you want to use the 'removeItem' method in a loop, set the last parameter to false and call the 'render' method after the loop.
$('#jqxTree').jqxTree('removeItem', selectedItem.element, false);
// update the tree.
$('#jqxTree').jqxTree('render');
}
});
// Disable
$('#Disable').click(function () {
var selectedItem = $('#jqxTree').jqxTree('selectedItem');
if (selectedItem != null) {
$('#jqxTree').jqxTree('disableItem', selectedItem.element);
}
});
// Expand
$('#Expand').click(function () {
var selectedItem = $('#jqxTree').jqxTree('selectedItem');
if (selectedItem != null) {
$('#jqxTree').jqxTree('expandItem', selectedItem.element);
}
});
// Expand
$('#Collapse').click(function () {
var selectedItem = $('#jqxTree').jqxTree('selectedItem');
if (selectedItem != null) {
$('#jqxTree').jqxTree('collapseItem', selectedItem.element);
}
});
// Expand All
$('#ExpandAll').click(function () {
$('#jqxTree').jqxTree('expandAll');
});
// Collapse All
$('#CollapseAll').click(function () {
$('#jqxTree').jqxTree('collapseAll');
});
// Enable All
$('#EnableAll').click(function () {
$('#jqxTree').jqxTree('enableAll');
});
// Select Next Item
$('#Next').click(function () {
var selectedItem = $("#jqxTree").jqxTree('selectedItem');
var nextItem = $("#jqxTree").jqxTree('getNextItem', selectedItem.element);
if (nextItem != null) {
$("#jqxTree").jqxTree('selectItem', nextItem.element);
$("#jqxTree").jqxTree('ensureVisible', nextItem.element);
}
});
// Select Previous Item
$('#Previous').click(function () {
var selectedItem = $("#jqxTree").jqxTree('selectedItem');
var prevItem = $("#jqxTree").jqxTree('getPrevItem', selectedItem.element);
if (prevItem != null) {
$("#jqxTree").jqxTree('selectItem', prevItem.element);
$("#jqxTree").jqxTree('ensureVisible', prevItem.element);
}
});
$('#jqxTree').jqxTree('selectItem', $("#jqxTree").find('li:first')[0]);
$('#jqxTree').css('visibility', 'visible');
});
</script>
</head>
<body class='default'>
<div id='jqxWidget'>
<div style='float: left;'>
<div id='jqxTree' style='visibility: hidden; float: left; margin-left: 20px;'>
<ul>
<li id='home'>Home</li>
<li item-expanded='true'>Solutions
<ul>
<li>Education</li>
<li>Financial services</li>
<li>Government</li>
<li>Manufacturing</li>
<li>Solutions
<ul>
<li>Consumer photo and video</li>
<li>Mobile</li>
<li>Rich Internet applications</li>
<li>Technical communication</li>
<li>Training and eLearning</li>
<li>Web conferencing</li>
</ul>
</li>
<li>All industries and solutions</li>
</ul>
</li>
<li>Products
<ul>
<li>PC products</li>
<li>Mobile products</li>
<li>All products</li>
</ul>
</li>
<li>Support
<ul>
<li>Support home</li>
<li>Customer Service</li>
<li>Knowledge base</li>
<li>Books</li>
<li>Training and certification</li>
<li>Support programs</li>
<li>Forums</li>
<li>Documentation</li>
<li>Updates</li>
</ul>
</li>
<li>Communities
<ul>
<li>Designers</li>
<li>Developers</li>
<li>Educators and students</li>
<li>Partners</li>
<li>By resource
<ul>
<li>Labs</li>
<li>TV</li>
<li>Forums</li>
<li>Exchange</li>
<li>Blogs</li>
<li>Experience Design</li>
</ul>
</li>
</ul>
</li>
<li>Company
<ul>
<li>About Us</li>
<li>Press</li>
<li>Investor Relations</li>
<li>Corporate Affairs</li>
<li>Careers</li>
<li>Showcase</li>
<li>Events</li>
<li>Contact Us</li>
<li>Become an affiliate</li>
</ul>
</li>
</ul>
</div>
<div style='margin-left: 60px; float: left;'>
<div style='margin-top: 10px;'>
<input type="button" id='Add' value="Add" />
</div>
<div style='margin-top: 10px;'>
<input type="button" id='AddAfter' value="Add After" />
</div>
<div style='margin-top: 10px;'>
<input type="button" id='AddBefore' value="Add Before" />
</div>
<div style='margin-top: 10px;'>
<input type="button" id='Update' value="Update" />
</div>
<div style='margin-top: 10px;'>
<input type="button" id='Remove' value="Remove" />
</div>
<div style='margin-top: 10px;'>
<input type="button" id='Disable' value="Disable" />
</div>
<div style='margin-top: 10px;'>
<input type="button" id='Expand' value="Expand" />
</div>
<div style='margin-top: 10px;'>
<input type="button" id='Collapse' value="Collapse" />
</div>
<div style='margin-top: 10px;'>
<input type="button" id='ExpandAll' value="Expand All" />
</div>
<div style='margin-top: 10px;'>
<input type="button" id='CollapseAll' value="Collapse All" />
</div>
<div style='margin-top: 10px;'>
<input type="button" id='EnableAll' value="Enable All" />
</div>
<div style='margin-top: 10px;'>
<input type="button" id='Next' value="Next Item" />
</div>
<div style='margin-top: 10px;'>
<input type="button" id='Previous' value="Previous Item" />
</div>
</div>
</div>
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>