Kendo UI Treeview和JSON

所以我想用kendo UI treeview项目创建一棵树，并将它绑定到一个远程Hierarchical Data Source是一个JSON文件。Kendo UI Treeview和JSON

我想要得到的树是这样的：

（车辆）

- （汽车）

---- FM-1100

---- FM -4200

- （自行车）

---- FM-3100

（人事）

- （客户端）

---- GH-3000

- （VIPS）

---- GH-3100

PS。在（）中的名称应该是像包含他们的“子女”的文件夹

我已经在kendo ui网站上检查了有关上述所有文档，但我对treeview使用的整个回调函数有点困惑以每次加载更深的阶段，你展开树中的项目..

让我们的例子剑道文档中，例如：

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我听说过呢？这里有点失落..提前

感谢

来源

2012-11-08 CipherDarkness

您能否使用以下结构创建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" 
            } 
           ] 
          } 
         ] 
        } 
       ] 
      } 
     ] 
    } 
]

，其中每个元素具有一个idtext这就是将在树和包含该树的每个子元件的阵列items显示。

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

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

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

来源

2012-11-08 13:21:20 OnaBai

你是一个拯救生命！：D Thx真的很多！ – CipherDarkness

这里有一个小问题，如果没有理由这样做，以避免创建一个新问题，是否有一个构建方式让kendo将更改存储在树视图中（可以通过拖放操作）直接返回到json文件或用页面的当前树形结构创建一个新的json文件？还是我必须跟踪拖动事件，并从头开始自己编程？ – CipherDarkness

其实你应该创建一个新的问题，因为其他人更容易找到它。标题可能从KendoUI TreeView获取当前数据。答案是当前数据在$（“＃treeview”）。data（“kendoTreeView”）。dataSource.data（）中。 – OnaBai

实际上，逻辑描述下面会生成自引用表格作为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步：做一个嵌套方法，所谓的树形

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中的JSON字符串=“项目：”

第4步：现在您有一个您已经从第3步尝试的数据列表 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

来源

2014-08-11 12:06:07

检查以下内容以改善您的格式：http://stackoverflow.com/editing-help – brasofilo

喜：你应该在架构中添加数据属性：

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

来源

2017-01-28 11:20:26 HamidReza

Kendo UI Treeview和JSON

回答

相关问题