2017-02-16 61 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的一些事情,这里有一个黑客攻击,一个黑客攻击,通常可以使其工作!

东西告诉我有一个更聪明的方法来做到这一点!