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 相关文章推荐
(仅IE下有效)关于checkbox 三态
May 12 Javascript
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 Javascript
Vue.js实战之组件之间的数据传递
Apr 01 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
JavaScript一元正号运算符示例代码
Jun 30 Javascript
封装一下vue中的axios示例代码详解
Feb 16 Javascript
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
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随机数生成代码与使用实例分析
2011/04/08 PHP
基于php-fpm的配置详解
2013/06/03 PHP
解析PHP汉字转换拼音的类
2013/06/18 PHP
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
8个PHP程序员常用的功能汇总
2014/12/18 PHP
php读取本地json文件的实例
2018/03/07 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
javascript 写类方式之四
2009/07/05 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
Python实现的矩阵类实例
2017/08/22 Python
Sublime开发python程序的示例代码
2018/01/24 Python
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
Python中extend和append的区别讲解
2019/01/24 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
Python多个装饰器的调用顺序实例解析
2020/05/22 Python
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
《巨人的花园》教学反思
2014/02/12 职场文书
房产协议书范本2014
2014/09/30 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
2014年民警工作总结
2014/11/25 职场文书
社会实践活动报告
2015/02/05 职场文书
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL