首页 > 代码库 > zTree的运用
zTree的运用
之前做了一个分类，是一个不限级别的，就用树的方式展示出来的
首先添加引用
<script src="http://www.mamicode.com/~/Scripts/jquery.ztree.core-3.5.js"></script>
<script src="http://www.mamicode.com/~/Scripts/jquery.ztree.exedit-3.5.js"></script>
下面就写写他的实现，首先
html
<td style="width: 500px;" valign="top"><ul id="treeDemo" class="ztree"></ul></td>
js代码
首先在页面加载的时候
$(document).ready(function () { /// <summary>绑定一级分类</summary> var treeNodes = eval(‘@Html.Raw(ViewData["zTree"])‘); $.fn.zTree.init($("#treeDemo"), setting, treeNodes); });
定义zTree
//Tree var setting = { edit: { enable: true, showRemoveBtn: setRemoveBtn, removeTitle: "删除", showRenameBtn: false }, async: { enable: true, url: "/InfoSection/GetChild", autoParam: ["id"], otherParam: [], dataFilter: null }, data: { simpleData: { enable: true } }, callback: { beforeClick: null, onClick: function(event, treeId, treeNode) { //节点的点击事件 var id = treeNode.id; var tid = treeNode.tId; $("#Id").val(id); $("#hidTid").val(tid); $("#typeName").html("当前分类"); $("#divAdd").show(); $("#divArea").show(); if (id > 0) { $("#tdInfo").hide(); $("#hidType").val("2"); //修改 var objLoad = $("#tdRefresh"); objLoad.html("<img src=http://www.mamicode.com/‘/Content/Images/loading4.gif‘ id=‘childclassloadimgimg‘ />"); $.ajax({ url: "GetDetail?id=" + id, dataType: "json", cache: false, data: null, //提交整个表单 type: "POST", success: function (data) { $("#childclassloadimgimg").remove(); $("#tdInfo").show(); // console.dir(data); if (data.Id > 0) { $("#parent").html(""); $.each(data.pid, function(i, n) { $("#parent").append("<option value=http://www.mamicode.com/‘" + n.Value + "‘ >" + n.Text + "</option>"); }); $("#title").val(data.title); $("#imageUrl").val(data.imageUrl); $("#introduction").val(data.introduction); $("#content").val(data.content); $("#currentType").html(data.title); $("#hidIsCountry").val(data.IsCountry); $("#infoSectionId").val(data.infoSectionId); $("#spanChild").empty(); $("#Section").show(); } }, error: function() { alert("网络异常!"); } }); } else { $("#currentType").html("一级分类"); $("#title").val(""); $("#imageUrl").val(""); $("#introduction").val(""); $("#content").val(""); } }, beforeRemove: zTreeBeforeRemove, onRemove: zTreeOnRemove }, keep: { parent: true } }; function zTreeOnRemove(event, treeId, treeNode) { // alert(treeNode.id + ", " + treeNode.name); };
//删除树的节点 function zTreeBeforeRemove(treeId, treeNode) { //Ajax删除数据 $.ajax({ url: "Del?key=" + treeNode.id, dataType: "json", cache: false, data: null, type: "POST", success: function(data) { if (data.Status == 0) { alert("[提示]" + data.ErrMsg); return false; } else { // window.location.href = "http://www.mamicode.com/Geographic/Index"; return true; } }, error: function() { alert("删除失败!"); return false; } }); }; function setRemoveBtn(treeId, treeNode) { //判断为顶级节点则不显示删除按钮 // alert(treeNode.id); if (treeNode.id == 0) return false; else return true; } function setEdit() { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); zTree.setting.edit.showRemoveBtn = true; zTree.setting.edit.showRenameBtn = false; zTree.setting.edit.removeTitle = "删除"; } var log, className = "dark"; function beforeClick(treeId, treeNode, clickFlag) { className = (className === "dark" ? "" : "dark"); //showLog("[ " + getTime() + " beforeClick ] " + treeNode.name); return (treeNode.click != false); } function showLog(str) { if (!log) log = $("#log"); log.append("<li class=‘" + className + "‘>" + str + "</li>"); if (log.children("li").length > 8) { log.get(0).removeChild(log.children("li")[0]); } } function getTime() { var now = new Date(), h = now.getHours(), m = now.getMinutes(), s = now.getSeconds(); return (h + ":" + m + ":" + s); } function filter(treeId, parentNode, childNodes) { if (!childNodes) return null; for (var i = 0, l = childNodes.length; i < l; i++) { childNodes[i].name = childNodes[i].name.replace(/\.n/g, ‘.‘); } return childNodes; }
Controller控制器代码
#region 对树的操作 /// <summary> /// 转化为树的Simple格式 /// </summary> /// <param name="model"></param> /// <returns></returns> private Hashtable FormtSimpData(InfoSection model) { var hashResult = new Hashtable(); hashResult["name"] = model.Title; hashResult["id"] = model.Id; hashResult["pId"] = 0; hashResult["isParent"] = "true"; return hashResult; } /// <summary> /// 得到左边树结构下级分类 /// </summary> /// <returns></returns> [AuthorizationCodeAttribute] [Description("查询分类目录")] [HttpPost] public ActionResult GetChild() { string strId = Request.Params["id"]; List<Hashtable> hashSectionList = new List<Hashtable>(); int id = 0; int.TryParse(strId, out id); if (id > 0) { InfoSectionOperator dal = new InfoSectionOperator(); IList<InfoSection> ilList = dal.GetList(string.Format("ParentId={0}", id)); if (ilList.Count > 0) { hashSectionList.AddRange(ilList.Select(FormtSimpData)); } } return Json(hashSectionList, JsonRequestBehavior.AllowGet); } #region 文章栏目的删除 [AuthorizationCodeAttribute] [Description("删除树的节点")] public ActionResult Del(int? key) { var dal = new InfoSectionOperator(); string ids = GetChildIds(key ?? 0); dal.Delete(string.Format("Id in ({0})", ids)); return Json(new JsonMsg() { Status = 1, ErrMsg = "删除成功!" }); } #endregion
取树的一级节点数据
public ActionResult Add() { #region 显示一级节点 IList<InfoSection> list = dal.GetList(string.Format("ParentId=0")); list.Insert(0, new InfoSection() { Id = 0, Title = "根目录" }); List<Hashtable> hashInfoSection = list.Select(FormtSimpData).ToList(); string strResult = JsonConvert.SerializeObject(hashInfoSection); ViewData["zTree"] = strResult; #endregion #endregion return View(); } #endregion
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。