实例讲解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 相关文章推荐
javascript 动态修改样式和层叠样式表代码
Apr 27 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
js实现收缩菜单效果实例代码
Oct 30 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
深入理解JQuery中的事件与动画
May 18 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
JavaScript实现单英文金山打字通
Jul 24 Javascript
微信小程序 自定义复选框实现代码实例
Sep 04 Javascript
基于JS实现操作成功之后自动跳转页面
Sep 25 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
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
jquery 可排列的表实现代码
2009/11/13 Javascript
Date对象格式化函数代码
2010/07/17 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
详解vue路由
2020/08/05 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
win与linux系统中python requests 安装
2016/12/04 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
使用Python脚本zabbix自定义key监控oracle连接状态
2019/08/28 Python
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
公司庆典邀请函范文
2014/01/13 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
2015年保送生自荐信
2015/03/24 职场文书
小学班级标语口号大全
2015/12/26 职场文书
解读Vue组件注册方式
2021/05/15 Vue.js