JQuery TreeGrid
Set the altRows property of the jqxTreeGrid. Author: http://jqwidgets.com
by Arvind Pal
HTML
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href=" http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id="treeGrid"></div>
JavaScript
var employees = [{
"EmployeeID": 2,
"FirstName": "category1",
"users": 6,
children: [{
"EmployeeID": 8,
"FirstName": "organization1",
"users":4,
children:[{
"EmployeeID": 81,
"FirstName": "organization unit 1",
"users": 2,
children:[{
"EmployeeID": 81,
"FirstName": "user1",
},{
"EmployeeID": 81,
"FirstName": "user2"
}]
},{
"EmployeeID": 81,
"FirstName": "organization unit 2",
"users": 2,
children:[{
"EmployeeID": 81,
"FirstName": "user1",
},{
"EmployeeID": 81,
"FirstName": "user2"
}]
}]
}, {
"EmployeeID": 1,
"FirstName": "organization2",
"users":2,
children:[{
"EmployeeID": 81,
"FirstName": "organization unit 1",
"users":2,
children:[{
"EmployeeID": 81,
"FirstName": "child child1",
},{
"EmployeeID": 81,
"FirstName": "child child2"
}]
}]
}]
}];
//// prepare the data
var source = {
dataType: "json",
dataFields: [{
name: 'EmployeeID',
type: 'number'
}, {
name: 'FirstName',
type: 'string'
}, {
name: 'users',
type: 'string'
}, {
name: 'Country',
type: 'string'
}, {
name: 'City',
type: 'string'
}, {
name: 'Address',
type: 'string'
}, {
name: 'Title',
type: 'string'
}, {
name: 'HireDate',
type: 'date'
}, {
name: 'children',
type: 'array'
}, {
name:...