jQuery树形菜单,使用zTree插件,异步加载 &

页面导航:首页 > 网络编程 > JavaScript > jQuery树形菜单,使用zTree插件,异步加载 &

jQuery树形菜单,使用zTree插件,异步加载 &

来源: 作者: 时间:2016-02-20 09:49 【

一、下载zTree插件 地址:http: www ztree me二、HTML代码 var setting = { as

一、zTree插件 地址:http://www.ztree.me


二、HTML代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="zTree.x.cs" Inherits="CssStudyWeb.zTree" %>





    
    
    
    
    <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 = "";
        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>


    


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

    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());
                }
            }
        }
    }

    四、效果图






    Tags:

    文章评论

    最 近 更 新
    热 点 排 行
    Js与CSS工具
    代码转换工具
    
    <