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

---

关 JData 的文章，很久没有写了，一方面是工作忙，另一方面在使用 JData 的时候，发现了一些 BUG ，以及有些不好用的地方，需要修改，所以停了下来。

　　有朋友给我提了几个意见：

　　1、 JData 这名字容易让人误会与 Java 相关的，建议改名为 jsData，这个建议不错。但是为了保持前后一致，在这里暂时还是叫 JData 吧。

　　2、希望能提供完整的文档。的确，对于开发人员来说，文档很重要性，在这个类库完善后（大概1.0 版本后），我会抽时间来写的了。

　　这些意见都很好，也希望其它朋友能够给我多提些意见。下面开始我们的教程。

　　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://jdata.alinq.org/Demo/TreeGrid.html

---

« 
» 

---