2017-02-16 76 views
0

背景信息劍道UI TreeListViews複雜的數據

總之我期待實現「大多是」什麼在這裏顯示...

http://demos.telerik.com/kendo-ui/treelist/remote-data-binding

...但它是一個有點在本例中,數據來自多個基本端點url。

我想建立一個通用的查詢頁面的建築,它允許用戶選擇一個背景,那麼「類型」(或終點),然後從那裏建立在該端點上的自定義查詢。

我設法去的地步,我這樣做了一個簡單的查詢,但現在我試圖處理更復雜的情況,我找回孩子,或者更深層次的數據項來自有問題的端點的點。

考慮到這一點......

概念

我有很多端點並非所有的OData但大多遵循的OData v4的規則,所以我想建立一個「的TreeGrid」已經選擇了一個端點來顯示查詢可用的擴展選項。 我所有的端點都有一個名爲GetMetadata()的自定義函數,它描述了該端點的類型信息,其中端點基本上是一個實現,它可能會或可能不會有一些其他自定義函數來處理很少有其他業務場景。

所以,對於一個HTTP GET請求,類似...

~/SomeContext/SomeType/GetMetadata()

...我還是會回到一個對象,它看起來像一個MVC /的WebAPI元數據容器。 該對象有一個稱爲「屬性」其中一些是標量,其中的一些是複雜的(如在數據定義的)屬性。

我想構建一個TreeListDataSource或HierarchicalDataSource對象,我可以使用它綁定到Kendo treeList控件只有複雜的屬性,動態地爲元組獲取url並列出複雜的屬性基於從與根端點父類型的屬性信息的類型在頁面上的其他控件被定義。

的問題

我似乎無法弄清楚如何配置劍道數據源對象爲的TreeGrid來得到需要的結果,我認爲有兩個原因可能是一個...

  1. TreeListDataSource對象按照此處顯示的演示:http://demos.telerik.com/kendo-ui/treelist/local-data-binding似乎意味着基於層次結構的控件需要一個扁平的數據源。
  2. 我無法弄清楚如何配置數據源,以便我可以傳遞父元信息(來自數據源的數據項),以便爲get請求構建正確的端點url。
function getDatasource(rootEndpoint) { 
    return { 
     pageSize: 100, 
     filter: { logic: 'and', filters: [{ /* TODO:possibly filter properties in here? */ }] }, 
     type: 'json', 
     transport: { 
      read: { 
       url: function (data) { 
        //TODO: figure out how to set this based on parent 
        var result = my.api.rootUrl + endpoint + "/GetMetadata()"; 
        return result; 
       }, 
       dataType: 'json', 
       beforeSend: my.api.beforeSend 
      } 
     }, 

     schema: { 
      model: { 
       id: 'Name', 
       fields: { 
        Type: { field: 'Type', type: 'string' }, 
        Template: { field: 'Template', type: 'string' }, 
        DisplayName: { field: 'DisplayName', type: 'string' }, 
        ShortDisplayName: { field: 'ShortDisplayName', type: 'string' }, 
        Description: { field: 'Description', type: 'string' }, 
        ServerType: { field: 'ServerType', type: 'string' } 
       } 
      } 
      parse: function (data) { 
       // the object "data" passed in here will be a meta container, a single object that contains a property array. 
       $.each(data.Properties, function (idx, item) { 
        item.ParentType = data; 
        item.Parent = ??? where do I get this ??? 
       }); 

       return data.Properties; 
      } 
     } 
    }; 
} 

我的一些問題可能會下降的事實,元數據本身不具有主鍵,我想如果可能使用解析附加一個生成的GUID的密鑰可能是一個想法,但隨後我想在尋求孩子的時候,劍道在API上使用這個id作爲問題。

回答

0

所以事實證明,kendo只是沒有做任何事情,而不僅僅是提供來自單個端點的數據,我在這裏做的事情比這稍微複雜一些,對於「不是實體類型數據」的數據,我沒有常用的東西,如鍵和外鍵。

考慮到這一點,我選擇從劍道把問題徹底離開,只是手柄,有點情況「黑客工具,就像一個正常的劍道擴張,但不是真正的」 ......

在的TreeGrid當劍道顯示了一個可擴展的排它呈現在第一個單元格這樣的事情...

由於沒有擴展的數據或綁定到該小區沒有渲染的服務器的數據源。

所以我假裝它,並添加了一個額外的類到我的版本。非加載。

這意味着我可以通過單擊我的「假展開」鏈接自定義js塊,構建正確的url,執行我的自定義操作,僞造/創建一些id,然後將數據交給數據源。

expandList.on('click', '.k-i-expand.not-loaded', function (e) { 
    var source = expandList.data("kendoTreeList"); 
    var cell = $(e.currentTarget).closest('td'); 
    var selectedItem = source.dataItem($(e.currentTarget).closest('tr')); 
    my.type.get(selectedItem.ServerType, ctxList.val(), function (meta) { 
     var newData = JSLINQ(meta.Properties) 
      .Select(function (i) { 
       i.id = selectedItem.id + "/" + i.Name; 
       i.parentId = selectedItem.id; 
       i.Selected = my.type.ofProperty.isScalar(i); 
       i.TemplateSource = buildDefaultTemplateSourceFor(i); 
       return i; 
      }) 
      .ToArray(); 

     for (var i in newData) { 
      source.dataSource.add(newData[i]); 
     } 

     $(e.currentTarget).remove(); 
     source.expand(selectedItem); 
     buildFilterGrid(); 
     generate(); 
    }); 
}); 

這樣,劍道又接受了什麼epects了一個treeviewlist「一平組與父子關係」,我做所有的繁重。

我用了一點JSLINQ魔術使沉重的多一點「c#like」(畢竟我更喜歡c#),但總而言之,它只是抓住擴展的父項並使用id作爲父項,然後爲當前項生成一個新的id作爲parent.id +「/」+ current.name,這樣一切都是唯一的,因爲對象上的兩個屬性不能具有相同的名稱,並且其中兩個對象由同一父母引用父母屬性名稱的前綴使參考唯一。

這不是一個理想的解決方案,但這就是telerik的一些事情,這裏有一個黑客攻擊,一個黑客攻擊,通常可以使其工作!

東西告訴我有一個更聰明的方法來做到這一點!