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 相关文章推荐
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
AngularJS学习笔记之表单验证功能实例详解
Jul 06 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
vue中,在本地缓存中读写数据的方法
Sep 21 Javascript
基于JavaScript实现单例模式
Oct 30 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
Aug 30 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
php 防止单引号,双引号在接受页面转义
2008/07/10 PHP
PHP中include与require使用方法区别详解
2013/10/19 PHP
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
php中创建和调用webservice接口示例
2014/07/25 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
jQuery live
2009/05/15 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
2012/06/14 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
Python如何实现MySQL实例初始化详解
2017/11/06 Python
python版学生管理系统
2018/01/10 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
python的pip安装以及使用教程
2018/09/18 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
python图像和办公文档处理总结
2019/05/28 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
Django用户身份验证完成示例代码
2020/04/03 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
军训自我鉴定100字
2014/02/13 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
离婚民事起诉状
2015/08/03 职场文书
孕妇病假条怎么写
2015/08/17 职场文书