如何使用挖空在树模型中显示json数据? [英] How to display a json data in a tree model using knockout?

问题描述

我有一个像这样的简单json文件.

I have a simple json file like this.

 "Test":
    [
        {
            "id":"1",
            "type" : "test1"
        },
        {
            "id":"1.1",     
            "type":"test2"
        },
        {
            "id":"1.1.1",
            "type":"test3"
        },
        {
            "id":"1.1.2",
            "type":"test3"                
        }]

我想使用敲除在树模型中显示此数据，如下所示.

I want to display this data in a tree model using knockout as like below.

      1 test1
      1.1  test2
         1.1.1  test3          
         1.1.2 test4

我还没有看到任何满足我要求的样品解决方案.有人可以指导我吗?谢谢.

I haven't seen any sample solution for my requirement. anybody can guide me? Thank you.

推荐答案

如果数组正确排序，则可以使用style绑定通过CSS规则对item元素应用左填充:

If your array is properly sorted then you can use style binding to apply left padding for item element via according CSS-rule:

<ul data-bind="foreach: test">
    <li data-bind="style: { paddingLeft: (id.length * 10) + 'px' }">
        <span data-bind="text: id"></span>
        <span data-bind="text: type"></span>
    </li>
</ul>

您可以在此处查看其工作方式: http://jsfiddle.net/7vyfW/

You can check how it works here: http://jsfiddle.net/7vyfW/

此方法不会跟踪您的结构，因此，如果您要创建可编辑列表，该方法将无用.但是，如果您的任务只是显示一棵树，那将是简单而有效的.

This method does not track your structure, so it is useless if you want to create an editable list. But it is simple and effective if your task is just to display a tree.

这篇关于如何使用挖空在树模型中显示json数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！