页面异步加载树形菜单

最新推荐文章于 2024-04-25 15:57:52 发布

小路乱撞

最新推荐文章于 2024-04-25 15:57:52 发布

阅读量968

点赞数

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

时间 2014-10-24 18:13:07 CSDN博客

原文

主题 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' ο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());
      }
    }
  }
}

四、效果图

小路乱撞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面异步加载树形菜单

jQuery树形菜单，使用zTree插件,异步加载 & 编辑功能&Check 共存时间 2014-10-24 18:13:07 CSDN博客原文主题 HTML JavaScript一、下载zTree插件地址： http://www.ztree.me二、HTML代码"C#" AutoEventWireup="true" CodeBehind="zT
复制链接

扫一扫