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 getCheckedRows() method is used to return a flat array of all the checked rows of the specified jqxTreeGrid.
There are some reserved row members:
- checked: This is the boolean value. Here, the checked state of the row is returned.
- expanded: This is the boolean value. Here, the expanded state of the row is returned.
- icon: This is the string value. Here, the icon URL of the row is returned.
- leaf: This is the boolean value. Here, the existence of row’s leaf in the hierarchy is returned.
- level: This is the integer value. Here, the hierarchy level of the row is returned.
- parent: This is the object. It returns null for root rows else returns the object of the parent row.
- records: This is an array. Here, the sub-rows collection of the row is returned.
- selected: This is the boolean value. Here, the selected state of the row is returned.
- uid: This can be the number or string value. Here, the unique ID or key of the row is returned.
Syntax:
$('Selector').jqxTreeGrid('getCheckedRows');Parameters: This method does not accept any parameters.
Return Values: This method returns a flat array of all the checked 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 getCheckedRows() method. In the below example, the checked first and third 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 getCheckedRows() Method</h3>
<div id="jqxTreeGrid" style="margin: 25px"></div>
<input
type="button"
style="margin: 20px"
id="button_for_getCheckedRows"
value="Get the checked 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,
checkboxes: 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_getCheckedRows").jqxButton({
width: 300,
height: 35,
});
$("#jqxTreeGrid").jqxTreeGrid("checkRow", 1);
$("#jqxTreeGrid").jqxTreeGrid("checkRow", 3);
$("#button_for_getCheckedRows").click(function () {
var checked_Rows = $("#jqxTreeGrid")
.jqxTreeGrid("getCheckedRows");
var checked_Rows_Data = "";
var a = 0;
while (a < checked_Rows.length) {
checked_Rows_Data +=
checked_Rows[a].Employee_Name +
" " +
checked_Rows[a].Company +
" " +
checked_Rows[a].Designation +
" & ";
a++;
}
$("#log").html(JSON.stringify(checked_Rows_Data));
});
});
</script>
</center>
</body>
</html>
|
Output: