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);
}
}
});
}
});
}
});
}
- 浏览: 14065 次
- 性别:
- 来自: 呼和浩特
相关推荐
根据给定的信息,我们可以深入探讨Flex中的异步加载Tree组件的相关知识点。 ### 一、Flex与AsyncTree组件 #### 1. Flex简介 Flex是一种开源的框架,用于构建跨平台的桌面应用程序和移动应用程序。它提供了强大的...
在本文中,我们将深入探讨如何使用EasyUI框架实现异步加载Tree组件,并将其与Struts2框架整合。EasyUI是一个基于jQuery的轻量级前端框架,提供了丰富的UI组件,包括Tree,它能够方便地构建出层次结构的数据展示。而...
本文详细介绍了如何使用ExtJS中的`Ext.ux.tree.TreeGrid`组件实现异步加载功能,包括前端配置和后端数据处理两个方面。通过这种方式可以有效提升用户体验,同时减轻服务器的压力。在实际开发过程中,还需要根据具体...
本文主要介绍了如何使用jQuery EasyUI框架中的Tree组件实现异步加载子节点功能,同时解析了在实现过程中可能会遇到的问题及其解决方案。jQuery EasyUI是一个基于jQuery的前端UI库,它提供了一整套基于AJAX的用户界面...
ZTree的一个显著特性是支持异步加载,这意味着它可以在用户需要时按需加载子节点,减少了初次加载时的数据量,提高了页面响应速度。本文将详细讲解如何使用Java来实现ZTree的异步加载功能。 首先,我们需要理解...
树组件可以通过配置异步加载来优化性能,当用户展开一个节点时,才去请求该节点的子节点数据。 AJAX(Asynchronous JavaScript and XML)是构建现代Web应用的关键技术之一,它允许在不刷新整个页面的情况下与服务器...
2. 创建树形结构:通过JavaScript代码初始化WebFXLoadTree对象,并指定根节点和其他配置参数,如异步加载的URL、加载事件处理函数等。 3. 加载数据:当用户展开节点时,xloadtree会向服务器发送请求,服务器返回该...
根据提供的文件信息,关于“vue el-tree 默认展开第一个节点的实现代码”这一主题,我们可以梳理出以下知识点: 1. Vue.js与Element UI库:本文内容适用于使用Vue.js框架结合Element UI组件库的开发者。Element UI...
**JS TreeMenu 异步加载树形控件** 在网页应用中,树形控件(Tree Menu)是一种常见的用户界面元素,它以层级结构展示数据,便于用户进行导航和选择。传统的树形控件通常一次性加载所有节点,这在数据量较大时可能...
其高效、易用和可扩展的特性,使其在各种Web应用中广泛应用,无论是企业级后台管理界面,还是用户友好的前端导航,都能看到JSTree的身影。掌握JSTree的使用,将有助于提升项目的交互体验和开发效率。
综上所述,"Flex Tree 异步加载数据及分屏小工具"涉及的技术点主要包括Flex组件的使用、异步加载机制、数据提供者管理、事件驱动编程、分页策略以及源码分析和优化。这些知识对于构建高效、响应式的Flex应用程序至关...
动态加载树(Tree)和动态加载表格(Table)是两种常见的数据展示方式,它们在网页应用中广泛使用,特别是在需要显示层级结构数据(如组织结构、文件系统)和大量表格数据(如报表、用户列表)的情况下。 **动态...
DataGrid 支持分页、排序、过滤等功能,可以通过 AJAX 异步加载数据,也可以与 Tree 结合,实现树形表格,即树节点展开后显示与其关联的表格数据。 5. **注册与登录功能** 在这个项目中,除了 Tree 和 DataGrid 的...
在`z-tree`的API中,`getNodeKey`用于获取指定节点的唯一标识,`setting.async.load`是异步加载的核心方法,通常会定义一个回调函数,该函数在需要加载子节点时被调用。在回调函数中,我们可以使用Ajax或者其他异步...
这篇博客“使用SwingWorker异步加载JTree”详细介绍了如何利用SwingWorker来加载大型数据集到JTree组件,避免阻塞UI。 首先,我们需要了解JTree。JTree是Swing中的一个组件,它用来展示树形结构的数据,常用于文件...
通过以上步骤,可以有效解决在zTree中异步加载添加子节点时出现的重复添加问题,确保树形结构的正确更新,维护用户界面的友好性和数据的一致性。此外,了解zTree的其他配置选项和回调函数,例如节点展开、选择、编辑...
1. **初始化zTree**:在HTML页面(如tree.jsp)中,我们需要设置zTree的配置项,包括节点的数据源、异步加载的相关参数等。例如,设置`async.enable`为`true`来开启异步加载功能,指定`async.url`为服务器端接口地址...
在Ext JS中,异步加载是一种常见的数据处理方式,尤其在构建动态的用户界面时非常有用。本篇文章主要探讨了如何在异步加载的场景下,实现树形控件(TreePanel)中节点的动态添加、删除以及ComboBox选择项的修改。 ...
3. **异步加载数据**:数据获取通常是一个异步过程,这意味着我们不能立即更新树结构。因此,我们需要使用回调函数、Promise或者async/await来处理异步操作。 4. **插入新节点**:一旦数据加载完成,我们可以将这些...
在本场景中,"动态加载tree(三层)"指的是在软件界面中创建一个具有三层结构的树形视图,并在运行时按需加载数据。这通常应用于文件系统、组织结构或者层级关系的数据展示。下面我们将详细探讨动态加载树形结构的关键...