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

最新推荐文章于 2019-04-26 16:45:42 发布

转载最新推荐文章于 2019-04-26 16:45:42 发布 · 171 阅读

文章标签：

#ui #xhtml #json

本文介绍如何利用zTree插件创建一个具备异步加载功能的动态树状结构，包括HTML页面配置、JavaScript设置及后端数据处理等关键步骤。

一、下载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());
            }
        }
    }
}

四、效果图