ztree插件(JQuery Tree)

最新推荐文章于 2024-09-14 18:52:56 发布

weixin_34166847

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量70

点赞数

文章标签： javascript json php ViewUI

本次使用的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);
        }