Kendo UI Treeview 和 JSON答案

【问题标题】：Kendo UI Treeview and JSONKendo UI Treeview 和 JSON
【发布时间】：2012-10-28 12:31:05
【问题描述】：

所以我想创建一个带有 kendo UI 树视图项的树，并将其绑定到作为 JSON 文件的远程分层数据源。

我希望生成的树类似于：

（车辆）

--（汽车）

----FM-1100

----FM-4200

--（自行车）

----FM-3100

（人员）

--（客户）

----GH-3000

--(VIP)

----GH-3100

PS。 () 中的名称应该类似于包含其“孩子”的文件夹

我已经在 kendo ui 网站上查看了有关上述所有内容的文档，但我对每次在树中展开项目时树视图用来加载更深阶段的整个回调函数有点困惑..

我们以剑道文档中的例子为例：

var homogeneous = new kendo.data.HierarchicalDataSource({
transport: {
    read: {
        url: "http://demos.kendoui.com/service/Employees",
        dataType: "json"
    }
},
schema: {
    model: {
        id: "EmployeeId",
        hasChildren: "HasEmployees"
    }
}
});

$("#treeview").kendoTreeView({dataSource: homogeneous});

JSON 样本数据：

    {
"employees": [
{"EmployeeId":2,"FullName":"Andrew Fuller","HasEmployees":true,"ReportsTo":null},
{"EmployeeId":3,"FullName":"Carl Jenkins","HasEmployees":true,"ReportsTo":null},
{"EmployeeId":4,"FullName":"Aston Miller","HasEmployees":false,"ReportsTo":2},
{"EmployeeId":5,"FullName":"Damon Sherbands","HasEmployees":false,"ReportsTo":2},
{"EmployeeId":6,"FullName":"Dariel Hanks","HasEmployees":true,"ReportsTo":null},
{"EmployeeId":7,"FullName":"Jason Jackson","HasEmployees":false,"ReportsTo":3},
{"EmployeeId":8,"FullName":"Reylen Scribbs","HasEmployees":false,"ReportsTo":6}
]
}

所以，我必须在“http://demos.kendoui.com/service/Employees”上设置一个休息服务器，它接受来自提供“EmployeeId”的树的 GET，然后在文件中进行搜索，然后返回那些“ReportTo”收到“EmployeeId”的人......？？树想要显示初始节点时会发生什么？

类似：

@Path("/Employees")
@GET
@Produces(MediaType.TEXT_HTML)
public String returnEmployees(@QueryParam("EmployeeId") int accID) {
    //search the employees.json
    return "<head></head><body><pre>" + searchResultsString + "</pre></body>";
}

如何有效地搜索 JSON 文件并以字符串形式返回所有结果？或者如果所有这些都是错误的，有人可以帮助我理解所有 GET 和回调的东西吗？也许它确实与我听说过的 jsonp 有关？这里有点迷失..

提前致谢

【问题讨论】：

标签： json treeview datasource hierarchical-data kendo-ui

【解决方案1】：

您能否创建具有以下结构的 JSON 文件（类似于您建议的 XML 格式）？

[
    {
        "id"   :100,
        "text" :"tree",
        "items":[
            {
                "id"   :1,
                "text" :"Vehicle",
                "items":[
                    {
                        "id"   :2,
                        "text" :"Cars",
                        "items":[
                            {
                                "id"  :3,
                                "text":"FM-1100"
                            },
                            {
                                "id"  :4,
                                "text":"FM-4200"
                            }
                        ]
                    },
                    {
                        "id"   :5,
                        "text" :"Bikes",
                        "items":[
                            {
                                "id"  :6,
                                "text":"FM-3100"
                            }
                        ]
                    }
                ]
            },
            {
                "id"   :7,
                "text" :"Personnel",
                "items":[
                    {
                        "id"   :8,
                        "text" :"Personnel",
                        "items":[
                            {
                                "id"   :9,
                                "text" :"Clients",
                                "items":[
                                    {
                                        "id"  :10,
                                        "text":"GH-3000"
                                    }
                                ]
                            },
                            {
                                "id"   :11,
                                "text" :"VIPs",
                                "items":[
                                    {
                                        "id"  :12,
                                        "text":"GH-3100"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
]

其中每个元素都有一个id 和一个text（这将显示在树中）和一个数组items，其中包含树的每个子元素。

如果是这样，您的代码应该是：

$.getJSON("/testTree.json", function (data) {
    $("#treeview").kendoTreeView({
        dataSource: data
    });
})

/testTree.json 是您的 JSON 文件的 URL。

【讨论】：

你是救生员！ :D 非常感谢！
这里有个小问题是为了避免在没有理由的情况下创建一个新问题，剑道是否有一种方法可以将更改存储在树视图上（比如说拖放）直接回到 json 文件还是用页面当前的树结构创建一个新的 json 文件？还是我必须自己跟踪拖动事件并从头开始编程所有这些？
实际上你应该创建一个新问题，因为它更容易让其他人找到它。标题可能正在从 KendoUI TreeView 获取当前数据。答案是当前数据在 $("#treeview").data("kendoTreeView").dataSource.data().
我提出了新问题以及我遇到的问题，如果您有时间请查看stackoverflow.com/questions/13309896/… 再次感谢
如何在服务器端生成这种 json 用于 asp.net csharp 中的目录遍历...

【解决方案2】：

实际上下面的逻辑描述将生成自引用表为JSON格式，然后将其内容传递给treeview数据源。我已经为下面的数据模型生成了这个方法，它说明了组织中可能有经理或雇主的个人，如果你的数据库不同，你应该查看代码并对其进行一些更改。

namespace Treeview.Models
{
    public class Personal
    {
        public int ID { get; set; }
        public int Parent_ID { get; set; }  //reportsto field
        public string Name { get; set; }

    }
}

要将分层数据源生成为 JSON 文件，请按照以下步骤操作，完整说明请点击链接：第 1 步：创建一个称为 Treeview 的嵌套方法

public string Treeview(int itemID, string mystr, int j, int flag)

它的输出是json作为字符串并得到

  1.1: itemID -->  ID for current node
  1.2: mystr  --> previous json string 
       {in every self call this method , new string will be added to mystr}
  1.3: j is inner counter
  1.4: flag is illustrated if current node has child or not

第 2 步：首先，您从 mvc 中的操作或应用程序调用的其他部分调用此方法，例如 Treeview(0,””,0,0)

  2.1: Assume you do not know the current node so itemid is equal to zero
  2.2: At first time you do not have any string for json
  2.3: j = 0     as the same token
  2.4: flag = 0  as the same token

第 3 步：检查当前节点是否有父节点？ 3.1：主节点根：如果您刚刚进入此方法，那么假设您必须
从数据库中选择没有父节点且其父 ID 等于 NULL 的节点在这里生成像 mystr = "[" 这样的 json 字符串 3.2 嵌套节点：如果多次调用此方法，请检查所有节点他们的父母等于 itemid 在这里生成像 mystr = ",item:["

这样的 json 字符串

第 4 步：现在您有一个您从第三步尝试过的数据列表 4.1：做一个foreach循环，调用每个节点，写成这样
4.2：

foreach (item in querylist)
                 mystr = { id: “” , text: “”

4.3：在这个循环里面检查这个节点有没有孩子？

Querylist= select personal where reportsto=item.id

    4.3.1: **(It has child)** --> call again Treeview method such as
          <code> mystr = Treeview (item.id, mystr, i,1) </code> 
          Now your item.id is crrent node, mystr is the whole string which is generated 
          until now i as j and flag is equal to one due to this node is parent and 
          has child

   4.3.2: **(It has No Child && this node is not last node)**
          **mystr =" }, "**

   4.3.3: **(It has No Child && this node is last node)**

          4.3.3.1: Count number of parent of this node 
          Foreach parent put **mystr = "}]"**

          4.3.3.2: Count number  of child of parent of this node 

                  4.3.3.2.1: if (Child = 0) **mystr =  "}]"**
                  4.3.3.2.2: if (Child > 0) **mystr =  "}]"**

                            4.3.3.2.2.1: if (This node is the last child node
                                        && parent of  this node is last parent)  
                                         **mystr = "},"**

                            4.3.3.2.2.2: if (This node is the last child node && 
                                             parent of this node is last parent && 
                                             flag=1 )
                                          **mystr =" },"**

                            4.3.3.2.2.3: if (This node is the last child node && 
                                             parent of this node is last parent &&  
                                             flag=0 )
                                          **mystr =" }]"**

希望对您有所帮助，请关注here：

Dynamic-Treeview-with-Drag-and-Drop-by-Kendo

【讨论】：

检查以下内容以改进您的格式：stackoverflow.com/editing-help

【解决方案3】：

嗨：您应该在架构中添加数据属性：

schema: {
    model: {
        id: "EmployeeId",
        hasChildren: "HasEmployees",
        data: "employees"
    }
}

【讨论】：