多语言展示
当前在线:1158今日阅读:112今日分享:19

Wijmo5 FlexGrid教程(13)- 创建简单树形视图

本文介绍使用的FlexGrid来创建分级的数据树,可以将表格作为一个树视图控件。
工具/原料
1

UI控件:Wijmo5

2

.NET控件集:ComponentOne Studio Enterprise

方法/步骤
1

首先创建一个FlexGrid中的元素。

2

其次创建树形视图//创建一些层次数据   VAR treeData = [      {        名称:'\ u266B Adriane Simione' ,物品:        {           名称:'\ u266A可理解的天空“,项目:                {名称:'理论',长度:“2:02” },                {名:“巨眼”,长度:“3:29” },                {名称:'木星的卫星“,长度:”1:02“ },                {名称:'无界限思想“,长度:”2:41“ },                {名称:'Spacetronic的眼睛“,长度:”3点41分' }]}                    ]                },                {                    名称:'\ u266B艾米·怀恩豪斯“,项目:                      {                          名称:'\ u266A返黑“,项目:                        {名称:'上瘾',长度:“1:34” },                        {名称:'他只能抱着她',长度:“2:22” },                        {名:“有些邪恶的战争”,长度:“2:21” },                        {名:“唤醒孤独”,长度:“3:43” },                        {名称:'泪始干自己',长度:'1:25' }]                      },                      {                          名称:'\ u266A在现场天堂',物品:                          {名:“你知道我不行”,长度:“2:32” },                          {名:“唤醒孤独”,长度:“1:04” },                          {名:“瓦莱丽',长度:”1:22“ },                          {名称:'泪始干自己',长度:“3点15” },                          {名称:'康复',长度:'3:40' }]                      }]            ];

3

最后,通过设置childItemsPath属性和ItemsSource的属性来设置树形目录结构。//创建电网无功格= 新 wijmo.grid.FlexGrid('#tvFlexGrid');//填充网格,并设置childItemsPath显示数据分层grid.childItemsPath = '物品' ;//初始化表格显示分层数据grid.initialize({  的AutoGenerateColumns:假的,  列: [    {绑定:'名',宽度:300},    {绑定:“长度”,宽度:80,对齐:'中心' }  ]  的ItemsSource:treeData, //层次数据  childItemsPath:'项目',    //设置层级路径  allowResizing:wijmo.grid.AllowResizing.None, //禁用调整  headersVisibility:wijmo.grid.HeadersVisibility.None,//隐藏标题SelectionMode:wijmo .grid.SelectionMode.ListBox//使用列表框选择});

4

效果展示