zTree的使用2
前台代码：
@using Models; @{ Layout = "~/Views/Shared/_Layout.cshtml"; } <link type="text/css" href="~/Scripts/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" /> <script type="text/javascript" src="~/Scripts/zTree/js/jquery.ztree.all-3.5.min.js"></script> <script type="text/javascript" src="~/Scripts/jquery-treeview/lib/jquery.cookie.js"></script> <style type="text/css"> a { text-decoration: none; color: #000; } </style> <script type="text/javascript"> $(function () { loadTree(); });//end $ function loadTree(callback) { //ztree设置 var setting = { data: { simpleData: { enable: true, idKey: "id", pIdKey: "pId", rootPId: null } }, view: { selectedMulti: false }, callback: { onClick: zTreeOnClick, onExpand: onExpand, onCollapse: onCollapse } }; $.ajax({ type: "POST", url: "/Admin/ChannelManage/GetData", success: function (data) { if (data && data.length != 0) { $.fn.zTree.init($("#tree"), setting, data); var treeObj = $.fn.zTree.getZTreeObj("tree"); var cookie = $.cookie("z_tree" + window.location); if (cookie) { z_tree = JSON.parse(cookie); for (var i = 0; i < z_tree.length; i++) { var node = treeObj.getNodeByParam('id', z_tree[i]) treeObj.expandNode(node, true, false) } } if (callback) { callback(); } } } }); } //end loadTree function zTreeOnClick(event, treeId, treeNode) { $(".table-data").find("input").val(""); $(".table-data").find("select").val(""); $("#iconUrl").parent().html('<img alt="" src="" id="iconUrl" style="height: 100px;" />'); if (!treeNode.isSite) { $("#site").val(treeNode.site.title); $("#title").val(treeNode.channel.title); if (treeNode.parentChannel) { $("#parentChannel").val(treeNode.parentChannel.title); } else { $("#parentChannel").val("无"); } $("#listType").val(treeNode.channel.listType); $("#displayPos").val(treeNode.channel.displayPos); $("#sort").val(treeNode.channel.sort); $("#iconUrl").attr("src", treeNode.channel.iconUrl); } } function onExpand(event, treeId, treeNode) { var cookie = $.cookie("z_tree" + window.location); var z_tree = new Array(); if (cookie) { z_tree = JSON.parse(cookie); } if ($.inArray(treeNode.id, z_tree) < 0) { z_tree.push(treeNode.id); } $.cookie("z_tree" + window.location, JSON.stringify(z_tree)) } function onCollapse(event, treeId, treeNode) { var cookie = $.cookie("z_tree" + window.location); var z_tree = new Array(); if (cookie) { z_tree = JSON.parse(cookie); } var index = $.inArray(treeNode.id, z_tree); z_tree.splice(index, 1); for (var i = 0; i < treeNode.children.length; i++) { index = $.inArray(treeNode.children[i].id, z_tree); if (index > -1) z_tree.splice(index, 1); } $.cookie("z_tree" + window.location, JSON.stringify(z_tree)) } //添加 function add() { var treeObj = $.fn.zTree.getZTreeObj("tree"); var nodes = treeObj.getSelectedNodes(); if (nodes.length == 0) { alert("请选中一个节点"); return; } $.iDialog({ title: '新增-栏目', height: "400px", width: "500px", content: "url:/Admin/ChannelManage/Add?isSite=" + nodes[0].isSite + "&pId=" + nodes[0].id.replace("site", "") }); } //修改 function edit() { var treeObj = $.fn.zTree.getZTreeObj("tree"); var nodes = treeObj.getSelectedNodes(); if (nodes.length == 0) { alert("请选中一个节点"); return; } if (nodes[0].isSite) { alert("根节点是站点，不能修改"); return; } $.iDialog({ title: '修改-栏目', height: "500px", width: "500px", content: "url:/Admin/ChannelManage/Edit?id=" + nodes[0].id }); } //删除 function del() { var treeObj = $.fn.zTree.getZTreeObj("tree"); var nodes = treeObj.getSelectedNodes(); if (nodes.length == 0) { alert("请选中一个节点"); return; } if (nodes[0].isSite) { alert("根节点是站点，站点不能删除"); return; } if (confirm("确定删除？")) { $.ajax({ url: "/Admin/ChannelManage/Del", type: "POST", data: { id: nodes[0].id }, success: function (data) { if (data == "OK") { alert("删除成功"); treeObj.removeNode(nodes[0]); $(".input-text").val(""); $(".table-data").find("select").val(""); } else { alert("删除失败：" + data); } } }); } } //刷新 function refresh() { var treeObj = $.fn.zTree.getZTreeObj("tree"); var nodes = treeObj.getSelectedNodes(); var id = nodes[0].id; loadTree(function () { treeObj = $.fn.zTree.getZTreeObj("tree"); nodes = treeObj.getNodesByParam("id", id); treeObj.selectNode(nodes[0]); treeObj.setting.callback.onClick(null, treeObj.setting.treeId, nodes[0]); }); } </script> <div id="easyui-layout" class="easyui-layout" style="height: 450px;"> <div data-options="region:'north',border:false" style="height: 35px;"> <div class="toolbar"> @if (ViewBag.addRights) { <a class="a-btn" href="javascript:void(0);" onclick="add()"> <img alt="" src="~/Content/images/add2.gif" /> 添加栏目 </a> } @if (ViewBag.editRights) { <a class="a-btn" href="javascript:void(0);" onclick="edit()"> <img alt="" src="~/Content/images/edit.gif" /> 修改栏目 </a>} @if (ViewBag.delRights) { <a class="a-btn" href="javascript:void(0);" onclick="del()"> <img alt="" src="~/Content/images/del2.gif" /> 删除 </a> } </div> </div> <div id="west" data-options="region:'west'" style="width: 30%; border-left: 0; border-bottom: 0;"> <div style="height: 100%; overflow: auto;"> <div id="tree" class="ztree" style="padding-left: 5px;"> </div> </div> </div> <div id="center" data-options="region:'center'" style="border-left: 0; border-bottom: 0;"> <table class="table-data" cellpadding="0" cellspacing="0"> <tr> <td class="td-title" style="width: 35%;"> <span>所属站点：</span> </td> <td> <input id="site" type="text" class="input-text" disabled="disabled" style="width: 60%;" /> </td> </tr> <tr> <td class="td-title"> <span>栏目名称：</span> </td> <td> <input id="title" type="text" class="input-text" disabled="disabled" style="width: 60%;" /> </td> </tr> <tr> <td class="td-title"> <span>父级栏目：</span> </td> <td> <input id="parentChannel" type="text" class="input-text" disabled="disabled" style="width: 60%;" /> </td> </tr> <tr> <td class="td-title"> <span>栏目列表类型：</span> </td> <td> <select class="select" id="listType" name="listType" disabled="disabled"> <option value=""></option> <option value="1">文字列表</option> <option value="2">图片列表</option> <option value="3">单篇文章</option> <option value="4">页面链接</option> <option value="5">父级栏目</option> </select> </td> </tr> <tr> <td class="td-title"> <span>栏目显示：</span> </td> <td> <select class="select" id="displayPos" name="displayPos" disabled="disabled"> <option value=""></option> <option value="1">顶部导航栏</option> <option value="2">不显示</option> </select> </td> </tr> <tr> <td class="td-title"> <span>排序：</span> </td> <td> <input id="sort" type="text" class="input-text" disabled="disabled" style="width: 40px;" /> </td> </tr> <tr> <td class="td-title" style="border-bottom: solid 1px #ddd;"> <span>栏目图标：</span> </td> <td style="border-bottom: solid 1px #ddd;"> <img alt="" src="" id="iconUrl" style="height: 100px;" /> </td> </tr> </table> </div> </div> <script type="text/javascript"> $("#easyui-layout").height($(window).height()); </script>
后台代码：
public ActionResult GetData() { List<cms_site_ext> siteListAll = m_SiteDal.GetListAll(); List<cms_channel_ext> channelListAll = m_ChannelDal.GetListAll(); List<Dictionary<string, object>> dicList = new List<Dictionary<string, object>>(); foreach (cms_site_ext site in siteListAll) { Dictionary<string, object> dic = new Dictionary<string, object>(); dic.Add("id", "site" + site.id.ToString()); dic.Add("pId", null); dic.Add("name", site.title); dic.Add("open", "true"); dic.Add("isSite", true); //自定义属性 dicList.Add(dic); } foreach (cms_channel_ext channel in channelListAll) { Dictionary<string, object> dic = new Dictionary<string, object>(); dic.Add("id", channel.id.ToString()); dic.Add("pId", channel.parentId == -1 ? "site" + channel.siteId.ToString() : channel.parentId.ToString()); dic.Add("name", channel.title); dic.Add("isSite", false); //自定义属性 dic.Add("channel", channel); dic.Add("site", siteListAll.Find(a => a.id == channel.siteId)); dic.Add("parentChannel", channel.parentId == -1 ? null : channelListAll.Find(a => a.id == channel.parentId)); dicList.Add(dic); } return Json(dicList); }
