C#使用Jquery zTree实现树状结构显示 异步数据加载_C#教程

C#使用Jquery zTree实现树状结构显示_异步数据加载

JQuery-Ztree下载地址:https://github.com/zTree/zTree_v3

JQuery-Ztree数结构演示页面:  http://www.treejs.cn/v3/demo.php

关于zTree的详细解释请看演示页面,还有zTree帮助Demo。 

下面简要讲解下本人用到的其中一个实例(直接上关键代码了):

异步加载节点数据: 

A-前台:

<link href="zTree_v3-master/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
 <script src="zTree_v3-master/js/jquery.ztree.core.js" type="text/javascript"></script>
 <script language="JavaScript" type="text/javascript">
 var setting = {
  async: {
   enable: true,
   url: "../Handler/ShoppingHandler.ashx", //请求的一般处理程序
   autoParam: ["id"],       //自带参数id--来自于节点id
   otherParam: { "type": "GetUserLevelList" }, //其他参数自定义
   dataFilter: filter, //数据过滤
   type: "post" //请求方式
  }
 };

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

 $(document).ready(function () {
  $.fn.zTree.init($("#treeDemo"), setting); //渲染树结构
 });
 </script>
<div class="zTreeDemoBackground left">
  <ul id="treeDemo" class="ztree"></ul>
</div>

B后台:

using MobileBusiness.Common.Data;
using MobileBusiness.Library.Passport;
using MobileBusiness.Shopping.Data;
using MobileBusiness.Shopping.Data.Common;
using MobileBusiness.Shopping.Data.Entity;
using MobileBusiness.Web.Library.Script;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using ShoppingData = MobileBusiness.Shopping.Data.Entity;

namespace MobileBusiness.Shopping.BusinessManage.Handler
{
 /// <summary>
 /// Shopping 的摘要说明
 /// </summary>
 public class ShoppingHandler : IHttpHandler
 {
  //当前登录用户信息
  WeChatUser weChatUser = WeChatIdentity.CurrentUser;

  public void ProcessRequest(HttpContext context)
  {
   string result = "";
   if (context.Request["type"] != null)
   {
    string requestType = context.Request["type"];

    try
    {
     switch (requestType)
     {
      //获取用户信息等级列表
      case "GetUserLevelList":
       result = this.GetUserLevelList(context); break;
      default:
       break;
     }
    }
    catch (Exception ex)
    {
     result = ex.Message;
    }
   }

   context.Response.ContentType = "text/html";
   context.Response.Write(result);
   context.Response.End();
  }

  private string GetUserLevelList(HttpContext context)
  {
   string parentUserPhone = context.Request["id"];
   return GetUserCollByPhone(parentUserPhone);
  }
  private string GetUserCollByPhone(string phone)
  {
   //编码,父编码,名称,是否打开,打开图片,关闭图片
   //{ id:1, pId:0, name:"展开、折叠 自定义图标不同", open:true, iconOpen:"../../../css/zTreeStyle/img/diy/1_open.png", iconClose:"../../../css/zTreeStyle/img/diy/1_close.png"},
   //编码,父编码,名称,是否打开,显示图片
   //{ id: 11, pId: 1, name: "叶子节点1", icon: "../../../css/zTreeStyle/img/diy/2.png"},
   List<object> result = new List<object>();

   ShoppingData.UserInfoCollection userColl = ShoppingData.UserInfoAdapter.Instance.LoadByParentUserPhone(phone);
   userColl.ForEach(user =>
   {
    result.Add(new
    {
     id = user.Phone,
     pid = phone,
     name = user.UserName,
     isParent = ShoppingData.UserInfoAdapter.Instance.LoadByParentUserPhone(user.Phone).Count > 0 ? true : false
    });
   });
   return JsonConvert.SerializeObject(result);
  }
  public bool IsReusable
  {
   get
   {
    return false;
   }
  }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, zTree树状结构
, C#异步加载
zTree树状结构显示
c站、c语言、cf、ch、c罗,以便于您获取更多的相关知识。

时间: 2024-11-05 20:39:06

C#使用Jquery zTree实现树状结构显示 异步数据加载_C#教程的相关文章

基于jquery的finkyUI插件与Ajax实现页面数据加载功能_jquery

复制代码 代码如下: <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/json.js"></script> <script type="text/javascript" src="js/jquer

“中值排序基数法实现树状结构”的补充

排序 "中值排序基数法实现树状结构"的补充     由于一时疏忽,造成了此法"对于int类型的基数字段,对原始贴的回复只能有31个:numeric类型的基数字段,对原始贴的回复也不能超过120个"(实际上是对于int型字段,原始贴的回复第32个以上的树状结构显示开始紊乱,对于numeric型的基数字段,原始贴的回复从121个以上树状结构显示开始紊乱--回复并不会出问题),这是由于计算机存储精度引起的.    我们可以将加贴的存储过程修改一下(加进前面加上**号的行)

由简入繁实现Jquery树状结构的方法(推荐)_jquery

在项目中,我们经常会需要一些树状结构的样式来显示层级结构等,比如下图的样式,之前在学.net的时候可以直接拖个服务端控件过来直接使用非常方便.但是利用Jquery的一些插件,也是可以实现这些效果的,比如说Jquery.treeview.js插件. 下面就直入主题,开始从简入繁的分析怎么使用treeview插件,从已知的知识开始轻松入手,让树状结构唾手可得. 显示树状结构的几个实现步骤: 一.HTML做初始静态原型. 首先通过<ul></ul><li></li>

实现树状结构的两种方法

实现树状结构的两种方法1.递归法递归是指在函数中显式的调用它自身.利用递归法实现树状结构的特点是写入数据速度较快,显示速度较慢(在树的分支/层次较多的情况下尤其明显).适用与写入数据量大,树的结构复杂的情况下.数据结构(以mysql为例) 代码:--------------------------------------------------------------------------------CREATE TABLE `tree1` ( `id` tinyint(3) unsigned

使用“使用中值排序基数法”实现树状结构(一)

排序|排序 在BBS的编写中,经常有人问怎样实现树状结构?一个比较不负责任的回答是:使用递归算法.当然,递归是一个可行的办法(二叉树的历遍也好象只能使用递归算法),但对于BBS来说,这样做势必要进行大量的Sql查询(虽然可以使用存储过程来做,但要从根本上加快速度,则应该考虑更快的算法). 下面给出一个可行的彻底屏弃递的实现树状结构的算法. 下面给出另一种使用"使用中值排序基数法"实现树状结构: 一.主要思想:增加一个排序基数字段ordernum,回复同一根贴的贴子中插入贴子时,排序

用PHP程序实现树状结构的两种方法

程序 1.递归法 递归是指在函数中显式的调用它自身. 利用递归法实现树状结构的特点是写入数据速度较快,显示速度较慢(在树的分支/层次较多的情况下尤其明显).适用与写入数据量大,树的结构复杂的情况下. 数据结构(以mysql为例) 代码: CREATE TABLE `tree1` ( `id` tinyint(3) unsigned NOT NULL auto_increment, `parentid` tinyint(3) unsigned NOT NULL default '0', `topi

用排序串字段实现树状结构(原理)

排序     实现原理:以一排序字段(字符型实现排序),该字段的实际长度即为回复深度(用一位字符代表一层深度时).    所受限制:回复深度只受排序串定义长度的限制(有点象空间换深度),每贴回复数(包括根贴和子贴)为30左右(当sql server使用Dictionary order,case-insensitive排序方式,即不区分字母大小写时),如果sql server使用Binary orders排序方式时受限为127(255?).    改进方法:如果觉得不够用,可以使用多位字符对应一个

用中值排序基数法实现树状结构——让递归滚一边去

递归|排序 用中值排序基数法实现树状结构     在BBS的编写中,经常有人问怎样实现树状结构?一个比较不负责任的回答是:使用递归算法.当然,递归是一个可行的办法(二叉树的历遍也好象只能使用递归算法),但对于BBS来说,这样做势必要进行大量的Sql查询(虽然可以使用存储过程来做,但要从根本上加快速度,则应该考虑更快的算法).下面给出一个可行的彻底屏弃递的实现树状结构的算法.     下面给出另一种使用"使用中值排序基数法"实现树状结构:一.主要思想:增加一个排序基数字段ordernum

关于bigeagle的树状结构存储过程的一点看法

存储过程 大鹰,关于你在精华区的树状结构存储过程的贴子的内容好像不对呀,我做了实验,只能取根帖,我改了一下,在query analyzer中可以,但在页面上只能显示出一部分,你帮忙看一下好吗             CREATE proc up_TopicList             @a_ForumID int ,  @a_intPageNo int , @a_intPageSize tinyint   as       declare @m_intRecordNumber int