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


Posted in Javascript onFebruary 28, 2017

基于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))
}

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

Javascript 相关文章推荐
js继承的实现代码
Aug 05 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 Javascript
JS控制图片等比例缩放的示例代码
Dec 24 Javascript
详解js闭包
Sep 02 Javascript
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
深入学习JavaScript对象
Oct 13 Javascript
Jquery元素追加和删除的实现方法
May 24 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 Javascript
详细分析JavaScript中的深浅拷贝
Sep 17 Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 #Javascript
canvas绘图不清晰的解决方案
Feb 28 #Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 #Javascript
js数字计算 误差问题的快速解决方法
Feb 28 #Javascript
js数字舍入误差以及解决方法(必看篇)
Feb 28 #Javascript
JS实现浏览器打印、打印预览示例
Feb 28 #Javascript
JS基于面向对象实现的多个倒计时器功能示例
Feb 28 #Javascript
You might like
PHP5中MVC结构学习
2006/10/09 PHP
一家之言的经验之谈php+mysql扎实个人基本功
2008/03/27 PHP
php 禁止页面缓存输出
2009/01/07 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
初识Laravel
2014/10/30 PHP
PHP实现验证码校验功能
2017/11/16 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
javascript 学习之旅 (2)
2009/02/05 Javascript
javascript 写类方式之三
2009/07/05 Javascript
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
记一次react前端项目打包优化的方法
2020/03/30 Javascript
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
使用python遍历指定城市的一周气温
2017/03/31 Python
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
深入理解Python 多线程
2020/06/16 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
Python从文件中读取数据的方法步骤
2020/11/18 Python
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
招商经理岗位职责
2013/11/16 职场文书
就业意向书范文
2014/04/01 职场文书
认错检讨书
2014/10/02 职场文书
2016年社区服务活动总结
2016/04/06 职场文书