标签：
本次使用的ztree插件，基本上所有的需求都能满足，可谓功能强大。
* [http://www.ztree.me/v3/api.php zTree v3.0 API 文档]
* [http://www.ztree.me/v3/demo.php#_101 zTree v3.0 Demo 演示]
* [http://www.ztree.me/v3/faq.php#_101 zTree v3.0 常见问题]
功能展示
|
|
 |
 |
 |
通过get获取数据：
html
@{
ViewBag.Title = "ZTree";
}
<link rel="stylesheet" href="@Url.Content("~/Scripts/tree/css/demo.css")" type="text/css">
<link rel="stylesheet" href="@Url.Content("~/Scripts/tree/css/zTreeStyle/zTreeStyle.css")" type="text/css">
<script src="@Url.Content("~/Scripts/tree/js/jquery.ztree.all-3.5.min.js")" type="text/javascript"></script>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree">
</ul>
</div>
</div>
@Html.Hidden("GetZtreeUrl", @Url.Action("TreeData"))
<script type="text/javascript">
var setting = {
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
}
};
$(document).ready(function () {
$.get($("#GetZtreeUrl").val(), {}, function (data) {
if (data != null) {
$.fn.zTree.init($("#treeDemo"), setting, eval(data));
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.setting.check.chkboxType = { "Y": "sp", "N": "sp" };
}
}, "json");
});
</script>
控制器
public ActionResult Tree()
{
return View();
}
public ActionResult TreeData()
{
string data = "[{ id: 1, pId: 0, name: \"随意勾选 1\", open: true },";
data += "{ id: 11, pId: 1, name: \"随意勾选 1-1\", open: true },";
data +="{ id: 111, pId: 11, name: \"随意勾选 1-1-1\" },";
data +="{ id: 112, pId: 11, name: \"随意勾选 1-1-2\" },";
data +="{ id: 12, pId: 1, name: \"随意勾选 1-2\", open: true },";
data +="{ id: 121, pId: 12, name: \"随意勾选 1-2-1\" },";
data +="{ id: 122, pId: 12, name: \"随意勾选 1-2-2\" },";
data +="{ id: 2, pId: 0, name: \"随意勾选 2\", checked: true, open: true },";
data +="{ id: 21, pId: 2, name: \"随意勾选 2-1\" },";
data +="{ id: 22, pId: 2, name: \"随意勾选 2-2\", open: true },";
data +="{ id: 221, pId: 22, name: \"随意勾选 2-2-1\", checked: true },";
data +="{ id: 222, pId: 22, name: \"随意勾选 2-2-2\" },";
data += "{ id: 23, pId: 2, name: \"随意勾选 2-3\" }]";
return Json(data, JsonRequestBehavior.AllowGet);
}
效果
标签：
原文地址：http://www.cnblogs.com/huangyin1213/p/5583398.html
