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