本次使用的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 },
async: {//异步加载
enable:true,
type:"post",
url:$("#treeDataUrl").val()
},
data: { simpleData: { enable: true } } }; $(function () {
$.fn.zTree.init($("#treeDemo"), setting, eval(data));
});
</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); }
效果
