简介

树状表格控件

使用简介

首先设置TreeGrid的nodes属性：

// @Bind #treeGrid1.onCreate
!function(self, arg) {
	self.set("nodes",[{
		label:"节点1",
		data:{
			prop1:'产品1',
			prop2:'属性1',
			prop3:'属性2'
		}
	},{
		label:"节点2",
		data:{
			prop1:'产品2',
			prop2:'属性2',
			prop3:'属性2'
		},
		nodes:[{
			label:"节点21",
			data:{
				prop1:'产品21',
				prop2:'属性21',
				prop3:'属性21'
			}
		},{
			label:"节点22",
			data:{
				prop1:'产品22',
				prop2:'属性22',
				prop3:'属性22'
			}
		}]
	},{
		label:"节点3",
		data:{
			prop1:'产品3',
			prop2:'属性3',
			prop3:'属性3'
		}	
	}]);
}

上面的格式中不难看出声明一个Node节点的JSON结构为：

{
	label:"xxx",
	data:{}
}

其中label为节点的标题，data代表节点对应的数据，如果这个节点还有子节点，则通过nodes属性递归定义：

{
	label:"父节点标题",
	data:{},
	nodes:[{
		label:"第一层子节点标题A",
		data:{},
		nodes:[{
			label:"第二层子节点标题",
			data:{},
			nodes:[{
				...	
			}]		
		}]		
	},{
		label:"第一层子节点标题B",
		data:{}	
	},...]
}

通过上面的方式，我们定义好了一个JSON数组，并将它设置为TreeGrid的nodes属性。

接下来再定义TreeGrid的其它属性。我们给TreeGrid中添加三个DataColumn(TreeGrid具有Grid的特性，因此可以添加DataColumn):

并分别设置这三个DataColumn的property属性为prop1,prop2,prop3，最后设置一个treeColumn属性，告诉TreeGrid的树节点出现在那个列中，我们设置为prop1,最终的XML定义如下：

<TreeGrid id="treeGrid1">
<Property name="treeColumn">prop1</Property>
<Columns>
<DataColumn>
  <Property name="property">prop1</Property>
  <Property name="name">prop1</Property>
  <Editor/>
</DataColumn>
<DataColumn>
  <Property name="property">prop2</Property>
  <Property name="name">prop2</Property>
  <Editor/>
</DataColumn>
<DataColumn>
  <Property name="property">prop3</Property>
  <Property name="name">prop3</Property>
  <Editor/>
</DataColumn>
</Columns>
<Nodes/>
</TreeGrid>

这样这个范例最终的显示效果为：

详细属性说明

该控件兼具Tree与Grid的所有特性，因此其基本属性请参考：

treeColumn

该属性决定了树节点所在的列，如使用简介中的范例，如果将treeColumn调整为prop2，则最终效果为：

应该注意到这个时候树节点就位于prop2列上。

Dorado 9 : TreeGrid(DCUG)

简介

使用简介

详细属性说明

treeColumn

Attachments: