`

转:easyui tree自定义属性的使用

 
阅读更多
了解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学习

    jQuery EasyUI Tree的基础使用主要涉及以下几个方面: 1. **引入依赖**: 在HTML页面中,我们需要引入jQuery、jQuery EasyUI的核心CSS和JS文件,以及Tree组件的特定CSS和JS文件。确保这些资源已正确加载,是使用...

    easyui tree扁平化扩展,不用再为children嵌套结构烦恼

    具体来说,我们将修改EasyUI Tree的`loadFilter`方法,使其能够自动处理扁平化的数据结构,并将其转换成适合EasyUI Tree使用的格式。 #### 五、实现原理 下面是对EasyUI Tree进行扁平化扩展的核心逻辑: 1. **定义...

    easyui tree 改进版

    EasyUI Tree是一款基于jQuery的轻量级用户界面库,它为开发者提供了丰富的树形结构组件。在标准的EasyUI Tree基础上,“easyui tree 改进版”进行了优化和增强,特别是加入了复选框选择功能,这使得用户在操作树形...

    easyui Tree系统管理

    1. **基本结构**:创建一个树形控件首先需要一个包含`class="easyui-tree"`的`&lt;div&gt;`元素,可以使用`data-url`属性指定数据来源,或者通过JavaScript动态添加节点。 2. **数据格式**:EasyUI Tree的数据通常以JSON...

    easyui+增强窗体 demo_ext为实例文件

    3、tree增加自定义属性 attributes,用于简单数据加载时,指定那些字段当作node的attributes属性使用。 4、combobox增加 getSelected 方法, 返回选中item的data值。 5、combogrid增加 getSelected 方法,返回选中...

    EasyUI_Icon_图标扩展样式(1775个)

    7. **版本管理**:如果你的项目已经依赖于某个版本的EasyUI,需要确保这些扩展图标与当前使用的EasyUI版本兼容,避免引发冲突。 8. **设计一致性**:虽然图标丰富多样,但保持设计的一致性对于整体用户体验至关重要...

    easyui_tree 文档及demo

    在使用 EasyUI Tree 时,我们需要设置一些关键属性来控制其行为,如 `url`(用于获取节点数据的服务器接口)、`method`(请求方式,通常为 'post' 或 'get')、`loadFilter`(用于处理服务器返回数据并转化为树节点...

    jquery easyui tree 树形列表节点异步加载

    综上所述,jQuery EasyUI Tree组件的异步加载通过设置`async`和`loader`属性实现,配合后台接口,能有效地优化大数据量场景下的用户体验。在`easyui_demo`这个压缩包中,你可以找到一个完整的示例,帮助理解并实践这...

    jQuery EasyUI中文离线文档

    6. **API参考**:离线文档中会列出所有组件的API,包括方法、属性和事件,这对于深入理解和使用EasyUI至关重要。 7. **插件扩展**:EasyUI还允许开发自定义插件,扩展其功能,文档中可能会包含关于如何创建和使用...

    EasyUI 中文API下载无需安装

    这将极大地节省开发者的时间,避免了安装过程中的各种潜在问题,使得开发者能够迅速查找和理解EasyUI的各种方法、属性和事件,从而提高开发效率。 在实际开发中,利用EasyUI的API,开发者可以: - 创建和配置各种...

    前端框架EasyUI代码

    学习和使用 EasyUI,你需要理解每个组件的属性、方法和事件,以及如何通过 JavaScript 进行动态控制。例如,你可以通过设置 datagrid 的列宽、排序方式,或者通过 dialog 的 open 方法打开对话框。同时,要熟练掌握...

    EasyUI(含demo)

    2. **标记界面元素**:使用特定的 class 属性标记需要应用 EasyUI 样式的 HTML 元素。 3. **初始化组件**:通过 JavaScript 调用 EasyUI 的方法来初始化组件,例如 `$(function(){$('selector').datagrid(options);...

    easyui插件

    1. **组件库**:EasyUI 提供了一系列的UI组件,如表格(datagrid)、树形控件(tree)、下拉框(combobox)、对话框(dialog)等,这些组件都封装了常见的交互功能,开发者只需通过简单的配置即可使用。 2. **数据...

    jQuery EasyUI 1.5.1文档

    同时,开发者还可以自定义样式,调整组件的颜色、尺寸等属性,以满足个性化需求。 5. **布局管理**:EasyUI 的布局组件(layout)可以帮助开发者轻松地创建响应式布局,支持水平和垂直分隔,可以动态调整各个区域的...

    easyui官方离线文档

    掌握这些属性和方法是灵活使用EasyUI的关键。 4. **事件处理**:EasyUI组件支持多种用户交互事件,如点击(click)、加载完成(load)等。学习如何绑定和处理这些事件,可以实现动态交互的界面。 5. **数据绑定**...

    easyui实例项目

    1. **EasyUI组件**:EasyUI 包含了如对话框(dialog)、表格(datagrid)、菜单(menu)、下拉选择框(combobox)、树形控件(tree)等多种常见的用户界面元素。学习如何配置这些组件的属性、事件和方法,是掌握...

    EasyUI:基本布局&tree菜单数据的绑定&DataGrid数据查询&数据绑定&分页

    在这个主题中,我们将探讨 EasyUI 的几个核心知识点:基本布局、tree 菜单数据的绑定、DataGrid 数据查询和数据绑定以及分页功能。 首先,我们来看 EasyUI 的基本布局。EasyUI 提供了一套灵活的布局系统,允许...

    EasyUi框架,增删改查例子(保证完整)

    - HTML文件:包含EasyUi组件的示例页面,展示了如何在HTML中使用EasyUi的标签和属性。 - JavaScript文件:可能包括EasyUi的库文件和自定义脚本,用于处理用户交互和数据操作。 - CSS文件:EasyUi的主题样式文件,...

    EasyUi Demo框架源码

    1. **HTML 结构**:查看 HTML 文件如何使用 EasyUi 的类名来创建组件,理解各组件的结构和属性设置。 2. **JavaScript 代码**:分析 JavaScript 文件中如何初始化组件,以及如何处理组件的事件和数据操作。 3. **...

    EasyUI-API.zip_easyui api

    EasyUI API 帮助文档是开发者理解和使用EasyUI的重要参考资料,包含了所有组件的详细说明、方法、属性以及事件等。 在EasyUI API中,你可以找到以下关键知识点: 1. **组件库**:EasyUI 包含了多种常见的Web界面...

Global site tag (gtag.js) - Google Analytics