实例讲解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 相关文章推荐
脚本安需导入(装载)的三种模式的对比
Jun 24 Javascript
web 页面分页打印的实现
Jun 22 Javascript
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
使用javascript插入样式
Mar 14 Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 Javascript
vue-router的HTML5 History 模式设置
Sep 08 Javascript
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 Javascript
angular inputNumber指令输入框只能输入数字的实现
Dec 03 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 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
用mysql触发器自动更新memcache的实现代码
2009/10/11 PHP
解析php file_exists无效的解决办法
2013/06/26 PHP
PHP 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
php实现的农历算法实例
2015/08/11 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
js格式化时间小结
2014/11/03 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
2019/01/08 jQuery
Typescript的三种运行方式(小结)
2019/09/18 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
Python多项式回归的实现方法
2019/03/11 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
详解Python3定时器任务代码
2019/09/23 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
python 通过文件夹导入包的操作
2020/06/01 Python
女士时装鞋:Chinese Laundry
2018/08/29 全球购物
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
Windows和Linux动态库应用异同
2016/04/17 面试题
控制工程专业个人求职信
2013/09/25 职场文书
给国外客户的邀请函
2014/01/30 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
运动会演讲稿
2014/05/07 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
企业员工集体活动方案
2014/08/17 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers