基于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 相关文章推荐
Mootools 1.2教程 正则表达式
Sep 15 Javascript
javascript预加载图片、css、js的方法示例介绍
Oct 14 Javascript
JQuery替换DOM节点的方法
Jun 11 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
Oct 24 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
Mar 22 Javascript
Vue使用lodop实现打印小结
Jul 06 Javascript
使用uni-app开发微信小程序的实现
Dec 13 Javascript
微信小程序利用云函数获取手机号码
Dec 17 Javascript
vue下canvas裁剪图片实例讲解
Apr 16 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
PHP中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
MSN消息提示类
2006/09/05 Javascript
js tab 选项卡
2009/04/26 Javascript
JavaScript 高级语法介绍
2009/06/15 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
2013/01/27 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
js控制iframe的高度/宽度让其自适应内容
2014/04/09 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
Python用字典构建多级菜单功能
2019/07/11 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
Python基于Tkinter编写crc校验工具
2020/05/06 Python
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
汉语言文学职业规划
2014/02/14 职场文书
文明生主要事迹
2014/05/25 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
科普 | 业余无线电知识-波段篇
2022/02/18 无线电