`
ailongni
  • 浏览: 61901 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

easyui treegrid 异步加载树

阅读更多

$('#material').treegrid({
    nowrap: false,
    rownumbers: true,
    animate:true,
    collapsible:true,
    loadMsg:'数据加载中请稍后……',
    
url:'<c:url value="/jxc/sysinfo/loadMaterialTree.jsps"/>',
    idField:'matCode',
    treeField:'matCode',
    frozenColumns:[[
                 {title:'料号',field:'matCode',width:180}
    ]],
    columns:[[
     {field:'matType',title:'产品类型',width:120},
     {field:'matShow',title:'产品名称',width:120},
     {field:'matStandard',title:'产品规格',width:120},
     {field:'matProperties',title:'产品属性',width:120}
    ]],
    onBeforeLoad:function(row,param){

     // 此处就是异步加载地所在
     if (row){
      $(this).treegrid('options').url = '<c:url value="/jxc/sysinfo/loadMaterialTree.jsps"/>?matParentId='+row.matId;
     } else {
      $(this).treegrid('options').url = '<c:url value="/jxc/sysinfo/loadMaterialTree.jsps?matName="/>';
     }
    },
    onClickRow:function(){
     /**
     ** 如果是新建或者修改,以及删除,则清除查询form表单数据 
     **/
     $('#materialSearch').form('clear');
    }
   });

<table id="material"></table>

以及树的异步添加、删除、刷新等

请参考: http://jquery-easyui.wikidot.com/document:treegrid

分享到:
评论

相关推荐

    EASYUI TREEGRID异步加载数据实现方法

    在EASYUI TreeGrid中,异步加载数据是一项重要的功能,允许用户在需要时动态获取数据,提高应用的性能和用户体验。 异步加载数据通常涉及到以下几个关键点: 1. **配置URL**:在TreeGrid的初始化参数中,`url`属性...

    EasyUI的treegrid组件动态加载数据问题的解决办法

    通过以上步骤,我们可以实现EasyUI TreeGrid组件根据查询条件动态加载数据的功能。这种方式避免了对`treegrid('reload')`方法的直接依赖,同时也符合异步数据处理的最佳实践。在实际开发中,根据项目需求,你可能还...

    easyUI-树形表格(TreeGrid)实现无限层级菜单

    EasyUI TreeGrid支持`onExpand`事件,可在事件回调中异步加载子数据。 4. **JavaScript配置**: 在JavaScript中,我们需要初始化TreeGrid并配置相关参数,如加载数据的方式、列定义等: ```javascript $('#...

    easyui 异步树

    1. **异步加载树结构**: 异步树结构主要应用于那些数据量大或者层级深的场景,避免一次性加载所有节点导致页面卡顿。EasyUI 提供了两种主要的异步树组件:`combotree` 和 `treegrid`。 2. **Combotree(树形...

    easyui资料

    这里面包含easyui的chm文档easyui-1.3.5.zip,datagrid项目案例,SSH和easyui整合的案例,easyui异步加载tree,tree和datagrid共用的例子,改好的兼容jQueryUI1.10.3的easyui,另外加一个primeui-10资料。资源分定为1分...

    数据结构之easyui-treegrid

    这通常通过配置`onBeforeOpen`事件来实现,当用户展开一个节点时,该事件会被触发,此时可以异步获取子节点数据并添加到TreeGrid中。 4. 分页与排序:为了提高性能,TreeGrid可以结合后台分页功能,只加载当前页的...

    EasyUI的功能树之异步树JAVA版本.zip

    在本资料包 "EasyUI 的功能树之异步树 JAVA 版本.zip" 中,主要讨论的是如何在 JAVA 后端与 EasyUI 前端配合,实现异步加载的数据树功能。 数据树是一种常见的 UI 控件,用于展示层次结构的数据,如组织架构、文件...

    easyui_tree 文档及demo

    EasyUI Tree 支持异步加载数据,这意味着树节点可以按需动态加载,而不是一次性加载所有数据。这种特性对于处理大量数据或网络延迟的情况非常有用,因为它降低了初次加载页面时的数据量。 2. **配置与属性**: 在...

    详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)

    通过上述后端和前端代码的配合,就可以实现一个基于Jquery EasyUI tree组件的异步加载树,这个树能够根据指定文件夹内的文件和子文件夹动态生成。 总结而言,通过Jquery EasyUI的tree组件,开发者可以方便地构建...

    EasyUI tutorial 中文版 chm

    easyUI 创建异步Tree easyUI 附加tree节点到tree easyUI 创建Tree和复选框Tree Node easyUI 拖动(Drag)和放置(Drop)Tree easyUI 加载parent/child节点到tree 转换tree标准格式数据 easyUI 创建一个基础的...

    jQuery EasyUI的TreeGrid查询功能实现方法

    可以查询根节点和具体子节点的信息,开始使用EasyUI的TreeGrid的loadData 加载url的方式不能实现查询功能,于是利用异步AJAX查询了一下数据返回后,赋值给变量,然后利用 TreeGrid的loadData加载这个json格式的返回...

    EasyUI资料.rar

    1. **组件库**:EasyUI包含了一系列可复用的UI组件,如`datagrid`(数据网格)、`treegrid`(树形数据网格)、`form`(表单)、`dialog`(对话框)、`tabs`(选项卡)、`menu`(菜单)、`splitter`(分割器)等。...

    jQuery EasyUI 1.4.2 版 API 中文版

    API中包含如何创建树节点、展开折叠、异步加载等内容。 4. **Dialog**: 对话框组件提供了一种弹出式窗口,用于显示信息或进行交互。API中涵盖了如何打开、关闭、设定尺寸、位置以及添加按钮等功能。 5. **Form**: ...

    springmvc-easyui-tree增删改

    树的节点可以关联到数据模型的实例,通过异步加载或预加载数据。EasyUI的`treegrid`组件可以同时展示树状结构和表格数据,更便于操作。 6. **窗口(window)分类**:EasyUI的`window`组件用于弹出对话框,通常用于...

    easyui权限管理

    在EasyUI中,可以使用TreeGrid或Tree组件来实现权限树,通过异步加载数据提高用户体验。 3. **角色分配(Role Assignment)**:用户可以被指派一个或多个角色,这决定了用户能访问哪些资源和执行哪些操作。在后台...

    EasyUI_1.3.4+帮助文档

    1. **组件丰富**:EasyUI 提供了大量预先封装好的组件,如 DataGrid(数据网格)、TreeGrid(树形数据网格)、Combobox(组合框)、Dialog(对话框)等,大大减少了开发者自定义界面的工作量。 2. **响应式设计**:...

    easyui管理系统实例

    7. **异步数据加载**:EasyUI 支持 AJAX 技术,可以通过 JSONP 或其他方式从服务器动态加载数据,实现页面的实时更新和无刷新操作。 8. **事件处理**:EasyUI 的组件都支持绑定事件,如点击、改变等,开发者可以...

    easyUI源码

    学习如何使用 `datagrid` 或 `treegrid` 的 `url` 属性来加载远程数据,以及如何使用 `onLoadSuccess` 和 `onClickRow` 等事件处理函数进行数据交互。 4. **样式和主题**:EasyUI 提供了多种预定义的主题,学习如何...

    jQuery EasyUI版API

    4. **数据绑定**:EasyUI通过`datagrid`、`treegrid`等组件与后端进行数据交互,支持JSON、XML等多种数据格式,以及Ajax异步加载。 5. **事件处理**:每个组件都有丰富的事件,如点击、展开、关闭等,开发者可以...

Global site tag (gtag.js) - Google Analytics