/**
* 构建行政区划树
* @author frank
*
* @param divId divid
* @param divWidth div宽度（例如：【"200px"】。）
* @param divHeight div高度（例如：【"400px"】。）
* @param loadDeep 区划树深度（例如：加载到盟市为【2】，加载到旗县为【3】，以此类推。）
* @param callback 创建树后的回调函数
*/
function createAdmdivTree(divId,divWidth,divHeight,loadDeep,callback){
//行政区划树
var admdivTree = $('#'+divId);
//一级区划数据
var source = null;
//下级区划数据
var source1 = null;
//行政区划url
var admdivTreeUrl = ctx+'/application/socialSecurity/config/insure/getAdmdivByParentCode.do?format=json&sessionId='+sessionId;
//首先请求根节点数据
$.ajax({
type: 'POST',
dataType : 'json',
url: admdivTreeUrl,
success :function(data) {
//构建临时子节点，name为‘查询中...’，value为根节点的区划code。
for(var d in data){
if(data[d].childcnt>0){
var arr =
{
'parentcode' : data[d].code,
'name' : '查询中...'
}
data.push(arr);
}
}
source = {
datatype: "json",
datafields: [
{ name: 'id', map: 'code' },//区划code
{ name: 'parentId', map: 'parentcode' },//父区划code
{ name: 'name', map: 'name' }//区划名称
],
id: 'id',
localdata: data
};
//生成区划树
var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();
var records = dataAdapter.getRecordsHierarchy('id', 'parentId', 'items', [{ name: 'name', map: 'label'}]);
admdivTree.jqxTree({ source: records, width: divWidth, height: divHeight});
if(callback){
//选中根节点 或 将其展开 等 操作
callback();
}
//当点击展开区划时执行以下代码（异步加载下级区划）
admdivTree.on('expand', function (event) {
var label = admdivTree.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 = admdivTree.jqxTree('getItem', this);
if (item && item.label == '查询中...') {
loaderItem = item;
loader = true;
return false
};
});
//根据父级区划code查询子节点
if (loader) {
$.ajax({
type: "POST",
dataType : 'json',
url: admdivTreeUrl,
data: {
"parentCode":loaderItem.parentId//父级区划code
},
success :function(data) {
//显示到loadDeep层，即加载到loadDeep层时不为其添加name为‘查询中...’的子节点
if(data[0].levelno<loadDeep){
//构建临时子节点，name为‘查询中...’，value为节点的区划code。
for(var d in data){
if(data[d].childcnt>0){
var arr =
{
'parentcode' : data[d].code,
'value' : data[d].code,
'name' : '查询中...'
}
data.push(arr);
}
}
}
source1 = {
datatype: "json",
datafields: [
{ name: 'id', map: 'code' },
{ name: 'parentId',map: 'parentcode' },
{ name: 'name',map: 'name' }
],
id: 'id',
localdata: data
};
var dataAdapter = new $.jqx.dataAdapter(source1);
dataAdapter.dataBind();
var records1 = dataAdapter.getRecordsHierarchy('id', 'parentId', 'items', [{ name: 'name', map: 'label'}]);
//添加子节点
admdivTree.jqxTree('addTo', records1, $element[0]);
//删除临时节点
admdivTree.jqxTree('removeItem', loaderItem.element);
}
});
}
});
}
});
}
/**
* 构建行政区划树 - 根据登陆用户所在行政区划构建
* @author frank
*
* @param divId divid
* @param divWidth div宽度（例如：【"200px"】。）
* @param divHeight div高度（例如：【"400px"】。）
* @param loadDeep 区划树深度（例如：加载到盟市为【2】，加载到旗县为【3】，以此类推。）
* @param callback 创建树后的回调函数
*/
function createAdmdivTreeWithAuth(divId,divWidth,divHeight,loadDeep,callback){
//行政区划树
var admdivTree = $('#'+divId);
//一级区划数据
var source = null;
//下级区划数据
var source1 = null;
//根节点url
var admdivRootUrl = ctx+'/application/socialSecurity/config/insure/getAdmdivByParentCode.do?format=json&sessionId='+sessionId;
//子节点url
var admdivTreeWithAuthUrl = ctx+'/application/socialSecurity/config/insure/getAdmdivByParentCodeWithAuth.do?format=json&sessionId='+sessionId;
//首先请求根节点数据
$.ajax({
type: 'POST',
dataType : 'json',
url: admdivRootUrl,
success :function(data) {
//构建临时子节点，name为‘查询中...’，value为根节点的区划code。
for(var d in data){
if(data[d].childcnt>0){
var arr =
{
'parentcode' : data[d].code,
'name' : '查询中...'
}
data.push(arr);
}
}
source = {
datatype: "json",
datafields: [
{ name: 'id', map: 'code' },//区划code
{ name: 'parentId', map: 'parentcode' },//父区划code
{ name: 'name', map: 'name' }//区划名称
],
id: 'id',
localdata: data
};
//生成区划树
var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();
var records = dataAdapter.getRecordsHierarchy('id', 'parentId', 'items', [{ name: 'name', map: 'label'}]);
admdivTree.jqxTree({ source: records, width: divWidth, height: divHeight, theme : 'summer'});
if(callback){
//选中根节点 或 将其展开 等 操作
callback();
}
//当点击展开区划时执行以下代码（异步加载下级区划）
admdivTree.on('expand', function (event) {
var label = admdivTree.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 = admdivTree.jqxTree('getItem', this);
if (item && item.label == '查询中...') {
loaderItem = item;
loader = true;
return false
};
});
//根据父级区划code查询子节点
if (loader) {
$.ajax({
type: "POST",
dataType : 'json',
url: admdivTreeWithAuthUrl,
data: {
"parentCode":loaderItem.parentId//父级区划code
},
success :function(data) {
//显示到loadDeep层，即加载到loadDeep层时不为其添加name为‘查询中...’的子节点
if(data[0].levelno<loadDeep){
//构建临时子节点，name为‘查询中...’，value为节点的区划code。
for(var d in data){
if(data[d].childcnt>0){
var arr =
{
'parentcode' : data[d].code,
'value' : data[d].code,
'name' : '查询中...'
}
data.push(arr);
}
}
}
source1 = {
datatype: "json",
datafields: [
{ name: 'id', map: 'code' },
{ name: 'parentId',map: 'parentcode' },
{ name: 'name',map: 'name' }
],
id: 'id',
localdata: data
};
var dataAdapter = new $.jqx.dataAdapter(source1);
dataAdapter.dataBind();
var records1 = dataAdapter.getRecordsHierarchy('id', 'parentId', 'items', [{ name: 'name', map: 'label'}]);
//添加子节点
admdivTree.jqxTree('addTo', records1, $element[0]);
//删除临时节点
admdivTree.jqxTree('removeItem', loaderItem.element);
}
});
}
});
}
});
}
geertu
- 浏览: 14203 次
- 性别:
- 来自: 呼和浩特
-
文章分类
最新评论
- 大小: 45.8 KB
分享到：
发表评论
相关推荐
"异步加载树节点"的概念是为了解决这个问题而提出的。本篇文章将详细探讨这一技术及其在实际应用中的重要性。 首先，我们要理解“异步加载”的含义。在计算机编程中，异步操作是非阻塞的，意味着它不会阻止其他任务...
**dtree+ajax异步加载树详解** 在Web开发中，数据展示往往涉及到大量的层级结构，如文件系统、组织架构等。dtree是一款基于JavaScript的树形控件，它能够帮助开发者实现动态、交互式的树状菜单。而Ajax...
现在我们来详细探讨如何利用ZTree和DWR实现异步加载树形菜单。 首先，ZTree是一个轻量级、灵活的jQuery插件，适用于构建可自定义的树形菜单。它支持多种操作，如点击节点、拖拽节点、右键菜单等，且提供了丰富的API...
**ZTree 异步加载树结构详解** ZTree 是一款基于 jQuery 的强大的树形插件，广泛应用于构建具有层级关系的列表。在处理大量数据时，为了提高用户体验，避免一次性加载所有节点导致页面卡顿，我们可以采用异步加载...
标题 "JS 动态树 异步加载树 xloadtree WebFXLoadTree" 指的是在JavaScript中实现的一种特定的树形结构组件，它具备动态加载和异步数据获取的功能。这种技术常用于构建大型数据集的层级展示，如文件系统、组织结构或...
异步加载树是一种在网页或应用中展示大量数据的有效方式，尤其在数据层次结构复杂时。这种方式可以在用户滚动或展开节点时动态加载所需的数据，从而提高页面性能，减少初次加载时的数据量。XoadTree是一个用于实现...
本篇文章将深入探讨jQuery插件中的“TreeView”组件，特别是关于其异步加载树的实现。 TreeView是一种常见的UI元素，它通常用于展示层次结构的数据，如文件系统、组织结构等。在网页应用中，TreeView插件能够以树形...
"ext 异步加载树完整版" 提到的是EXT JS框架中的一个特性，EXT JS是一个广泛使用的JavaScript库，用于构建富客户端Web应用程序。在这个场景下，"异步加载树"是指树形组件（Tree Panel）不一次性加载所有节点，而是...
在上述问题中，开发者遇到了在S2SH项目中使用zTree异步加载树节点的问题。首先，我们需要了解zTree异步加载的基本配置。`settingMan`对象包含了zTree的配置参数： 1. `data.simpleData.enable : true`：开启简单...
在本场景中，我们将探讨如何利用递归、easyUI和Servlet来实现异步加载树形结构的数据。EasyUI是一个基于jQuery的前端框架，提供丰富的组件，包括我们这里提到的树形控件。而Servlet是Java Web开发中的服务器端组件，...
**JS TreeMenu 异步加载树形控件** 在网页应用中，树形控件（Tree Menu）是一种常见的用户界面元素，它以层级结构展示数据，便于用户进行导航和选择。传统的树形控件通常一次性加载所有节点，这在数据量较大时可能...
在某些场景下，如数据量大或数据动态加载时，我们通常需要实现异步加载树（Async Loading）。本文将详细介绍如何在Vue和ElementUI中实现异步加载树。 首先，我们要对路由文件进行配置，引入相关组件。在提供的代码...
在SSM项目中结合zTree实现异步加载树，可以使得前端界面更加动态和灵活。 首先，我们需要在项目中引入zTree的CSS和JavaScript文件，这些通常可以从zTree的官方网站或者通过npm、yarn等包管理工具获取。然后在HTML...
本人手写的一款js树形控件，附带图片，代码简洁，注释齐全，可读性高，易于维护，方便移植，结构清晰，思路明了，界面美观，同时支持异步加载，对浏览器的兼容行强，你还可以根据自己的需要扩展功能，可大量应用于...
AsyncTree是Flex中的一个自定义组件，它允许开发者构建能够异步加载数据的树形结构。这通常用于展示大量数据或者需要动态加载子节点的情况。通过这种方式，可以显著提高应用的性能和用户体验。 ### 二、代码解析 #...
title: '动态异步加载树', store: treeStore, rootVisible: false, // 隐藏根节点 renderTo: Ext.getBody(), // 渲染到页面body listeners: { itemexpand: function (node) { // 当节点被展开时触发 if (!...
DataGrid 支持分页、排序、过滤等功能，可以通过 AJAX 异步加载数据，也可以与 Tree 结合，实现树形表格，即树节点展开后显示与其关联的表格数据。 5. **注册与登录功能** 在这个项目中，除了 Tree 和 DataGrid 的...
1. **异步加载树结构**： 异步树结构主要应用于那些数据量大或者层级深的场景，避免一次性加载所有节点导致页面卡顿。EasyUI 提供了两种主要的异步树组件：`combotree` 和 `treegrid`。 2. **Combotree（树形...
- 在JavaScript中，可以利用Promise、async/await或者回调函数来实现异步加载树的节点。当用户滚动或展开某个节点时，只请求该节点及其子节点的数据。 4. **异步树的操作**： - **懒加载**：首次加载只包含根节点...