MVC4加载zTree树小控件

前言：

　　第一次学习使用MVC框架，找了个练手项目，加载zTree树小控件。下面我就一步步说明我这次练手的经历以记录。如果有什么错误，希望各位大神帮忙指正，谢谢。

第一步：

　　利用VS2010新建一个MVC4项目TestDemo（为了开发ASP.NET MVC应用，可能你需要先下载并安装ASP.NET MVC4框架），然后在Controllers文件夹下创建DefaultController.cs文件，然后打开该文件，鼠标指向Index函数右键创建对应View视图，它会默认在Views文件下创建Default文件并创建对应视图。

第二步：

　　在刚创建的Index视图中加载相应所需的js以及css文件，并且配置zTree信息。代码如下：

@{

    Layout = null;

}

<!DOCTYPE html>

<link href="~/Scripts/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />

<script src="~/Scripts/js/jquery-1.4.4.min.js"></script>

<script src="~/Scripts/js/jquery.ztree.all.js"></script>

<script src="~/Scripts/js/jquery.ztree.all.min.js"></script>

<script>

    var setting4 = {

        data: {

            simpleData: {

                enable: true,

                idKey: "id",

                pIdKey: "pId",

                rootPId:

            }

        },

        async: {

            //异步加载

            enable: true,

            url: "/Default/AsyncGetNodes",

            autoParam: ["id", "name", "pId"]

        },

        callback: {

            beforeExpand: beforeExpand,

            onAsyncSuccess: onAsyncSuccess,

            onAsyncError: onAsyncError,

            onClick: onClick

        }

    };

    function beforeExpand(treeId, treeNode) {

        if (!treeNode.isAjaxing) {

            return true;

        } else {

            alert("zTree 正在下载数据，请稍后展开节点。。。");

            return false;

        }

    }

    function onAsyncSuccess(event, treeId, treeNode, msg) {

    }

    function onAsyncError() {

        alert("数据加载失败");

    }

    function onClick(e, treeId, treeNode) {

    }

</script>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

</head>

<body>

    <div id="navTree">

        <ul id="tree" class="ztree"></ul>

    </div>

</body>

</html>

第三步：

　　ajax请求创建树，这个地方从后台传回的json数据，需要两次eval装换方可成json对象，这个地方一直困惑了我很久。希望有大神可以解答为神马。谢谢哦。

$(function () {

        createTree();

    })

function createTree() {

        $.ajax({

            url: "/Default/AsyncGetNodes",

            data: { id:  },

            type: 'Get',

            dataType: "text",

            success: function (data) {

                alert(data);

                data = eval('(' + data + ')');

                alert(data);

                data = eval('(' + data + ')');

                alert(data);

                $.fn.zTree.init($("#tree"), setting4, data);

            },

            error: function (msg) {

                alert("数据加载失败！" + msg);

            }

        });

    }

以及控制器AsyncGetNodes的相关源码

public ActionResult AsyncGetNodes()

        {

            string mmResult = App.DtTozTree_XYS("", , true, "", true);

            return Json(mmResult, JsonRequestBehavior.AllowGet);

        }

后台传回data数据，第一次alert，第一次eval转换并alert，第二次eval装换并alert

虽然转换多次，终归想要的结果出来了，当然这中间再webconfig配置oracle数据信息，以及刚在的App函数，这个每个人形成各异，这里我就不在赘述，寥寥数言，希望各位指点。

巴特西

MVC4加载zTree树小控件

最新文章

热门文章