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

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

2024-07-29 02:49:59   221人阅读

一、下载zTree插件 地址：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' onfocus='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());
            }
        }
    }
}

四、效果图






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


联系
我们