属于SMART datagrid格模块的树视图组件，是一种显示和操作具有逻辑性父子阶层关系的数据行的UI工具。 除了阶层关系，它是与网格视图相同的。
(为运行例题，需要准备SMART datagrid本等内容。请参考产品设置和准备页面。)
也就是说，行的树视图显示与数据组通过阶层关系相连接的数据行， 而数据列则会具有相当于数据组字段的数量的DataField值。 另外，树视图由一个以上的列所构成，并且各个列连接到数据组的字段。 最后，与网格行相同的是，树视图的各个行是由显示连接在其列的数据行的字段值的数据单元格所构成的。
虽然我们也可以通过在只定义了数据字段组和列组的空树视图中添加数据行的方式进行构成，但是一般都会从已初始化的数据组开始。 有关从文本文件格式的外部数据源初始化数据组的方法，请参考加载树数据例题主题。 因为从HTTP服务器所传递过来的数据组也是文本格式，所以一般都可以同样进行适用。
上面的树视图是从如下数组初始化数据组的。
var rows = [
[0,"1","IBRD00010","France","4.25","USD","P037383","250","000","001.00","11/01/1952","05/01/1977"],
[0,"1.1","IBRD00020","Netherlands","4.25","USD","P037452","191","044","211.75","04/01/1952","10/01/1972"],
[0,"1.2","IBRD00021","Netherlands","4.25","USD","P037452","3","955","788.25","04/01/1953","04/01/1954"],
[0,"1.2.1","IBRD00030","Denmark","4.25","USD","P037362","40","000","000.00","02/01/1953","08/01/1972"],
[0,"1.2.2","IBRD00040","Luxembourg","4.25","USD","P037451","12","000","000.00","07/15/1949","07/15/1972"],
...
[1,"2","IBRD00060","Chile","3.75","USD","P006577","2","500","000.00","07/01/1950","01/01/1955"],
[1,"2.1","IBRD00070","Netherlands","3.56","USD","P037453","2","000","000.00","01/15/1949","07/15/1958"],
...
[2,"3","IBRD00100","Netherlands","3.56","USD","P037456","2","000","000.00","01/15/1949","07/15/1958"],
...
];
为了将数组构成为树结构，我们需要各个行具有树信息的值。 上述例题中，第二个'tree'字段被用于数据组的treeField。 树字段值必须是字符串，并且将会找出具有与当前行值的前部相同的值的前行，并添加为相关行的子行。 如果没有前行，它将会成为顶级数据行。
被用于树值的项，基本上都不会被添加到数据组中，而当调用TreeDataSet.setRows时， 如果将useTreeField参数指定为true，并且通过setFields设置字段列表时，可以添加相关项至字段。
// 意味着第三个参数将要把第二个参数所指定的tree field使用为实际数据字段。
dsMain.setRows(rows, 1, true);
例题中的各个行的第一个值被用于iconIndex。 iconIndex是用于树视图中的值而不是数据组的值，而它有时也会被保管在数据源。 指定树行图标的方法有，直接指定TreeRow.iconIndex属性值或指定TreeOptions.iconCallback回调函数等。 如同这个例题，如果数据组中含有图标值，就可以通过TreeOptions.iconField属性进行指定并使用该值。
但是，一旦在TreeRow.iconIndex中设置非undefined的值，其他将会被忽视。
tree.setOptions{
iconCallback: function (row) {
var idx = row.iconIndex();
if (idx === undefined) {
switch (row.getValue('country')) {
case 'France':
idx = 'fr.png';
break;
...
default:
idx = 0;
break;
}
row.setIconIndex(idx);
}
return idx;
},
...
});