template Kendo UI Treeview和JSON




treeview template (3)

嗨:你应该在模式中添加数据属性:

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

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

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

(汽车)

- (汽车)

---- FM-1100

---- FM-4200

- (自行车)

---- FM-3100

(人员)

- (客户端)

---- GH-3000

- (贵宾)

---- GH-3100

PS。 ()中的名字应该是像包含他们的“子女”

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

举个例子,我们以kendo文档为例:

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.c​​om/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数据源。 我已经为下面的数据模型生成了这个方法,它说明了组织中可能有经理或雇主的个人,如果你的数据库是不同的,你应该看看代码,然后改变一下。

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:主节点root:如果你只是进入这个方法,所以假设你必须
从没有父母的数据库节点中选择,其父母id等于NULL,在这里生成你的json字符串,如mystr =“[” 3.2嵌套节点:如果多次调用这个方法检查父节点是否相等到itemid这里生成你的json字符串像mystr =“,item:[”

第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 =" }]"**

我希望它可以帮助你更多的信息在这里

动态树视图与-拖动和拖放逐剑道


您是否可以使用以下结构创建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。





kendo-ui