我想在Asp.net mvc4中创建一个带有远程数据源的 kendo ui树视图。我对剑道知识有疑问。我在kendo website中尝试过这些例子。
但是我甚至无法将这些图像传递给treeView。
关于项目:此项目是为加载Web表单创建TreeView菜单。每个Web表单都可以作为formObject。该对象具有以下属性
这是我在控制器上的代码
public class HomeController : Controller
{
ObjectService service = new ObjectService();
private int cky = 11;
private int usrky=28;
public ActionResult Index()
{
return View();
}
public ActionResult GetAllMenu(int prntKy = 1)// initially the parent key is = 1
{
List<ObjectModel> objects = new List<ObjectModel>();
objects = service.GetObjectsByPrntKy(prntKy, cky, usrky);//get all parent nodes
List<TreeViewModel> tree = new List<TreeViewModel>();
if (objects != null)
{
foreach (ObjectModel model in objects)//for each parent node
{
TreeViewModel treeObj = new TreeViewModel();
treeObj.id = model.ObjKy;
treeObj.name = model.ObjNm;
treeObj.childrens = GetChileByPrntObjKy(model.ObjKy);
tree.Add(treeObj);
}
}
return Json(tree, JsonRequestBehavior.AllowGet);
}
private List<TreeViewModel> GetChileByPrntObjKy(int prntKy)// method to get child nodes
{
List<TreeViewModel> tree = new List<TreeViewModel>();
List<ObjectModel> Objects = new List<ObjectModel>();
Objects = service.GetAllObjects();
foreach (ObjectModel model in Objects)
{
TreeViewModel treeObj = new TreeViewModel();
if (model.PrntObjKy == prntKy)
{
treeObj.id = model.ObjKy;
treeObj.name = model.ObjNm;
treeObj.childrens = GetChileByPrntObjKy(model.ObjKy);
tree.Add(treeObj);
}
}
return tree;
}
}
这是模型
public class TreeViewModel
{
public int pid { get; set; }
public int id { get; set; }
public string name { get; set; }
public List<TreeViewModel> childrens { get; set; }
}
public class ObjectModel
{
public long UsrObjPrmsnKy { get; set; }
public long UsrKy { get; set; }
public int ObjKy { get; set; }
public string ObjCd { get; set; }
public string ObjNm { get; set; }
public string ObjCaptn { get; set; }
public bool isPrntObj { get; set; }
public Nullable<int> PrntObjKy { get; set; }
public int CallObjKy { get; set; }
public string ObjPath { get; set; }
public bool isAlwAcs { get; set; }
public bool isAlwAdd { get; set; }
public bool isAlwUpdate { get; set; }
public bool isAlwDel { get; set; }
public bool isAlwApr { get; set; }
}
这是视图
<div id="treeview">
</div>
<script type="text/javascript">
$(document).ready(function () {
LoadTreeView(1);
});
function LoadTreeView(prntKy)
{
var key = prntKy;
homogeneous = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: '@Url.Content("~/Home/GetAllMenu")',
data:{'prntKy':key},
dataType: "json"
}
},
schema: {
model: {
id: "id",
hasChildren: "childrens",
name: "name"
}
}
});
$("#treeview").kendoTreeView({
dataSource: homogeneous,
select: onSelectTree,
dataTextField: "name",
dataValueField: "id",
});
}
function onSelectTree(e) {
var data = $('#treeview').data('kendoTreeView').dataItem(e.node);
alert(data.id);
LoadTreeView(data.id);
}
</script>
我也上传了结果图片。请帮我。
答案 0 :(得分:3)
您的树视图配置不正确。每次选择多余的节点时,您似乎都在重新初始化它。我建议你查看remote binding demo,它会对你的案件采取非常类似的案例。以下是树视图声明的外观:
var serviceRoot = "http://demos.kendoui.com/service";
homogeneous = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: serviceRoot + "/Employees",
dataType: "jsonp" // you don't need "json" for your case
}
},
schema: {
model: {
id: "EmployeeId",
hasChildren: "HasEmployees"
}
}
});
$("#treeview").kendoTreeView({
dataSource: homogeneous,
dataTextField: "FullName"
});
在此演示中,树视图将要求数据源在扩展父节点时加载新级别的节点。例如,当用户在该演示中展开根节点时,数据源向http://demos.kendoui.com/service/Employees?EmployeeId=2发出请求,这意味着“返回EmployeeID等于2的节点的子节点”。为何选择“EmployeeId”?因为这就是数据源模型的“id”:
schema: {
model: {
id: "EmployeeId",
hasChildren: "HasEmployees"
}
}