与复选框的Jquery treeview。 [英] Jquery treeview with checkbox.
本文介绍了与复选框的Jquery treeview。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要使用Jquery的树视图复选框，请在图像中找到我的数据。
Treeview具有层次结构，需要5个级别。
我的要求有点难以理解。 Layer1，layer2，layer3，layer4和layer5是root，test set name是激光级别。如果layer5为空，则所有唯一级别都是根，然后测试集名称应为layer4。同样适用于所有图层。
MySQL查询：
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>
但我坚持如何用以上格式编写json数据查询。
But i stuck up how to write query for json data with above format.
推荐答案
（'＃tree-container'）。highCheckTree（{
data：mockData
}）;
< / script>
('#tree-container').highCheckTree({ data: mockData }); </script>
但我坚持如何用以上格式编写json数据查询。
But i stuck up how to write query for json data with above format.
这篇关于与复选框的Jquery treeview。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
![示例图片](\"https://i.stack.imgur.com/7wEGt.png\"){kind=link}