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);

        }

效果