Bootstrap树形组件jqTree的简单封装(2)

public class Tree { public string id { get; set; } public string text { get; set; } public object nodes { get; set; } } 　　　　 //返回tree的节点数据 public JsonResult GetTreeData() { var lstRes = GetNode(1); return Json(lstRes, JsonRequestBehavior.AllowGet); } public List<Tree> GetNode(int iNum) { var lstRes = new List<Tree>(); if (iNum > 5) { return lstRes; } for (var i = 1; i < 3; i++) { var oNode = new Tree { id = Guid.NewGuid().ToString(), text = iNum + "级节点" + i }; var lstRes2 = GetNode(iNum + 1); oNode.nodes = lstRes2; lstRes.Add(oNode); } return lstRes; }

前端调用

$(function () { $("#ul_tree").jqtree({ url: "/Home/GetTreeData", param: { }, onBeforeLoad: function (param) { }, onLoadSuccess: function (data) { }, onClickNode: function (selector) { } }); });

onLoadSuccess事件调试看看

onClickNode事件调试看看，selector对应着当前的点击的节点的jquery对象。

三、小结

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

以上就是对jquery tree的一个简单封装，今天刚刚完成的第一个版本，可能效果不太好，但基本的功能都已经实现。