基于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 JSON的反序列化类 using问题的解决方法
Dec 19 Javascript
原生javaScript实现图片延时加载的方法
Dec 22 Javascript
easyui-combobox 实现简单的自动补全功能示例
Nov 08 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
Dec 03 Javascript
微信小程序 slider 详解及实例代码
Jan 10 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
vue.js 实现输入框动态添加功能
Jun 25 Javascript
详解vue-cli3使用
Aug 14 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 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
Access数据库导入Mysql的方法之一
2006/10/09 PHP
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
使用Sphinx对索引进行搜索
2013/06/25 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
Extjs学习笔记之七 布局
2010/01/08 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
vue slots 组件的组合/分发实例
2018/09/06 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
python 数据类型强制转换的总结
2021/01/25 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
电大学习个人自我评价范文
2013/10/04 职场文书
优秀毕业生事迹材料
2014/02/12 职场文书
2014年妇女工作总结
2014/12/06 职场文书
成绩单评语
2015/01/04 职场文书
工作犯错保证书
2015/05/11 职场文书
惊涛骇浪观后感
2015/06/05 职场文书
成事在人观后感
2015/06/16 职场文书
2019年励志签名:致拼搏路上的自己
2019/10/11 职场文书
SQL Server实现分页方法介绍
2022/03/16 SQL Server