JQuery treeview с флажком.

---

Мне нужен флажок treeview с помощью Jquery, пожалуйста, найдите мои данные на изображении.

Treeview имеет иерархическую структуру, нужно 5 уровней.

Мое требование немного трудно понять. Layer1, layer2, layer3, layer4 и layer5-это корни, имя тестового набора-уровень lase. все уникальные уровни являются корнями, если layer5 пуст, то имя тестового набора должно быть layer4.

Запрос MySQL:

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')

Пример изображения[^]


Кто-нибудь может помочь мне в создании treeview, как и прикрепленное изображение

Что я уже пробовал:

Используя жестко закодированные данные, я написал, как показано ниже

<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> 

Но я застрял в том, как написать запрос для данных json с вышеуказанным форматом.

---