实例讲解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 相关文章推荐
jQuery 学习6 操纵元素显示效果的函数
Feb 07 Javascript
图片在浏览器中底部对齐 解决方法之一
Nov 30 Javascript
javaScript 利用闭包模拟对象的私有属性
Dec 29 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
Nov 13 Javascript
JavaScript 学习笔记之操作符(续)
Jan 14 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 Javascript
微信小程序 网络API发起请求详解
Nov 09 Javascript
微信小程序之发送短信倒计时功能
Aug 30 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
Nov 04 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
Nov 16 Javascript
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
php算开始时间到过期时间的相隔的天数
2011/01/12 PHP
php中http_build_query 的一个问题
2012/03/25 PHP
用PHP编写和读取XML的几种方式
2013/01/12 PHP
PHP中如何定义和使用常量
2013/02/28 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
php中关于长度计算容易混淆的问题分析
2016/05/27 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
js实现温度计时间样式代码分享
2015/08/21 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
react基本安装与测试示例
2020/04/27 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Zookeeper接口kazoo实例解析
2018/01/22 Python
python实现的自动发送消息功能详解
2019/08/15 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
python:动态路由的Flask程序代码
2019/11/22 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
python3中确保枚举值代码分析
2020/12/02 Python
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
妇产医师自荐信
2014/01/29 职场文书
网络编辑岗位职责范本
2014/02/10 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
导游词之凤凰古城
2019/10/22 职场文书
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android