基于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 相关文章推荐
jquery监控数据是否变化(修正版)
Apr 12 Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 Javascript
浅析JavaScript函数的调用模式
Aug 10 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
May 03 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
Nov 30 Javascript
vue项目中仿element-ui弹框效果的实例代码
Apr 22 Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 Javascript
jQuery实现获取多选框的值示例
Feb 07 jQuery
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
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
详解Vue 非父子组件通信方法(非Vuex)
2017/05/24 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
Python base64编码解码实例
2015/06/21 Python
python开发中module模块用法实例分析
2015/11/12 Python
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
Python有序字典简单实现方法示例
2017/09/28 Python
利用python批量修改word文件名的方法示例
2017/10/17 Python
Python反射用法实例简析
2017/12/22 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
Python绘制组合图的示例
2020/09/18 Python
Clarks西班牙官方在线商店:clarks鞋
2019/05/03 全球购物
什么是Connection-oriented Protocol/Connectionless Protocol面向连接的协议/无连接协议
2012/09/06 面试题
若干个Java基础面试题
2015/05/19 面试题
计算机专业自我鉴定
2013/10/15 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
复活读书笔记
2015/06/29 职场文书
公司管理制度范本
2015/08/03 职场文书