AngularJS ASP.Net MVC：同一页面Treeview和Grid的交互

Question

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

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

因为我假设 grid 连接到另一个控制器“gridCtrl”，它使用 参数调用另一个服务（这是树中选择的节点id。

如何让网格根据树中选定的节点 ID 进行刷新？假设两个控件和控制器在同一个页面。
实现它的最佳方法是什么？

Answer 1

首先，您应该获得一个选定的树视图项目。例如，您可以使用 onItemClick 事件：

onItemClick: function(args) {
    // here you can get the data of the item you clicked
    var itemData = args.itemData;
}

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

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();
}

我在这里创建了一个小样本 - http://plnkr.co/edit/2BBo6sPGAdNqxeij2ZM0?p=preview;

当然，在您的情况下，您必须在 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();
   }
});

另外，这个 Add Data-Based Widgets to MVC Project 可能会有帮助。

AngularJS ASP.Net MVC：同一页面Treeview和Grid的交互

AngularJS ASP.Net MVC: Interaction between Treeview and Grid on the same page

model-view-controller

asp.net-mvc

treeview

gridview

angularjs