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 相关文章推荐
js判断浏览器类型为ie6时不执行
Jun 15 Javascript
js Calender控件使用详解
Jan 05 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
Sep 04 Javascript
JS添加或修改控件的样式(Class)实现方法
Oct 15 Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
BootStrap3中模态对话框的使用
Jan 06 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
May 09 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
微信小程序实现人脸识别
May 25 Javascript
Vue结合后台导入导出Excel问题详解
Feb 19 Javascript
JavaScript遍历数组的方法代码实例
Jan 14 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面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
PHP基础之运算符的使用方法
2013/04/28 PHP
PHP链接MySQL的常用扩展函数
2014/10/23 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
JS文本框追加多个下拉框的值的简单实例
2013/07/12 Javascript
js中数组Array的一些常用方法总结
2013/08/12 Javascript
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
window.location不跳转的问题解决方法
2014/04/17 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
vue数据双向绑定原理解析(get &amp; set)
2017/03/08 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
python解析文件示例
2014/01/23 Python
Python连接数据库学习之DB-API详解
2017/02/07 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
python+opencv实现阈值分割
2018/12/26 Python
利用Python实现微信找房机器人实例教程
2019/03/10 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
美国网上书店:Barnes & Noble
2018/08/15 全球购物
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
servlet面试题
2012/08/20 面试题
工作表现评语
2014/01/19 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang