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的颜色选择插件实例代码
Oct 02 Javascript
dess中一个简单的多路委托的实现
Jul 20 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
js中函数声明与函数表达式
Jun 03 Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 Javascript
js实现右键菜单功能
Nov 28 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 Javascript
微信小程序云开发之使用云存储
May 17 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
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
SMARTY学习手记
2007/01/04 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
php实现搜索一维数组元素并删除二维数组对应元素的方法
2015/07/06 PHP
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
JQuery开发的数独游戏代码
2010/10/29 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
干货分享:让你分分钟学会javascript闭包
2015/12/25 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
js封装tab标签页实例分享
2016/12/19 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
24个ES6方法解决JS实际开发问题(小结)
2020/05/31 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
Django自定义认证方式用法示例
2017/06/23 Python
Python3读取Excel数据存入MySQL的方法
2018/05/04 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
简单谈谈python基本数据类型
2018/09/26 Python
浅谈python中get pass用法
2019/03/19 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
python实现猜拳游戏
2020/03/04 Python
python Paramiko使用示例
2020/09/21 Python
工程预算与管理应届生求职信
2013/10/06 职场文书
讲座主持词
2014/03/20 职场文书
保护环境倡议书300字
2014/05/19 职场文书
质量负责人岗位职责
2015/02/15 职场文书
催款函怎么写
2015/06/24 职场文书
python playwright 自动等待和断言详解
2021/11/27 Python