<link href="~/ZTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="~/ZTree/js/jquery-1.4.4.min.js"></script>
<script src="~/ZTree/js/jquery.ztree.all-3.5.min.js"></script>
 
<script type="text/javascript">
    //异步加载节点
    var setting4 =
        {
            data:
                {
                    simpleData:
                        {
                            enable: true,
                            idKey: "id",
                            pIdKey: "pId",
                            rootPId: 0
                        },
                    async:
                        {
                            //异步加载
                            enable: true,
                            url: "/api/values/",
                            autoParam: ["id", "name", "pId"]
                        },
                    callback:
                        {
                            beforeExpand: beforeExpand,
                            onAsyncSuccess: onAsyncSuccess,
                            onAsyncError: onAsyncError
                        }
                }
 
        }
    function createTree() {
        alert("进来");
        $.ajax({
            url: '/api/values/', //url  action是方法的名称
            data: { id: 0 },
            type: 'Get',
            dataType: "json", //可以是text，如果用text，返回的结果为字符串；如果需要json格式的，可是设置为json
            success: function (data) {
                $(data).each(function (index, obj) {
 
                    $.fn.zTree.init($("#treeDemo4"), setting4, eval('(' + obj.name + ')'));
                })
 
 
            },
            error: function (msg) {
                alert(" 数据加载失败！" + msg);
            }
 
        });
 
    }
    function beforeExpand(treeId, treeNode) {
        if (!treeNode.isAjaxing) {
            return true;
        } else {
            alert("zTree 正在下载数据中，请稍后展开节点。。。");
            return false;
        }
    }
 
    function onAsyncSuccess(event, treeId, treeNode, msg) {
 
    }
    function onAsyncError() {
        alert(" 数据加载失败");
    }
 
    $(document).ready(function () {
        createTree();
    });
</script>
 
<div>
    <ul id="treeDemo4" class="ztree"></ul>
</div>