基于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中style属性
Oct 11 Javascript
javascript的对话框详解与参数
Mar 08 Javascript
Javascript 面向对象 继承
May 13 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
Oct 11 Javascript
LABjs、RequireJS、SeaJS的区别
Mar 04 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
javaScript基础详解
Jan 19 Javascript
AngularJS实现表单元素值绑定操作示例
Oct 11 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 Javascript
微信小程序文章列表功能完整实例
Jun 03 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
JavaScript中isPrototypeOf函数
Nov 07 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 __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
深入php self与$this的详解
2013/06/08 PHP
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
跨浏览器的事件对象介绍
2012/06/27 Javascript
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
js中widow.open()方法使用详解
2013/07/30 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
Javascript核心读书有感之语言核心
2015/02/01 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
Python学习笔记之常用函数及说明
2014/05/23 Python
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
什么造成了Java里面的异常
2016/04/24 面试题
网络工程师个人的自我评价范文
2013/10/01 职场文书
家长对老师的感言
2014/03/11 职场文书
银行委托书范本
2014/04/04 职场文书
省级优秀班集体申报材料
2014/05/25 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
社区六一儿童节活动总结
2015/02/11 职场文书
网络管理员岗位职责
2015/02/12 职场文书
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers