基于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中的其他对象
Jan 16 Javascript
js URL参数的拼接方法比较
Feb 15 Javascript
showModelDialog弹出文件下载窗口的使用示例
Nov 19 Javascript
如何在MVC应用程序中使用Jquery
Nov 17 Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 Javascript
微信小程序radio组件使用详解
Jan 31 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
微信小程序滑动选择器的实现代码
Aug 10 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
通过实践编写优雅的JavaScript代码
May 30 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
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
腾讯CMEM的PHP扩展编译安装方法
2015/09/25 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
redis+php实现微博(三)微博列表功能详解
2019/09/23 PHP
用javascript做拖动布局的思路
2008/05/31 Javascript
COM中获取JavaScript数组大小的代码
2009/11/22 Javascript
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
js Html结构转字符串形式显示代码
2011/11/15 Javascript
js统计页面的来访次数实现代码
2014/05/09 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
详解写好JS条件语句的5条守则
2019/02/28 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
Python中将字典转换为列表的方法
2016/09/21 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
给老师的一封建议书
2014/03/13 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
交通事故协议书范本
2016/03/19 职场文书
读完《骆驼祥子》的观后感!
2019/07/05 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript