码迷,mamicode.com
首页 > 其他好文 > 详细

zTree的运用

时间:2014-07-30 20:19:34      阅读:348      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   color   os   io   数据   

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

bubuko.com,布布扣

首先添加引用

<script src="~/Scripts/jquery.ztree.core-3.5.js"></script>
<script src="~/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=‘/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

 

zTree的运用,布布扣,bubuko.com

zTree的运用

标签:des   style   blog   http   color   os   io   数据   

原文地址:http://www.cnblogs.com/llxy/p/3878615.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!