了解easyui tree组件的童鞋估计都知道tree的node有他自己单独的属性
(id,text,iconCls,checked,state,attribute,target)。而原先这个几个属性想要通过html的方式赋值实例的话,是不能完
全做到的。attribute属性必须json的方式才能赋值。这也给我们开发带来了一下不便。而如今有了data-options这个属性,
一切问题都迎刃而解了。
定义一棵nide带有特殊属性的node就可以通过如下方式实现了
<ul id="tt1" class="easyui-tree" data-options="animate:true,dnd:true">
<li>
<span>Folder</span>
<ul>
<li data-options="state:'closed'">
<span>Sub Folder 1</span>
<ul>
<li data-options="attributes:{'url':'xxxxx'}">
<span><a href="#">File 11</a></span>
</li>
<li data-options="attributes:{'url':'xxxxx'}">
<span>File 12</span>
</li>
<li>
<span>File 13</span>
</li>
</ul>
</li>
<li data-options="attributes:{'url':'xxxxx'}">
<span>File 2</span>
</li>
<li data-options="attributes:{'url':'xxxxx'}">
<span>File 3</span>
</li>
<li id="123" data-options="attributes:{'url':'xxxxx'}">File 4</li>
<li>File 5</li>
</ul>
</li>
<li>
<span>File21</span>
</li>
</ul>
然后我们通过js方法获取到tree的node对象的时候 就可以直接node.attributes.url获取到相应的值了。
分享到:
相关推荐
jQuery EasyUI Tree的基础使用主要涉及以下几个方面: 1. **引入依赖**: 在HTML页面中,我们需要引入jQuery、jQuery EasyUI的核心CSS和JS文件,以及Tree组件的特定CSS和JS文件。确保这些资源已正确加载,是使用...
具体来说,我们将修改EasyUI Tree的`loadFilter`方法,使其能够自动处理扁平化的数据结构,并将其转换成适合EasyUI Tree使用的格式。 #### 五、实现原理 下面是对EasyUI Tree进行扁平化扩展的核心逻辑: 1. **定义...
EasyUI Tree是一款基于jQuery的轻量级用户界面库,它为开发者提供了丰富的树形结构组件。在标准的EasyUI Tree基础上,“easyui tree 改进版”进行了优化和增强,特别是加入了复选框选择功能,这使得用户在操作树形...
1. **基本结构**:创建一个树形控件首先需要一个包含`class="easyui-tree"`的`<div>`元素,可以使用`data-url`属性指定数据来源,或者通过JavaScript动态添加节点。 2. **数据格式**:EasyUI Tree的数据通常以JSON...
3、tree增加自定义属性 attributes,用于简单数据加载时,指定那些字段当作node的attributes属性使用。 4、combobox增加 getSelected 方法, 返回选中item的data值。 5、combogrid增加 getSelected 方法,返回选中...
7. **版本管理**:如果你的项目已经依赖于某个版本的EasyUI,需要确保这些扩展图标与当前使用的EasyUI版本兼容,避免引发冲突。 8. **设计一致性**:虽然图标丰富多样,但保持设计的一致性对于整体用户体验至关重要...
在使用 EasyUI Tree 时,我们需要设置一些关键属性来控制其行为,如 `url`(用于获取节点数据的服务器接口)、`method`(请求方式,通常为 'post' 或 'get')、`loadFilter`(用于处理服务器返回数据并转化为树节点...
综上所述,jQuery EasyUI Tree组件的异步加载通过设置`async`和`loader`属性实现,配合后台接口,能有效地优化大数据量场景下的用户体验。在`easyui_demo`这个压缩包中,你可以找到一个完整的示例,帮助理解并实践这...
6. **API参考**:离线文档中会列出所有组件的API,包括方法、属性和事件,这对于深入理解和使用EasyUI至关重要。 7. **插件扩展**:EasyUI还允许开发自定义插件,扩展其功能,文档中可能会包含关于如何创建和使用...
这将极大地节省开发者的时间,避免了安装过程中的各种潜在问题,使得开发者能够迅速查找和理解EasyUI的各种方法、属性和事件,从而提高开发效率。 在实际开发中,利用EasyUI的API,开发者可以: - 创建和配置各种...
学习和使用 EasyUI,你需要理解每个组件的属性、方法和事件,以及如何通过 JavaScript 进行动态控制。例如,你可以通过设置 datagrid 的列宽、排序方式,或者通过 dialog 的 open 方法打开对话框。同时,要熟练掌握...
2. **标记界面元素**:使用特定的 class 属性标记需要应用 EasyUI 样式的 HTML 元素。 3. **初始化组件**:通过 JavaScript 调用 EasyUI 的方法来初始化组件,例如 `$(function(){$('selector').datagrid(options);...
1. **组件库**:EasyUI 提供了一系列的UI组件,如表格(datagrid)、树形控件(tree)、下拉框(combobox)、对话框(dialog)等,这些组件都封装了常见的交互功能,开发者只需通过简单的配置即可使用。 2. **数据...
同时,开发者还可以自定义样式,调整组件的颜色、尺寸等属性,以满足个性化需求。 5. **布局管理**:EasyUI 的布局组件(layout)可以帮助开发者轻松地创建响应式布局,支持水平和垂直分隔,可以动态调整各个区域的...
掌握这些属性和方法是灵活使用EasyUI的关键。 4. **事件处理**:EasyUI组件支持多种用户交互事件,如点击(click)、加载完成(load)等。学习如何绑定和处理这些事件,可以实现动态交互的界面。 5. **数据绑定**...
1. **EasyUI组件**:EasyUI 包含了如对话框(dialog)、表格(datagrid)、菜单(menu)、下拉选择框(combobox)、树形控件(tree)等多种常见的用户界面元素。学习如何配置这些组件的属性、事件和方法,是掌握...
在这个主题中,我们将探讨 EasyUI 的几个核心知识点:基本布局、tree 菜单数据的绑定、DataGrid 数据查询和数据绑定以及分页功能。 首先,我们来看 EasyUI 的基本布局。EasyUI 提供了一套灵活的布局系统,允许...
- HTML文件:包含EasyUi组件的示例页面,展示了如何在HTML中使用EasyUi的标签和属性。 - JavaScript文件:可能包括EasyUi的库文件和自定义脚本,用于处理用户交互和数据操作。 - CSS文件:EasyUi的主题样式文件,...
1. **HTML 结构**:查看 HTML 文件如何使用 EasyUi 的类名来创建组件,理解各组件的结构和属性设置。 2. **JavaScript 代码**:分析 JavaScript 文件中如何初始化组件,以及如何处理组件的事件和数据操作。 3. **...
EasyUI API 帮助文档是开发者理解和使用EasyUI的重要参考资料,包含了所有组件的详细说明、方法、属性以及事件等。 在EasyUI API中,你可以找到以下关键知识点: 1. **组件库**:EasyUI 包含了多种常见的Web界面...