AngularJS ASP.NETMVC：Treeview和网格在同一页面上的交互

我在ASP.Net MVC项目中使用AngualrJS和Devextreme控件，我有一个页面，其中包含一个树状视图（填充文件夹）和一个网格（填充树中选定节点中的文件夹和文件）

在树中的任何节点上单击项时，我将刷新网格内容。 通过调用服务，使用控制器“treeCtrl”填充树节点

我假设网格连接到另一个控制器“gridCtrl”，该控制器使用参数调用另一个服务（该参数是树中选择的节点id）

• 如何告知网格根据树中选定的节点id进行刷新？ 假设两个控件和控制器位于同一页中
• 实现这一点的最佳方式是什么

---

首先，您应该获得选定的treeview项目。例如，您可以使用事件：

接下来，您可以通过选定的treeview项数据过滤数据网格（出于演示目的，我假设所有treeview项都具有唯一的

id

字段）

我在这里创建了一个小样本-

当然，在您的情况下，您必须在mvc控制器的服务器端实现筛选操作。因此，您应该在那里传递筛选参数。它应该如下所示：

 var gridDataSource = new DevExpress.data.DataSource({
   load: function(options) {
       var filter = options.filter,
           deferred = $.Deferred();
       $.ajax({
           url: "your/service/",
           data: filter
       }).done(function(response){
           deferred.resolve(response);
       });

       return deferred.promise();
   }
});

---

另外，这可能会有所帮助。

谢谢@Sergey。我正在尝试使树在虚拟模式下工作。首先只加载根节点。然后，在展开子节点时，查询服务后将填充节点。节点/GetNodes？nodeId=选定节点。我使用以下“$scope.treeOptions=”{dataSource:treeDataSource，virtualModeEnabled:true，dataStructure:'plain'，rootValue:-1，}；'我使用了您在示例中提供的相同treeDataSource，并尝试了各种场景，例如添加事件onItemExpanded。请分享您的想法（如果有）。

var gridDataSource = new DevExpress.data.DataSource({
   load: function(options) {
       var filter = options.filter;
       if(filter) {
           // return filtered data
       }
       // return all data
   }
});
//...
// event handler from the previous step
onItemClick: function(args) {
    var itemId = args.itemData.id;

    // set filter for the datagrid and load datasource
    gridDataSource.filter(["folderId", itemId]);
    gridDataSource.load();
}

 var gridDataSource = new DevExpress.data.DataSource({
   load: function(options) {
       var filter = options.filter,
           deferred = $.Deferred();
       $.ajax({
           url: "your/service/",
           data: filter
       }).done(function(response){
           deferred.resolve(response);
       });

       return deferred.promise();
   }
});