jQuery树形菜单，使用zTree插件,异步加载 & 编辑功能&Check 共存

心已赠人 2022-08-10 12:42 223阅读 0赞

一、下载zTree插件 地址：[http://www.ztree.me][http_www.ztree.me]

二、HTML代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="zTree.aspx.cs" Inherits="CssStudyWeb.zTree" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <link href="zTree/css/demo.css" rel="stylesheet" />
        <link href="zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
        <script src="zTree/js/jquery-1.4.4.min.js"></script>
        <script src="zTree/js/jquery.ztree.core-3.5.js"></script>
        <script src="zTree/js/jquery.ztree.excheck-3.5.js"></script>
        <script src="zTree/js/jquery.ztree.exedit-3.5.js"></script>
       <script type="text/javascript">
           var setting = {
            async: {
                enable: true,
                url: "AjaxPage/GetAjax.aspx?z=sdfww234edfsd",
                autoParam: ["id"],
                dataFilter: filter,
                contentType: "application/json",
                type:"get"
            },
            view: {
                expandSpeed: "",
                addHoverDom: addHoverDom,
                removeHoverDom: removeHoverDom,
                selectedMulti: false
            },
            check: {
                enable: true
            },
            edit: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                beforeRemove: beforeRemove,
                beforeRename: beforeRename,
            }
        };
        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;
        }
        function beforeRemove(treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.selectNode(treeNode);
            return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
        }
        function beforeRename(treeId, treeNode, newName) {
            if (newName.length == 0) {
                alert("节点名称不能为空.");
                return false;
            }
            return true;
        }
    
        var newCount = 1;
        function addHoverDom(treeId, treeNode) {
            var sObj = $("#" + treeNode.tId + "_span");
            if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
            var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                + "' title='add node' οnfοcus='this.blur();'></span>";
            sObj.after(addStr);
            console.log("add   " + "#addBtn_" + treeNode.id);
            var btn = $("#addBtn_" + treeNode.tId);
            if (btn) btn.bind("click", function () {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.addNodes(treeNode, { id: (100 + newCount), pId: treeNode.id, name: "new node" + (newCount++) });
                return false;
            });
        };
        function removeHoverDom(treeId, treeNode) {
            console.log("remove   " + "#addBtn_" + treeNode.id);
            $("#addBtn_" + treeNode.tId).unbind().remove();
        };
        $(document).ready(function () {
            $.fn.zTree.init($("#treeDemo"), setting);
        });
       </script>
    </head>
    <body>
        <ul id="treeDemo" class="ztree" style="width: 560px; overflow: auto;"></ul>
    </body>
    </html>

三、异步请求的后台数据：

using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace CssStudyWeb.AjaxPage
    {
        public partial class GetAjax : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (Request.QueryString["z"] == "sdfww234edfsd")//根据会员卡号，查询会员卡信息
                {
                    StringBuilder sb = new StringBuilder();
                    sb.Append("[");
                    sb.Append("{\"id\":\"1\",\"name\":\"销售单管理\",\"pId\":\"0\"},");
                    sb.Append("{\"id\":\"101\",\"name\":\"销售单列表\",\"pId\":\"1\"},");
                    sb.Append("{\"id\":\"102\",\"name\":\"销售单综合查询\",\"pId\":\"1\"},");
    
                    sb.Append("{\"id\":\"2\",\"name\":\"系统管理\",\"pId\":\"0\"},");
                    sb.Append("{\"id\":\"103\",\"name\":\"权限组管理\",\"pId\":\"2\"},");
                    sb.Append("{\"id\":\"104\",\"name\":\"权限菜单管理\",\"pId\":\"2\"}");
                    sb.Append("]");
                    Response.Write(sb.ToString());
                }
            }
        }
    }

四、效果图

![Center][]

[http_www.ztree.me]: http://www.ztree.me
[Center]: /images/20220810/66f4f3642abf4f21896070ba467d2c4c.png