`

界面异步加载tree(固定的两级节点)

 
阅读更多

function createProjectTree(divId,divWidth,divHeight,callback){
 //行政区划树
  var proTplTree = $('#'+divId);
 //一级区划数据
 var source = null;
 //下级区划数据
 var source1 = null;
 
  //根节点url
 var rootUrl = ctx + "/application/fspi/pro/getProTplsTree.do?sessionId=" + sessionId+ "&format=json";
 //首先请求根节点数据DIC_ADMDIV
    $.ajax({
  type: 'POST',
        dataType : 'json',
        url: rootUrl,
        success :function(data) {
         source = {
             datatype: "json",
                datafields: [
                 { name: 'id' },
                 { name: 'parentId' },
                 { name: 'items' },
                 { name: 'label' }
                ],
                id: 'id',
                localdata: data
   };
            //生成区划树
            var dataAdapter = new $.jqx.dataAdapter(source);
            dataAdapter.dataBind();
            var records = dataAdapter.getRecordsHierarchy('id', 'parentId', 'items', [{ name: 'label', map: 'label'}]);
            proTplTree.jqxTree({ source: records, width: divWidth, height: divHeight});
            if(callback){
             //选中根节点 或 将其展开 等 操作
             callback();
            }else{
             //1、点击父节点的时候置灰操作
                $("#byfTopNav_1").byfButtonSwitch([
                    1, 2, 3, 4, 5, 6, 7, 8, 9
                ]);
                //初始化选中第一个项目节点
                $('#projectTree').jqxTree('selectItem', $("#projectTree").find('li:first')[0]);
            }
   //当点击展开区划时执行以下代码(异步加载下级区划)
            proTplTree.on('expand', function (event) {
             var label = proTplTree.jqxTree('getItem', event.args.element).label;
                var $element = $(event.args.element);
                var loader = false;
                var loaderItem = null;
                //第一个下级区划(也就是如果有下级区划时默认加载一个名称为“查询中...”的临时子节点)
                var children = $element.find('ul:first').children();
                //判断是否有区划名称为'查询中...'的下级临时节点
                $.each(children, function () {
                 var item = proTplTree.jqxTree('getItem', this);
                    if (item && item.label == '查询中...') {
                     loaderItem = item;
                        loader = true;
                        return false
     };
                });
                //根据父级区划code查询子节点
                if (loader) {
                 $.ajax({
                     type: "POST",
                     dataType : 'json',
                        url: rootUrl,
                        data: {
                         "parentId":loaderItem.parentId//父级区划code
                        },
                        success :function(data) {
                         if(data.length>0){
                          source1 = {
                                     datatype: "json",
                                     datafields: [
                                         { name: 'id'},
                                         { name: 'parentId' },
                                         { name: 'label'  }
                                     ],
                                     id: 'id',
                                     localdata: data
            };
            var dataAdapter = new $.jqx.dataAdapter(source1);
                                 dataAdapter.dataBind();
                                 var records1 = dataAdapter.getRecordsHierarchy('id', 'parentId', 'items', [{ name: 'label', map: 'label'}]);
                                 //添加子节点
            proTplTree.jqxTree('addTo', records1, $element[0]);
            //删除临时节点
            proTplTree.jqxTree('removeItem', loaderItem.element);
                         }else{
                          //删除临时节点
        proTplTree.jqxTree('removeItem', loaderItem.element);
                         }
                         
      }
     });
    }
   });
  }
 });
}

分享到:
评论

相关推荐

    flex 异步加载tree

    根据给定的信息,我们可以深入探讨Flex中的异步加载Tree组件的相关知识点。 ### 一、Flex与AsyncTree组件 #### 1. Flex简介 Flex是一种开源的框架,用于构建跨平台的桌面应用程序和移动应用程序。它提供了强大的...

    EasyUI实现异步加载tree(整合Struts2)源码

    在本文中,我们将深入探讨如何使用EasyUI框架实现异步加载Tree组件,并将其与Struts2框架整合。EasyUI是一个基于jQuery的轻量级前端框架,提供了丰富的UI组件,包括Tree,它能够方便地构建出层次结构的数据展示。而...

    Ext.ux.tree.treegrid异步加载

    本文详细介绍了如何使用ExtJS中的`Ext.ux.tree.TreeGrid`组件实现异步加载功能,包括前端配置和后端数据处理两个方面。通过这种方式可以有效提升用户体验,同时减轻服务器的压力。在实际开发过程中,还需要根据具体...

    解析jquery easyui tree异步加载子节点问题

    本文主要介绍了如何使用jQuery EasyUI框架中的Tree组件实现异步加载子节点功能,同时解析了在实现过程中可能会遇到的问题及其解决方案。jQuery EasyUI是一个基于jQuery的前端UI库,它提供了一整套基于AJAX的用户界面...

    java实现ztree异步加载

    ZTree的一个显著特性是支持异步加载,这意味着它可以在用户需要时按需加载子节点,减少了初次加载时的数据量,提高了页面响应速度。本文将详细讲解如何使用Java来实现ZTree的异步加载功能。 首先,我们需要理解...

    ExtJS构造动态异步加载

    树组件可以通过配置异步加载来优化性能,当用户展开一个节点时,才去请求该节点的子节点数据。 AJAX(Asynchronous JavaScript and XML)是构建现代Web应用的关键技术之一,它允许在不刷新整个页面的情况下与服务器...

    JS 动态树 异步加载树 xloadtree WebFXLoadTree

    2. 创建树形结构:通过JavaScript代码初始化WebFXLoadTree对象,并指定根节点和其他配置参数,如异步加载的URL、加载事件处理函数等。 3. 加载数据:当用户展开节点时,xloadtree会向服务器发送请求,服务器返回该...

    vue el-tree 默认展开第一个节点的实现代码

    根据提供的文件信息,关于“vue el-tree 默认展开第一个节点的实现代码”这一主题,我们可以梳理出以下知识点: 1. Vue.js与Element UI库:本文内容适用于使用Vue.js框架结合Element UI组件库的开发者。Element UI...

    js TreeMenu 异步加载树形控件

    **JS TreeMenu 异步加载树形控件** 在网页应用中,树形控件(Tree Menu)是一种常见的用户界面元素,它以层级结构展示数据,便于用户进行导航和选择。传统的树形控件通常一次性加载所有节点,这在数据量较大时可能...

    JSTree(js写的树形菜单,支持加载10000节点以上)

    其高效、易用和可扩展的特性,使其在各种Web应用中广泛应用,无论是企业级后台管理界面,还是用户友好的前端导航,都能看到JSTree的身影。掌握JSTree的使用,将有助于提升项目的交互体验和开发效率。

    Flex Tree 异步加载数据及分屏小工具

    综上所述,"Flex Tree 异步加载数据及分屏小工具"涉及的技术点主要包括Flex组件的使用、异步加载机制、数据提供者管理、事件驱动编程、分页策略以及源码分析和优化。这些知识对于构建高效、响应式的Flex应用程序至关...

    动态加载树(tree)和动态加载表格(table)

    动态加载树(Tree)和动态加载表格(Table)是两种常见的数据展示方式,它们在网页应用中广泛使用,特别是在需要显示层级结构数据(如组织结构、文件系统)和大量表格数据(如报表、用户列表)的情况下。 **动态...

    Easyui异步生成树节点,动态获取树节点

    DataGrid 支持分页、排序、过滤等功能,可以通过 AJAX 异步加载数据,也可以与 Tree 结合,实现树形表格,即树节点展开后显示与其关联的表格数据。 5. **注册与登录功能** 在这个项目中,除了 Tree 和 DataGrid 的...

    z-tree实例(二)——异步加载

    在`z-tree`的API中,`getNodeKey`用于获取指定节点的唯一标识,`setting.async.load`是异步加载的核心方法,通常会定义一个回调函数,该函数在需要加载子节点时被调用。在回调函数中,我们可以使用Ajax或者其他异步...

    使用SwingWorker异步加载JTree

    这篇博客“使用SwingWorker异步加载JTree”详细介绍了如何利用SwingWorker来加载大型数据集到JTree组件,避免阻塞UI。 首先,我们需要了解JTree。JTree是Swing中的一个组件,它用来展示树形结构的数据,常用于文件...

    jQuery zTree 异步加载添加子节点重复问题

    通过以上步骤,可以有效解决在zTree中异步加载添加子节点时出现的重复添加问题,确保树形结构的正确更新,维护用户界面的友好性和数据的一致性。此外,了解zTree的其他配置选项和回调函数,例如节点展开、选择、编辑...

    使用ztree异步加载全国地区。

    1. **初始化zTree**:在HTML页面(如tree.jsp)中,我们需要设置zTree的配置项,包括节点的数据源、异步加载的相关参数等。例如,设置`async.enable`为`true`来开启异步加载功能,指定`async.url`为服务器端接口地址...

    Ext 异步加载添加 删除节点 修改combobox选择项

    在Ext JS中,异步加载是一种常见的数据处理方式,尤其在构建动态的用户界面时非常有用。本篇文章主要探讨了如何在异步加载的场景下,实现树形控件(TreePanel)中节点的动态添加、删除以及ComboBox选择项的修改。 ...

    动态加载有子节点的树

    3. **异步加载数据**:数据获取通常是一个异步过程,这意味着我们不能立即更新树结构。因此,我们需要使用回调函数、Promise或者async/await来处理异步操作。 4. **插入新节点**:一旦数据加载完成,我们可以将这些...

    动态加载tree(三层)

    在本场景中,"动态加载tree(三层)"指的是在软件界面中创建一个具有三层结构的树形视图,并在运行时按需加载数据。这通常应用于文件系统、组织结构或者层级关系的数据展示。下面我们将详细探讨动态加载树形结构的关键...

Global site tag (gtag.js) - Google Analytics