zTree的运用

之前做了一个分类，是一个不限级别的，就用树的方式展示出来的

首先添加引用

<script src="~/Scripts/jquery.ztree.core-3.5.js"></script>
<script src="~/Scripts/jquery.ztree.exedit-3.5.js"></script>

下面就写写他的实现，首先

html

 <td style=" 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='/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='" + 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 = "/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 ]&nbsp;&nbsp;" + 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