基于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 相关文章推荐
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
js实现广告漂浮效果的小例子
Jul 02 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
关于js二维数组和多维数组的定义声明(详解)
Oct 02 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
JS定时器用法分析【时钟与菜单中的应用】
Dec 21 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
详解vue静态资源打包中的坑与解决方案
Feb 05 Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 Javascript
VUE预渲染及遇到的坑
Sep 03 Javascript
Vue项目数据动态过滤实践及实现思路
Sep 11 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
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
php 无限级 SelectTree 类
2009/05/19 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
Javascript 面试题随笔
2011/03/31 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
js 调用父窗口的具体实现代码
2013/07/15 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
JavaScript获取当前url路径过程解析
2019/12/27 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
python通过pil为png图片填充上背景颜色的方法
2015/03/17 Python
带你认识Django
2019/01/15 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
numpy数组做图片拼接的实现(concatenate、vstack、hstack)
2019/11/08 Python
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
西部世纪.net笔试题面试题
2014/04/03 面试题
创业培训计划书
2014/05/03 职场文书
四风问题查摆材料
2014/08/25 职场文书
2014最新离职证明范本
2014/09/12 职场文书
售后服务质量承诺书
2015/04/29 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
杨善洲观后感
2015/06/04 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书