MVC 3.0 Tree

页面分左右两部分，左边是一个导航树，右边是局部页，点击树节点，异步刷新右边的内容。加颜色部分是知识点。

@using VideoWeb.Models
@model VideoWeb.Models.CategoryManageModel
@{
    ViewBag.Title = "Resources";
    Layout = "~/Views/Shared/_ManageLayout.cshtml";
}
@section  Head{
    <link rel="stylesheet" href="@Url.Content("~/Content/JQueryzTree/css/zTreeStyle/zTreeStyle.css")" type="text/css">
    <script type="text/javascript" src="@Url.Content("~/Content/JQueryzTree/js/jquery.ztree.core-3.5.js")"></script>
    <script type="text/javascript">
        <!--
    var setting = {
        view: {
            showIcon: false
        },
        data: {
            key: {
                title: "t"
            },
            simpleData: {
                enable: true
            }
        },
        callback: {
            onClick: onClick
        }
    };
var zNodes = [
     @for (int i = 0; i < Model.Categories.Count; i++)
     {
         string pid = Model.Categories[i].CategoryOrder;
         pid = pid.Length > 3 ? pid.Remove(pid.Length - 3, 3) : "0";
         string strNode = string.Format("{5}{{id:{0}, pId:{1}, name:\"{2}\", t:\"{3}\", cateid:\"{4}\", open: true }}",
             Model.Categories[i].CategoryOrder,
             pid,
             Model.Categories[i].Name,
             Model.Categories[i].Name,
             Model.Categories[i].ResCategoryId, i == 0 ? string.Empty : ",");
             @Html.Raw(strNode)
     }
    ];
        var cid;
        function onClick(event, treeId, treeNode, clickFlag) {
            cid = treeNode.cateid;
            var strurl = "/manage/reslist/" + treeNode.cateid;
            refreshPanel(strurl);
        }
        function refreshPanel(strurl) {
            $.ajax({
                url: strurl,
                dataType: 'HTML',
                success: function (msg) {
                    $('#listPanel').html(msg);
                },
                error: function () {
                    alert("处理失败!");
                }
            });
        }
        function searchClick() {
            var s = $("#txtSearch").val();
            var strurl = "/manage/reslist/" + cid + "?s=" + s;
            refreshPanel(strurl);
        }

        $(document).ready(function () {
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            $("#btnSearch").click(searchClick);
        });
        //-->
    </script>
}
<div class="row-fluid">
    <div class="left span3">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
    <div class="span6">
        <input id="txtSearch" type="text" placeholder="搜索" /><input id="btnSearch" type="button" value="搜索" />
        <div id="listPanel">
            @Html.Action("ResList", new { id = Model.CurrentCategoryID })
        </div>
    </div>
</div>

 

转载于:https://www.cnblogs.com/LLLLoveLLLLife/p/3459688.html