cari

Rumah  >  Artikel  >  hujung hadapan web  >  jQuery menggunakan pemalam zTree untuk melaksanakan menu pokok dan loading_jquery tak segerak

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

WBOY
WBOYasal
2016-05-16 15:13:221575semak imbas

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>

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

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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：js untuk menentukan sama ada kedudukan tetikus berada dalam kemahiran div_javascript tertentuArtikel seterusnya：js untuk menentukan sama ada kedudukan tetikus berada dalam kemahiran div_javascript tertentu

Artikel berkaitan

Lihat lagi