实例讲解jQuery EasyUI tree中state属性慎用


Posted in Javascript onApril 01, 2016

EasyUI 1.4.4 tree控件中,如果是叶子节点,切忌把state设置为closed,否则该节点会加载整个tree,形成死循环

例如:

json入下:

[
{
"checked": false,
"iconCls": "",
"id": "dec",
"pid": "",
"state": "closed",
"text": "test",
"type": "ORG"
}
]

实例讲解jQuery EasyUI tree中state属性慎用

状态改为open或者为空,显示正常

实例讲解jQuery EasyUI tree中state属性慎用

下面给大家介绍easyui tree自定义属性的使用

了解easyui tree组件的童鞋估计都知道tree的node有他自己单独的属性(id,text,iconCls,checked,state,attribute,target)。而原先这个几个属性想要通过html的方式赋值实例的话,是不能完全做到的。attribute属性必须json的方式才能赋值。这也给我们开发带来了一下不便。而如今有了data-options这个属性,一切问题都迎刃而解了。

定义一棵nide带有特殊属性的node就可以通过如下方式实现了

<ul id="tt" class="easyui-tree" data-options="animate:true,dnd:true">
<li>
<span>Folder</span>
<ul>
<li data-options="state:'closed'">
<span>Sub Folder </span>
<ul>
<li data-options="attributes:{'url':'xxxxx'}">
<span><a href="#">File </a></span>
</li>
<li data-options="attributes:{'url':'xxxxx'}">
<span>File </span>
</li>
<li>
<span>File </span>
</li>
</ul>
</li>
<li data-options="attributes:{'url':'xxxxx'}">
<span>File </span>
</li>
<li data-options="attributes:{'url':'xxxxx'}">
<span>File </span>
</li>
<li id="" data-options="attributes:{'url':'xxxxx'}">File </li>
<li>File </li>
</ul>
</li>
<li>
<span>File</span>
</li>
</ul>

然后我们通过js方法获取到tree的node对象的时候 就可以直接node.attributes.url获取到相应的值了。

Javascript 相关文章推荐
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
javascript操作excel生成报表全攻略
May 04 Javascript
JS小游戏之仙剑翻牌源码详解
Sep 25 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
jQuery实现文本展开收缩特效
Jun 03 Javascript
javascript实现uploadify上传格式以及个数限制
Nov 23 Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
vue组件生命周期详解
Nov 07 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 Javascript
js实现点赞效果
Mar 16 Javascript
vue中使用echarts的示例
Jan 03 Vue.js
EasyUi combotree 实现动态加载树节点
Apr 01 #Javascript
如何在Linux上安装Node.js
Apr 01 #Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 #Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 #Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 #Javascript
JS中frameset框架弹出层实例代码
Apr 01 #Javascript
JS操作COOKIE实现备忘记录的方法
Apr 01 #Javascript
You might like
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
发布一个用PHP fsockopen写的HTTP下载的类
2007/02/22 PHP
php下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
如何使用PHP计算上一个月的今天
2013/05/23 PHP
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
Javascript Request获取请求参数如何实现
2012/11/28 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
仿iframe效果Aajx文件上传实例
2016/11/18 Javascript
bootstarp modal框居中显示的实现代码
2017/02/18 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
原生javascript AJAX 三级联动的实现代码
2018/05/04 Javascript
js input输入百分号保存数据库失败的解决方法
2018/05/26 Javascript
详解Element-UI中上传的文件前端处理
2019/08/07 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
JavaScript实现串行请求的示例代码
2020/09/14 Javascript
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
python psutil模块使用方法解析
2019/08/01 Python
python实现静态web服务器
2019/09/03 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
介绍一下write命令
2014/08/10 面试题
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
求职信写作要突出重点
2014/01/01 职场文书
小学生获奖感言范文
2014/02/02 职场文书
《陶罐和铁罐》教学反思
2014/02/19 职场文书
大学生就业协议书范本(适用于公司企业)
2014/10/07 职场文书
地方课程教学计划
2015/01/19 职场文书
Python并发编程实例教程之线程的玩法
2021/06/20 Python