var testdata = [{ id: '1', text: '系统设置', nodes: [{ id: '11', text: '编码管理', nodes: [{ id: '111', text: '自动管理', nodes: [{ id: '1111', text: '手动管理', nodes: [{ id: '11111', text: '底层管理', }] }] }] }] }, { id: '2', text: '基础数据', nodes: [{ id: '21', text: '基础特征' }, { id: '22', text: '特征管理' }] }]; $(function () { $("#ul_tree").jqtree({ data: testdata, param: { }, onBeforeLoad: function (param) { }, onLoadSuccess: function (data) { }, onClickNode: function (selector) { } }); });

2）通过URL远程获取数据：

后台C#请求方法，构造上面data格式的数据类型。

public class Tree { public string id { get; set; } public string text { get; set; } public object nodes { get; set; } }

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++) { + 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对象。

以上就是对jquery tree的一个简单封装，今天刚刚完成的第一个版本，可能效果不太好，但基本的功能有了，后面还有待优化。欢迎园友们拍砖！