基于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 相关文章推荐
讨论javascript(一)工厂方式 js面象对象的定义方法
Dec 15 Javascript
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 Javascript
js中function()使用方法
Dec 24 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
Aug 25 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
Dec 05 Javascript
openLayer4实现动态改变标注图标
Aug 17 Javascript
详解Node.JS模块 process
Aug 31 Javascript
JavaScript 数组去重详解
Sep 15 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实现LOL数据远程获取
2014/06/10 PHP
PHP实现事件机制的方法
2015/07/10 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
javascript 强制刷新页面的实现代码
2009/12/13 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
5 种JavaScript编码规范
2018/01/30 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
Python 解析XML文件
2009/04/15 Python
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
一张图带我们入门Python基础教程
2017/02/05 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
详解python中*号的用法
2019/10/21 Python
python取均匀不重复的随机数方式
2019/11/27 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
详解python命令提示符窗口下如何运行python脚本
2020/09/11 Python
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
Weblogc domain问题
2014/01/27 面试题
大学生文员专业个人求职信范文
2014/01/05 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
高一军训感想
2015/08/07 职场文书
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS