基于cookie实现zTree树刷新后展开状态不变

 更新时间:2017年02月28日 09:29:18   作者:秋荷雨翔  
这篇文章主要为大家详细介绍了如何基于cookie实现zTree树刷新后,展开状态不变,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

基于cookie实现zTree树刷新后,展开状态不变。

1、除了引用jQuery和zTree的JS外,引用cookie的JS:

<script type="text/javascript" src="~/Scripts/jquery-treeview/lib/jquery.cookie.js"></script>

2、JS代码:

$(function () {
  //ztree设置
  var setting = {
    data: {
      simpleData: {
        enable: true,
        idKey: "id",
        pIdKey: "pId",
        rootPId: null
      }
    },
    callback: {
      onExpand: onExpand,
      onCollapse: onCollapse
    }
  };

  $.ajax({
    type: "POST",
    url: "/Tech/TemplateTypeManage/GetData",
    success: function (data) {
      if (data && data.length != 0) {
        $.fn.zTree.init($("#tree"), setting, data);
        var treeObj = $.fn.zTree.getZTreeObj("tree");
        var cookie = $.cookie("z_tree" + window.location);
        if (cookie) {
          z_tree = JSON2.parse(cookie);
          for (var i = 0; i < z_tree.length; i++) {
            var node = treeObj.getNodeByParam('id', z_tree[i])
            treeObj.expandNode(node, true, false)
          }
        }
      }
    }
  });
});//end $

function onExpand(event, treeId, treeNode) {
  var cookie = $.cookie("z_tree" + window.location);
  var z_tree = new Array();
  if (cookie) {
    z_tree = JSON2.parse(cookie);
  }
  if ($.inArray(treeNode.id, z_tree) < 0) {
    z_tree.push(treeNode.id);
  }
  $.cookie("z_tree" + window.location, JSON2.stringify(z_tree))
}

function onCollapse(event, treeId, treeNode) {
  var cookie = $.cookie("z_tree" + window.location);
  var z_tree = new Array();
  if (cookie) {
    z_tree = JSON2.parse(cookie);
  }
  var index = $.inArray(treeNode.id, z_tree);
  z_tree.splice(index, 1);
  for (var i = 0; i < treeNode.children.length; i++) {
    index = $.inArray(treeNode.children[i].id, z_tree);
    if (index > -1) z_tree.splice(index, 1);
  }
  $.cookie("z_tree" + window.location, JSON2.stringify(z_tree))
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 实例代码讲解jquery easyui动态tab页

    实例代码讲解jquery easyui动态tab页

    这篇文章主要介绍了实例代码讲解jquery easyui动态tab页的相关资料,需要的朋友可以参考下
    2015-11-11
  • jquery select下拉框操作的一些说明

    jquery select下拉框操作的一些说明

    公司网站目前的访问用户中使用IE6.0的站50%以上,所以必需兼容IE6.0,使用jquery在IE6.0中设置下拉框时会有以下一些问题
    2010-04-04
  • 编写高效jQuery代码的4个原则和5个技巧

    编写高效jQuery代码的4个原则和5个技巧

    有了JQuery对JS的整合和封装,它让页面操作更加的随心所欲,所以只有遵循良好的规范才会让代码更高效,更健壮。以下是我对如何高效操作JQuery的一些拙见,望指正!
    2014-04-04
  • jQuery中map()方法用法实例

    jQuery中map()方法用法实例

    这篇文章主要介绍了jQuery中map()方法用法,实例分析了map()方法的功能、定义及转换数组的使用技巧,需要的朋友可以参考下
    2015-01-01
  • jQuery插件PageSlide实现左右侧栏导航菜单

    jQuery插件PageSlide实现左右侧栏导航菜单

    jQuery pageSlide 是一个可以让网页出现滚动效果的jQuery插件,它可以控制一个隐藏页面的显示和关闭。具体来说,就是当前页占一个完整页面,隐藏页是看不到的,你设置一个控制的地方,点击该控制时触发事件,隐藏的页面就滑出来,再次点击隐藏页面以外的地方,它就又关闭
    2015-04-04
  • hover的用法及live的用法介绍(鼠标悬停效果)

    hover的用法及live的用法介绍(鼠标悬停效果)

    hover属性在书写css时大家都不会陌生了吧live主要用于对动态加载出来的元素绑定事件,下来将为大家详细介绍下两者的使用,感兴趣的朋友可不要错过了哈
    2013-03-03
  • 跟着Jquery API学Jquery之一 选择器

    跟着Jquery API学Jquery之一 选择器

    Jquery 选择器是最基本的操作了,当我们用原生的javascript的时候,我们为了选择一个对象不得不花费九头二虎之力
    2010-04-04
  • Jquery on("click")方法绑定事件后执行多次的解决方法

    Jquery on("click")方法绑定事件后执行多次的解决方法

    这篇文章主要给大家介绍了关于Jquery on("click")方法绑定事件后执行多次的解决方法,文章通过实例代码以及图文介绍的非常详细,对大家学习或者使用jQuery具有一定的参考学习价值,需要的朋友可以参考下
    2023-06-06
  • jQuery实现的自适应焦点图效果完整实例

    jQuery实现的自适应焦点图效果完整实例

    这篇文章主要介绍了jQuery实现的自适应焦点图效果,结合完整实例形式分析了jQuery事件响应及动态操作页面元素属性的相关技巧,需要的朋友可以参考下
    2016-08-08
  • JQuery结合CSS操作打印样式的方法

    JQuery结合CSS操作打印样式的方法

    这篇文章主要介绍了JQuery结合CSS操作打印样式的方法,有需要的朋友可以参考一下
    2013-12-12

最新评论