ztree示例

//ztree api 文档 http://www.treejs.cn/v3/api.php

//后台

public ActionResult TreeIndex()
{
FileModel model = new FileModel("我的文件");
model.path = @"D:\练习\我的文件";
NewMethod(model, @"D:\练习\我的文件");

return Json(model);
}

private static void NewMethod(FileModel model, string path)
{
var items = Directory.GetDirectories(path);

foreach (string it in items)
{
DirectoryInfo directoryInfo = new DirectoryInfo(it);
FileModel fm = new FileModel(directoryInfo.Name);
fm.path = it;

NewMethod(fm, it);// directoryInfo.FullName

model.children.Add(fm);

}
}

public ActionResult ShowIndex(string path)
{
　　List<dynamic> dynamics = new List<dynamic>();
　　var items = Directory.GetFiles(path);
　　foreach (string itf in items)
　　{
　　　　FileInfo fileInfo = new FileInfo(itf);
　　　　dynamics.Add(
　　　　ew
　　　　{
　　　　　　name = fileInfo.Name,
　　　　　　size = fileInfo.Length
　　　　});
　　}
　　return Json(dynamics);
}

//所需的类

public class FileModel
{
public FileModel()
{
children = new List<FileModel>();
}

public FileModel(string _name)
{
name = _name;
children = new List<FileModel>();
}

/// <summary>
/// 文件夹名字
/// </summary>
public string name { get; set; }

/// <summary>
/// 文件夹路径
/// </summary>
public string path { get; set; }

/// <summary>
/// 子文件夹集合
/// </summary>
public List<FileModel> children { get; set; }
}

//前台MVC

<link href="~/zTree/css/demo.css" rel="stylesheet" />
@*<link href="~/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />*@
<link href="~/zTree/css/metroStyle/metroStyle.css" rel="stylesheet" />

<script src="~/zTree/js/jquery-1.4.4.min.js"></script>
<script src="~/zTree/js/jquery.ztree.core.js"></script>

<script type="text/javascript">
var setting = {
callback: {
onMouseDown: onMouseDown
}
};

var zNodes = [
{
name: "父节点1 - 展开", open: false,
children: [
{
name: "父节点11 - 折叠",
children: [
{ name: "叶子节点111" },
{ name: "叶子节点112" },
{ name: "叶子节点113" },
{ name: "叶子节点114" }
]
},
{
name: "父节点12 - 折叠",
children: [
{ name: "叶子节点121" },
{ name: "叶子节点122" },
{ name: "叶子节点123" },
{ name: "叶子节点124" }
]
},
{ name: "父节点13 - 没有子节点", isParent: true }
]
},
{
name: "父节点2 - 折叠",
children: [
{
name: "父节点21 - 展开", open: true,
children: [
{ name: "叶子节点211" },
{ name: "叶子节点212" },
{ name: "叶子节点213" },
{ name: "叶子节点214" }
]
},
{
name: "父节点22 - 折叠",
children: [
{ name: "叶子节点221" },
{ name: "叶子节点222" },
{ name: "叶子节点223" },
{ name: "叶子节点224" }
]
},
{
name: "父节点23 - 折叠",
children: [
{ name: "叶子节点231" },
{ name: "叶子节点232" },
{ name: "叶子节点233" },
{ name: "叶子节点234" }
]
}
]
},
{ name: "父节点3 - 没有子节点", isParent: true }

];

$(document).ready(function () {

treeshow();

$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});

function treeshow() {
$.ajax({
type: "post",
url: "/Home/TreeIndex",
async: false,
success: function (data) {
zNodes = data;
}
});
}

function onMouseDown(event, treeId, treeNode) {
$.ajax({
type: "post",
url: "/Home/ShowIndex",
data: { path: treeNode.path },
async: false,
success: function (data) {
$(data).each(function (index, item) {
var html = ‘<td style="float: left">‘ +
‘<img src="~/zTree/timg.jpg" style = "width:50px;height:50px;" />‘ +
‘<input type="checkbox" value="‘ + item.name + ‘"/>‘ + item.name + ‘(‘ + item.size + ‘)‘ +
‘</td >‘;
$("#trrr").append(html);
})

}
});
}
</script>

//div

<div style="float:left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div style="float:right">
<table>
<tr id="trrr"></tr>
</table>
</div>

ztree示例

原文：https://www.cnblogs.com/LLC0903/p/10153607.html