ztree插件(JQuery Tree)

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

效果