AngularJS ASP.Net MVC：在同一頁上的樹視圖和網格之間的相互作用

我在ASP.Net MVC項目中使用AngualrJS與Devextreme控制，我有一個包含一個TreeView（更新文件夾）頁面和一個網格（填充樹中選定節點中的文件夾和文件）AngularJS ASP.Net MVC：在同一頁上的樹視圖和網格之間的相互作用

在項目單擊樹中的任何節點時，我將刷新網格內容。通過調用服務使用控制器「treeCtrl」填充樹節點。

正如我假定網格被連接到另一個控制器「gridCtrl」其中要求具有參數（這是在樹中選擇的節點ID的另一服務。

如何可以告訴網格根據樹中選定的節點ID進行刷新？假設兩個控件和控制器在同一個頁面中
實現它的最佳方式是什麼？

來源

2015-11-10 Coding

第一，你應該得到一個選定的樹視圖項目。例如，你可以使用onItemClick事件：

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

接下來，您可以通過過濾選擇的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會有所幫助。

來源

2015-11-10 22:00:07 Sergey

謝謝@Sergey。我正在嘗試使樹以虛擬模式工作。首先加載根節點。然後，在展開子節點後，查詢服務後將填充節點。節點/ GetNodes？nodeId =選定節點。我正在使用後續的'$ scope.treeOptions = { dataSource：treeDataSource， virtualModeEnabled：true， dataStructure：'plain'， rootValue：-1, };'我使用了您在示例中提供的相同treeDataSource，並嘗試了各種場景，例如添加事件onItemExpanded。請分享你的想法，如果有的話。 – Coding

AngularJS ASP.Net MVC：在同一頁上的樹視圖和網格之間的相互作用

回答

相關問題