jQuery menggunakan pemalam zTree untuk melaksanakan menu pokok dan loading

jQuery menggunakan pemalam zTree untuk melaksanakan menu pokok dan loading_jquery tak segerak

WBOY

Lepaskan： 2016-05-16 15:13:22

asal

1546 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara jQuery menggunakan pemalam zTree untuk melaksanakan menu pokok dan pemuatan tak segerak, dan ia boleh diedit dan dikongsi dengan semua orang untuk rujukan anda. Kandungan khusus adalah seperti berikut

Rendering:

1. Kod HTML

<html>
<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&#63;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>

Salin selepas log masuk

2. Data latar belakang permintaan tak segerak:

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

Salin selepas log masuk

Di atas adalah semua kod untuk pemalam zTree untuk melaksanakan menu pokok dan pemuatan tak segerak, saya harap ia akan membantu pembelajaran semua orang.