实例讲解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 拾碎[三] 使用className属性
Oct 16 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 Javascript
JSON 数字排序多字段排序介绍
Sep 18 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
Jun 23 Javascript
angular简介和其特点介绍
Jan 29 Javascript
js实现html table 行,列锁定的简单实例
Oct 13 Javascript
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
vue使用swiper实现中间大两边小的轮播图效果
Nov 24 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 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
初学CAKEPHP 基础教程
2009/11/02 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
javascript实现动态CSS换肤技术的脚本
2007/06/29 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
Angular.js如何从PHP读取后台数据
2016/03/24 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
使用vue实现通过变量动态拼接url
2020/07/22 Javascript
python批量下载图片的三种方法
2013/04/22 Python
Python全局变量操作详解
2015/04/14 Python
python制作花瓣网美女图片爬虫
2015/10/28 Python
python各种语言间时间的转化实现代码
2016/03/23 Python
剖析Python的Twisted框架的核心特性
2016/05/25 Python
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
python实现五子棋小程序
2019/06/18 Python
完美解决keras保存好的model不能成功加载问题
2020/06/11 Python
详解Flask前后端分离项目案例
2020/07/24 Python
迪奥美国官网:Dior美国
2019/12/07 全球购物
大班上学期幼儿评语
2014/04/30 职场文书
学生考试舞弊检讨书
2015/01/01 职场文书
机动车交通事故协议书
2015/01/29 职场文书
布达拉宫的导游词
2015/02/02 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python
MySQL创建管理子分区
2022/04/13 MySQL