实例讲解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 加号(+)运算符号
Dec 06 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
Jun 05 Javascript
Jquery 例外被抛出且未被接住原因介绍
Sep 04 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
JavaScript自定义日期格式化函数详细解析
Jan 14 Javascript
JS实现的自定义网页拖动类
Nov 06 Javascript
JS生成和下载二维码的代码
Dec 07 Javascript
Canvas实现动态的雪花效果
Feb 13 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
JS表格组件神器bootstrap table使用指南详解
Apr 12 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
详解vue-video-player使用心得(兼容m3u8)
Aug 23 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 一个比较完善的简单文件上传
2010/03/25 PHP
PHP关联链接常用代码
2012/11/05 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
帝国cms目录结构分享
2015/07/06 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
js保存当前路径(cookies记录)
2010/12/14 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
JS解析XML实例分析
2015/01/30 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
VUE element-ui 写个复用Table组件的示例代码
2017/11/18 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
简单解析Django框架中的表单验证
2015/07/17 Python
Python基于pillow判断图片完整性的方法
2016/09/18 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
python实现维吉尼亚算法
2019/03/20 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
幼儿园中班评语大全
2014/04/17 职场文书
计划生育证明书写要求
2014/09/17 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
30岁前绝不能错过的10本书
2019/08/08 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python
浅析Python OpenCV三种滤镜效果
2022/04/11 Python