实例讲解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 相关文章推荐
js获取网页高度(详细整理)
Dec 28 Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 Javascript
基于Vue中点击组件外关闭组件的实现方法
Mar 06 Javascript
基于bootstrap页面渲染的问题解决方法
Aug 09 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
JS面向对象之单选框实现
Jan 17 Javascript
vue使用过滤器格式化日期
Jan 20 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
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
thinkPHP3.x常量整理(预定义常量/路径常量/系统常量)
2016/05/20 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
实例代码讲解jquery easyui动态tab页
2015/11/17 Javascript
原生ajax处理json格式数据的实例代码
2016/12/25 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
Python中内建函数的简单用法说明
2016/05/05 Python
Python基础篇之初识Python必看攻略
2016/06/23 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
windows下python安装pip图文教程
2018/05/25 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
利用PyCharm操作Github(仓库新建、更新,代码回滚)
2019/12/18 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
8种常用的Python工具
2020/08/05 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
个人找工作自荐信格式
2013/09/21 职场文书
财务管理专业应届毕业生求职信
2013/09/22 职场文书
班主任新年寄语
2014/04/04 职场文书
军训决心书范文
2015/09/22 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python
Redis实现订单过期删除的方法步骤
2022/06/05 Redis
Python中tqdm的使用和例子
2022/09/23 Python