I need a treeview checkbox using Jquery, please find my data in the image.
Treeview has hierarchical, need 5 levels.
My requirement is little difficult to understand. Layer1, layer2, layer3, layer4 and layer5 are roots, test set name is the lase level. all unique levels are roots if layer5 is empty then test set name should be layer4. same for all layers also.
MySQL query:
CREATE TABLE testlab_data ( testlab_ID int(11) NOT NULL, Project varchar(150) NOT NULL, StatusCount int(11) NOT NULL, RunStatus varchar(20) NOT NULL, TestSetName varchar(50) NOT NULL, Layer1 varchar(150) NOT NULL, Layer2 varchar(150) NOT NULL, Layer3 varchar(150) NOT NULL, Layer4 varchar(150) NOT NULL, Layer5 varchar(150) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO testlab_data (testlab_ID, Project, StatusCount, RunStatus, TestSetName, Layer1, Layer2, Layer3, Layer4, Layer5) VALUES (70001, 'xLos', 5, 'Blocked', 'Sprint 3_Regression', 'US FIN - myEngage Automation Phase 2', 'Release 1.5 - Mass Code', 'Regression Testing', 'Add New WBS - Regression Test Suite', 'Sprint 3_Regression'), (70002, 'xLos', 1, 'Blocked', 'US612 - WBS lines for Advisory', 'US FIN - myEngage Automation Phase 2', 'Release 2.0 - Create Contract', 'System Testing', 'US604 - WBS codes', 'US612 - WBS lines for Advisory'), (70003, 'xLos', 2, 'Blocked', 'US629 - WBS Line for Firmwide', 'US FIN - myEngage Automation Phase 2', 'Release 2.0 - Create Contract', 'System Testing', 'US604 - WBS codes', 'US629 - WBS Line for Firmwide'), (70004, 'xLos', 19, 'Blocked', 'US630-WBS lines for CR External', 'US FIN - myEngage Automation Phase 2', 'Release 2.0 - Create Contract', 'System Testing', 'US604 - WBS codes', 'US630 - WBS lines for CR External'), (70005, 'xLos', 1, 'Blocked', 'US631 - WBS Line for Internal', 'US FIN - myEngage Automation Phase 2', 'Release 2.0 - Create Contract', 'System Testing', 'US604 - WBS codes', 'US631 - WBS Line for Internal'), (70006, 'xLos', 4, 'Blocked', 'US661 - Approver Task List', 'US FIN - myEngage Automation Phase 2', 'Release 2.0 - Create Contract', 'Final Regression - IIB9', 'Regression Testing - Rel2.0', 'US718 - Approver Task'), (70007, 'xLos', 2, 'Blocked', 'US690 - WBS Line for Caribbean Internal', 'US FIN - myEngage Automation Phase 2', 'Release 2.0 - Create Contract', 'System Testing', 'US604 - WBS codes', 'US690 - WBS Line for Caribbean Internal'), (70008, 'xLos', 27, 'Blocked', 'US703 - Service Material', 'US FIN - myEngage Automation Phase 2', 'Release 2.0 - Create Contract', 'System Testing', 'US604 - WBS codes', 'US720 - Attributes for lines'), (70009, 'xLos', 20, 'Blocked', 'US724-WBS lines for Assurance', 'US FIN - myEngage Automation Phase 2', 'Release 2.0 - Create Contract', 'System Testing', 'US604 - WBS codes', 'US724 - WBS lines for Assurance'), (70010, 'xLos', 5, 'Blocked', 'US725-GDM and RAGDM Codes', 'US FIN - myEngage Automation Phase 2', 'Release 2.0 - Create Contract', 'System Testing', 'US604 - WBS codes', 'US724 - WBS lines for Assurance'), (70011, 'xLos', 7, 'Blocked', 'US727-Profit Center for Assurance', 'US FIN - myEngage Automation Phase 2', 'Release 2.0 - Create Contract', 'System Testing', 'US604 - WBS codes', 'US724 - WBS lines for Assurance'), (70012, 'xLos', 1, 'Blocked', 'US729 - Product code for Tax', 'US FIN - myEngage Automation Phase 2', 'Release 2.0 - Create Contract', 'System Testing', 'US604 - WBS codes', 'US628 - WBS lines for Tax'), (70013, 'xLos', 4, 'Blocked', 'US730 - Profit center and Product code Derivation', 'US FIN - myEngage Automation Phase 2', 'Release 2.0 - Create Contract', 'System Testing', 'US604 - WBS codes', 'US630 - WBS lines for CR External'), (70014, 'xLos', 5, 'Blocked', 'US746 - WBS Line for PD codes', 'US FIN - myEngage Automation Phase 2', 'Release 2.0 - Create Contract', 'System Testing', 'US604 - WBS codes', 'US746 - WBS Line for PD codes'), (70015, 'xLos', 9, 'Failed', 'Sprint 3_Regression', 'US FIN - myEngage Automation Phase 2', 'Release 1.5 - Mass Code', 'Regression Testing', 'Add New WBS - Regression Test Suite', 'Sprint 3_Regression'), (70016, 'xLos', 3, 'Failed', 'Sprint 3_Regression', 'US FIN - myEngage Automation Phase 2', 'Release 2.0 - Create Contract', 'Final Regression - IIB9', 'Regression Testing - Release 1.0', 'Sprint 3_Regression'), (70017, 'xLos', 1, 'Failed', 'Sprint 4_Regression', 'US FIN - myEngage Automation Phase 2', 'Release 1.5 - Mass Code', 'Regression Testing', 'Add New WBS - Regression Test Suite', 'Sprint 4_Regression'), (70018, 'xLos', 4, 'Failed', 'US612 - WBS lines for Advisory', 'US FIN - myEngage Automation Phase 2', 'Release 2.0 - Create Contract', 'System Testing', 'US604 - WBS codes', 'US612 - WBS lines for Advisory')
EXample image[
^]
Can anybody help me on creating treeview, just like attached image
What I have tried:
Using hard coded data i wrote like below
<script>
var mockData = [];
mockData.push({
item:{
id: 'id1',
label: 'Lorem ipsum dolor 1',
checked: false
},
children: [{
item:{
id: 'id11',
label: 'Lorem ipsum dolor 11',
checked: false
}
},{
item:{
id: 'id12',
label: 'Lorem ipsum dolor 12',
checked: false
}
},{
item:{
id: 'id13',
label: 'Lorem ipsum dolor 13',
checked: false
}
}]
});
mockData.push({
item:{
id: 'id2',
label: 'Lorem ipsum dolor 2',
checked: false
},
children: [{
item:{
id: 'id21',
label: 'Lorem ipsum dolor 21',
checked: false
}
},{
item:{
id: 'id22',
label: 'Lorem ipsum dolor 22',
checked: true
}
},{
item:{
id: 'id23',
label: 'Lorem ipsum dolor 23',
checked: false
}
}]
});
mockData.push({
item:{
id: 'id3',
label: 'Lorem ipsum dolor 3',
checked: false
},
children: [{
item:{
id: 'id31',
label: 'Lorem ipsum dolor 31',
checked: true
}
},{
item:{
id: 'id32',
label: 'Lorem ipsum dolor 32',
checked: false
},
children: [{
item:{
id: 'id321',
label: 'Lorem ipsum dolor 321',
checked: false
}
},{
item:{
id: 'id322',
label: 'Lorem ipsum dolor 322',
checked: false
}
}]
}]
});
$('#tree-container').highCheckTree({
data: mockData
});
</script>
But i stuck up how to write query for json data with above format.
Submit an article or tip