jstree创建无限分级树的方法【基于ajax动态创建子节点】


Posted in Javascript onOctober 25, 2016

本文实例讲述了jstree创建无限分级树的方法。分享给大家供大家参考,具体如下:

首先来看一下效果

页面加载之初

jstree创建无限分级树的方法【基于ajax动态创建子节点】

节点全部展开后

jstree创建无限分级树的方法【基于ajax动态创建子节点】

首先数据库的表结构如下

jstree创建无限分级树的方法【基于ajax动态创建子节点】

其中Id为主键,PId为关联到自身的外键

两个字段均为GUID形式

层级关系主要靠这两个字段维护

其次需要有一个类型

public class MenuType
{
    public Guid Id { get; set; }
    public Guid PId { get; set; }
    public string MenuName { get; set; }
    public string Url { get; set; }
    public int OrderNum { get; set; }
    public int SonCount { get; set; }
}

此类型比数据库表增加了一个属性

SonCount

这个属性用来记录当前节点的子节点的个数

注意:也可以把此属性放在数据库中,性能上会提升一些,但需要增加额外的代码来维护此字段

接下来看一下取数据的方式

protected void Page_Load(object sender, EventArgs e)
{
  if (Request["Action"] == "AJAX")
  {
    var result = GetMenu(Request["pid"]);
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    string sRet = serializer.Serialize(result);
    Response.Write(sRet);
    Response.End();
  }
}

页面加载之初判断是否需要获取菜单数据

其中请求参数pid为客户端需要获取的节点ID

如果请求顶级节点,则此参数的值为00000000-0000-0000-0000-000000000000

GetMenu函数获取需要请求的节点数据

private List<MenuType> GetMenu(string pid)
{
  var result = new List<MenuType>();
  SqlConnection conn = new SqlConnection("Data Source=.;Initial Catalog=SHU;User ID=sa;Password=allen;");
  conn.Open();
  SqlCommand cmd = new SqlCommand();
  cmd.Connection = conn;
  cmd.CommandText = "select a.*,b.cout as count from Menu a left join (select COUNT(*) as cout,Menu.PId from Menu group by Menu.PId) as b on a.Id = b.PId where a.PId = '" + pid + "' order by OrderNum";
  SqlDataReader dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
  while (dr.Read())
  {
    var obj = new MenuType();
    obj.Id =Guid.Parse(dr["Id"].ToString());
    obj.MenuName = dr["MenuName"].ToString();
    obj.OrderNum = Convert.ToInt32(dr["OrderNum"]);
    obj.PId = dr["PId"] == DBNull.Value ? Guid.Empty : Guid.Parse(dr["PId"].ToString());
    obj.Url = dr["Url"].ToString();
    obj.SonCount = dr["count"] == DBNull.Value ? 0 : Convert.ToInt32(dr["count"]);
    result.Add(obj);
  }
  return result;
}

在本DEMO中使用JavaScriptSerializer来序列化菜单数组

前台的代码如下

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
  <link href="Scripts/themes/default/style.css" rel="stylesheet" type="text/css" />
  <script src="Scripts/jquery.js" type="text/javascript"></script>
  <script src="Scripts/jquery.jstree.js" type="text/javascript"></script>
  <script>
    $(function () {
      $.getJSON("/default.aspx?ACTION=AJAX&pid=00000000-0000-0000-0000-000000000000", function (result) {
        $.each(result, function (i, item) {
          var typeN = item.SonCount > 0 ? "jstree-closed" : "jstree-leaf";
          $("#tree").append("<li id='phtml_" + item.Id + "' class='" + typeN + "'><a href='#'>" + item.MenuName + "</a></li>");
        });
        $("#demo2").jstree({
          "plugins": ["themes", "html_data", 'types', "ui", "checkbox"],
          'core': { 'animation': 0 },
          "types": { "types":
                {
                  "person": { "icon": { "image": "/Scripts/themes/default/person.png"} },
                  "depar2": { "icon": { "image": "/Scripts/themes/default/depar2.png"} },
                  "default": { "icon": { "image": "/Scripts/themes/default/depar1.png"} }
                }
          }
        }).bind("open_node.jstree", function (e, data) {
          var id = data.rslt.obj[0].id;
          if ($("#" + id + " li").length > 0) { return; }
          $.getJSON("/default.aspx?ACTION=AJAX&pid=" + id.replace("phtml_", ""), function (result) {
            var str = "<ul>"
            $.each(result, function (i, item) {
              var typeN = item.SonCount > 0 ? "jstree-closed" : "jstree-leaf";
              var icon = item.SonCount > 0 ? "depar2" : "person";
              str += "<li rel = '" + icon + "' id='phtml_" + item.Id + "' class='" + typeN + "'><a href='#'> " + item.MenuName + "</a></li>";
            });
            str += "</ul>";
            $("#" + id).append(str);
            var tree = jQuery.jstree._reference("#" + id);
            tree.refresh();
            $("ins[class='jstree-checkbox jstree-icon']").removeClass("jstree-icon");
            $(".jstree-checkbox").attr("style", "");
          });
        });
      });
    });
  </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  <div id="demo2">
  <ul id="tree">
  </ul>
  </div>
</asp:Content>

页面加载之初,先请求顶级节点

如果顶级节点的SonCount属性大于0

则使节点为闭合状态(样式为jstree-closed)

如果节点无子节点

则该节点的样式为jstree-leaf

当用户点击闭合状态的节点时,客户端发起请求

并把点击节点的ID传给后端,后端获取到点击节点的子节点后

通过append添加到点击节点下

至此,无限分级的树创建完成

其中不包含数据库

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Javascript 日期对象Date扩展方法
May 30 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
Dec 06 Javascript
jQuery内置的AJAX功能和JSON的使用实例
Jul 27 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 Javascript
mac上配置Android环境变量的方法
Jul 08 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
vue中添加与删除关键字搜索功能
Oct 12 Javascript
input file上传 图片预览功能实例代码
Oct 25 #Javascript
Node.js开启Https的实践详解
Oct 25 #Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 #Javascript
利用yarn实现一个webpack+react种子
Oct 25 #Javascript
Yarn的安装与使用详细介绍
Oct 25 #Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 #Javascript
jquery popupDialog 使用 加载jsp页面的方法
Oct 25 #Javascript
You might like
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
php中echo()和print()、require()和include()等易混淆函数的区别
2012/02/22 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
DWZ+ThinkPHP开发时遇到的问题分析
2016/12/12 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
JavaScript this 深入理解
2009/07/30 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
vue.js实现的绑定class操作示例
2018/07/06 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
windows下numpy下载与安装图文教程
2019/04/02 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
台湾旅游网站:灿星旅游
2018/10/11 全球购物
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
财务出纳岗位职责
2014/02/03 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
大学军训的体会
2014/11/08 职场文书
阿甘正传观后感
2015/06/01 职场文书
地雷战观后感
2015/06/09 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏
SQL中的连接查询详解
2022/06/21 SQL Server