jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
63 lines (62 loc) • 2.85 kB
HTML
<html lang="en">
<head>
<title id='Description'>This sample demonstrates how to load Tree Items via Ajax
</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/jqxexpander.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// Create jqxTree
var tree = $('#jqxTree');
var source = null;
$.ajax({
async: false,
url: "ajaxroot.htm",
success: function (data, status, xhr) {
source = jQuery.parseJSON(data);
}
});
tree.jqxTree({ source: source, height: 300, width: 200 });
tree.on('expand', function (event) {
var label = tree.jqxTree('getItem', event.args.element).label;
var $element = $(event.args.element);
var loader = false;
var loaderItem = null;
var children = $element.find('ul:first').children();
$.each(children, function () {
var item = tree.jqxTree('getItem', this);
if (item && item.label == 'Loading...') {
loaderItem = item;
loader = true;
return false
};
});
if (loader) {
$.ajax({
url: loaderItem.value,
success: function (data, status, xhr) {
var items = jQuery.parseJSON(data);
tree.jqxTree('addTo', items, $element[0]);
tree.jqxTree('removeItem', loaderItem.element);
}
});
}
});
});
</script>
</head>
<body class='default'>
<div id="jqxTree">
</div>
</body>
</html>