基于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通过扩展select控件实现支持enter或focus选择的方法
Nov 19 Javascript
JS实现搜索关键词的智能提示功能
Jul 07 Javascript
JS按钮闪烁功能的实现代码
Jul 21 Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
webpack学习教程之前端性能优化总结
Dec 05 Javascript
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
在vue项目中引入highcharts图表的方法
Jan 21 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 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使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
解javascript 混淆加密收藏
2009/01/16 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
javascript中Date()函数在各浏览器中的显示效果
2015/06/18 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
Node.js的npm包管理器基础使用教程
2016/05/26 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
Vue.set()实现数据动态响应的方法
2018/02/07 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
Python字符串格式化输出代码实例
2019/11/22 Python
Python print不能立即打印的解决方式
2020/02/19 Python
python要安装在哪个盘
2020/06/15 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
前端实现打印图像功能
2019/08/27 HTML / CSS
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
劳资员岗位职责
2013/11/11 职场文书
就业自荐信
2013/12/04 职场文书
本科毕业论文答辩稿
2015/06/23 职场文书
python实现简单的井字棋
2021/05/26 Python
Python如何导出导入所有依赖包详解
2021/06/08 Python