实例讲解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 相关文章推荐
Display SQL Server Login Mode
Jun 21 Javascript
JavaScript 笔记二 Array和Date对象方法
May 22 Javascript
JavaScript初学者应注意的七个细节小结
Jan 30 Javascript
JavaScript 开发工具webstrom使用指南
Dec 09 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
jQuery中:reset选择器用法实例
Jan 04 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
js实现网页定位导航功能
Mar 07 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
微信小程序登录换取token的教程
May 31 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
Aug 07 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 HTML代码串截取代码
2008/12/29 PHP
php 函数中使用static的说明
2012/06/01 PHP
PHP文件锁函数flock()详细介绍
2014/11/18 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
javascript 多浏览器 事件大全
2010/03/23 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
2019/05/27 Javascript
vue项目中js-cookie的使用存储token操作
2020/11/13 Javascript
python文件读写并使用mysql批量插入示例分享(python操作mysql)
2014/02/17 Python
python异步任务队列示例
2014/04/01 Python
python批量制作雷达图的实现方法
2016/07/26 Python
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
django自带调试服务器的使用详解
2019/08/29 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
Feelunique中文官网:欧洲最大化妆品零售电商
2020/07/10 全球购物
意大利在线药房:Saninforma
2021/02/11 全球购物
金鑫耀Java笔试题
2014/09/06 面试题
网络事业创业计划书范文
2014/01/09 职场文书
红旗团支部事迹材料
2014/01/27 职场文书
《月迹》教学反思
2014/02/19 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
汽车车尾标语大全
2015/08/11 职场文书
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL