页面分左右两部分,左边是一个导航树,右边是局部页,点击树节点,异步刷新右边的内容。加颜色部分是知识点。
@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>