jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxTreeGrid is used for representing data in a tree-like structure. This widget is useful for displaying multi-column of hierarchical data, data paging, sorting and filtering, data editing, column resizing, fixed columns, conditional formatting, aggregates, and rows selection. These widgets also read and display the data from any type of data sources such as XML, JSON, Array, CSV, or TSV.
The getView() method is used to return an array of all the rows of the specified jqxTreeGrid. This method also considers the applied Filtering and Sorting.
There are some reserved row members:
- checked: It is a boolean value that returns the checked state of the row.
- expanded: It is the boolean value that returns the expanded state of the row.
- icon: It is a string value that returns the icon URL of the row.
- leaf: It is a boolean value that returns the existence of row’s leaf in the hierarchy.
- level: It is the integer value that returns the hierarchy level of the row.
- parent: It is the object that returns null for root rows else returns the object of the parent row.
- records: It is an array that returns the sub-rows collection of the row.
- selected: It is the boolean value that returns the selected state of the row.
- uid: It is the number or string value that returns the unique ID or key of the row.
Syntax:
$("Selector").jqxTreeGrid('getView');Parameters: This method does not accept any parameters.
Return Values: This method returns an array of all the rows.
Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.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/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdatatable.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtreegrid.js”></script>
Example: The below example illustrates the jQWidgets jqxTreeGrid getView() method. In the below example, the data of the first column of all the rows are returned.
<!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.js">
</script>
<script type="text/javascript" src="jqwidgets/jqxcore.js">
</script>
<script type="text/javascript" src="jqwidgets/jqxdata.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/jqxlistbox.js">
</script>
<script type="text/javascript" src="jqwidgets/jqxdropdownlist.js">
</script>
<script type="text/javascript" src="jqwidgets/jqxdatatable.js">
</script>
<script type="text/javascript" src="jqwidgets/jqxtreegrid.js">
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
jQWidgets jqxTreeGrid getView() Method
</h3>
<div id="jqxTreeGrid" style="margin: 25px;">
</div>
<input type="button" style="margin: 20px;" id="button_for_getView" value="Get the data of first column
of all the rows"/>
<div id="log"></div>
<script type="text/javascript">
$(document).ready(function () {
var A = [{
"ID": 1,
"Employee_Name": "Amit",
"Company": "GeeksforGeeks",
"Designation": "Content Writer",
"expanded": true,
A1: [{
"ID": 2,
"Employee_Name": "Sumit",
"Company": "Amazon",
"Designation": "Software Engineer",
}, {
"ID": 3,
"Employee_Name": "Vivek",
"Company": "Apple",
"Designation": "Product Manager",
"expanded": true,
A1: [{
"ID": 4,
"Employee_Name": "Soni",
"Company": "Flipkart",
"Designation": "HR",
}]
}]
}];
var Data_Source = {
dataFields: [{
name: 'ID'
}, {
name: 'Employee_Name'
}, {
name: 'Company'
}, {
name: 'Designation'
}, {
name: 'A1',
type: 'array'
}, {
name: 'expanded'
}],
hierarchy: {
root: 'A1'
},
id: 'ID',
localData: A
};
var Data = new
$.jqx.dataAdapter(Data_Source);
$("#jqxTreeGrid").jqxTreeGrid({
source: Data,
editable: true,
ready: function () {
$("#jqxTreeGrid").jqxTreeGrid(
'expandRow', '1');
$("#jqxTreeGrid").jqxTreeGrid(
'expandRow', '3');
},
columns: [{
text: 'Employee_Name',
align: 'center',
dataField: 'Employee_Name',
width: 140
}, {
text: 'Company',
align: 'center',
dataField: 'Company',
width: 150
}, {
text: 'Designation',
align: 'center',
dataField: 'Designation',
width: 150
}]
});
$("#button_for_getView").jqxButton({
width: 300,
height: 35
});
$('#button_for_getView').click(
function () {
var View = $("#jqxTreeGrid").
jqxTreeGrid('getView');
var View_String = "";
var Display_View = function (records) {
var a = 0;
while (a < records.length) {
View_String += records[a].
Employee_Name + " ";
if (records[a].records) {
Display_View(
records[a].records);
}
a++;
}
};
Display_View(View);
$("#log").html(JSON.stringify(
View_String))
});
});
</script>
</center>
</body>
</html>
|
Output: