jsData 使用教程（八） 使用 TreeColumn 实现 TreeGrid

TreeGrid 是企业级开发中，最为常用的一个控件。在 JData 中，可以使用 TreeColumn 来实现。如下图所示：

但是在使用的时候，有一些要注意的地方。

第一：表的结构必须为最为常用的自连接方式来实现树形的。 如 Northwind 数据库的 Employee 表。

第二：数据量不能过大。使用 TreeColumn 需要一次性把所有数据加载到客户端。数据量过大则不适合使用。（万一数据量大呢？如何是好？？？）

Sys.onReady(function() {

var e = new WebApplication.EmployeeMetaType();
var treeDataSource = new JData.TreeDataSource("../Services/NorthwindService.asmx", "GetEmployees", 'InsertEmployee', 'UpdateEmployee', 'DeleteEmployee');
treeDataSource.set_selector([e.EmployeeID, e.ReportsTo, e.Country, String.format('{0} + " " + {1} as Name', e.FirstName, e.LastName)]);
treeDataSource.set_primaryKeyColumn(e.EmployeeID);
treeDataSource.set_parentColumn(e.ReportsTo);

var gridView = new JData.GridView(document.getElementById('gridView'));
var columns = new Array();
columns[columns.length] = new JData.BoundField(e.EmployeeID, null, '80px', null, true);
columns[columns.length] = new JData.TreeColumn('Name', null, '180px', '120px', true);
columns[columns.length] = new JData.BoundField(e.Country, null, '120px', null, true);

var treeParentColumn = columns[columns.length] = new JData.TreeParentColumn('ReportsTo', 'ReportsTo', '120px', '114px');
treeParentColumn.set_dataSource(treeDataSource);
treeParentColumn.set_displayMember('Name');
treeParentColumn.set_valueMember(e.EmployeeID);

var commandColumn = columns[columns.length] = new JData.CommandField();
commandColumn.get_itemStyle().set_width('80px');
commandColumn.set_showEditButton(true);
commandColumn.set_showCancleButton(true);
commandColumn.set_showDeleteButton(true);

gridView.set_columns(columns);
gridView.set_dataSource(treeDataSource);
gridView.set_caption('Employees');
JData.JQueryUIStyle(gridView, null, { autoUpdateStyle: false });
gridView.initialize();


$addHandler($get('btnInsertEmployee'), 'click', function() {
$('#dlgInsert').dialog('open');
});

var dataSource = new JData.WebServiceDataSource("../Services/NorthwindService.asmx", "GetEmployees");
dataSource.set_selector([e.EmployeeID, e.FirstName, e.LastName, e.ReportsTo]);
dataSource.select(null, function(items) {
for (var i = 0; i < items.length; i++) {
var option = document.createElement('option');
option.value = items[i][e.EmployeeID];
option.text = items[i][e.EmployeeID] + " " + items[i][e.FirstName];
$get('ddlReportsTo').options.add(option);
}
});
$('#dlgInsert').dialog({
modal: true,
autoOpen: false,
buttons: {
'OK': function() {
var employee = new WebApplication.Employee();
employee.FirstName = $get('txtFirstName').value;
employee.LastName = $get('txtLastName').value;
employee.ReportsTo = $get('ddlReportsTo').value == '' ? null : $get('ddlReportsTo').value;
treeDataSource.insert(employee, function() {
employee.Name = employee.FirstName + " " + employee.LastName;
$('#dlgInsert').dialog('close');
});
}
}
});
});

代码和创建 GridView 差不多，有两个值得注意的地方。

1、在这里创建 TreeDataSource 对象，而不是 WebDataSource 对象。在创建完后，必须设置主键，和相关连的外键。如下面这段代码所示。

var e = new WebApplication.EmployeeMetaType();
var treeDataSource = new JData.TreeDataSource("../Services/NorthwindService.asmx", "GetEmployees", 'InsertEmployee', 'UpdateEmployee', 'DeleteEmployee');
treeDataSource.set_selector([e.EmployeeID, e.ReportsTo, e.Country, String.format('{0} + " " + {1} as Name', e.FirstName, e.LastName)]);
treeDataSource.set_primaryKeyColumn(e.EmployeeID);
treeDataSource.set_parentColumn(e.ReportsTo);

2、就是插入数据了。在这里插入数据不能使用 ColumnField 的 New 按钮。必须另外创建一个输入框来输入数据，然后通过 TreeDataSource 将数据提交到服务端。TreeColumn 对象会监听到 TreeDataSource 的 Insert 事件，当 TreeDataSource 执行完 insert 方法后，便会把数据插入到相应的行。如下面代码所示：

$('#dlgInsert').dialog({
modal: true,
autoOpen: false,
buttons: {
'OK': function() {
var employee = new WebApplication.Employee();
employee.FirstName = $get('txtFirstName').value;
employee.LastName = $get('txtLastName').value;
employee.ReportsTo = $get('ddlReportsTo').value == '' ? null : $get('ddlReportsTo').value;
treeDataSource.insert(employee, function() {
employee.Name = employee.FirstName + " " + employee.LastName;
$('#dlgInsert').dialog('close');
});
}
}
});

本文演示请看：http://www.jsdata.org/Demo/TreeGrid.html

全部演示及代码下载：http://www.jdata.org