Ext.onReady(function(){
Ext.QuickTips.init();// 浮动信息提示
Ext.BLANK_IMAGE_URL="ext/resources/images/default/tree/s.gif";
function createXMLDOM()
{
var xmlDoc = null;
//通过对象/属性检测法,判断是IE来是Mozilla
if (!window.DOMParser && window.ActiveXObject)
{
var arrVersions= ["MSXML2.DOMDocument.5.0","MSXML2.DOMDocument.4.0",
"MSXML2.DOMDocument.3.0","MSXML2.DOMDocument", "Microsoft.XmlDoc"];
for (var i=0; i < arrVersions.length; i++)
{
try
{
xmlDoc = new ActiveXObject(arrVersions[i]);
return xmlDoc;
}
catch (oError)
{
//忽略,继续
}
}
throw new Error("系统没有安装MSXML");
}else if(xmlDoc == null && document.implementation && document.implementation.createDocument)
{ // Mozilla browsers have a DOMParser
try{
xmlDoc = document.implementation.createDocument("","",null);
return xmlDoc;
}catch (ex){}
}else
{
throw new Error( " Your browser doesn't support an XML DOM object. " );
}
}
if(window.DOMParser){
Document.prototype.loadXML = function(sXml){
var oParser= new DOMParser();
var _xmlDom = oParser.parseFromString(sXml, "text/xml");
while(this.firstChild){
this.removeChild(this.firstChild);
}
for(var i=0;i<_xmlDom.childNodes.length;i++){
var oNewNode = this.importNode(_xmlDom.childNodes[i],true);
this.appendChild(oNewNode);
}
}
}
var gGroupDB = new Array();
function fillGroupDB(xmlDoc)
{
gGroupDB.length = 0;
var groups = xmlDoc.getElementsByTagName("group");
for(var i = 0;i < groups.length;i++)
{
var e = groups[i];
var groupno = getXmlTagValue(e,"groupno");
var groupname = getXmlTagValue(e,"groupname");
var upgroupno = getXmlTagValue(e,"upgroupno");
gGroupDB[gGroupDB.length] = {groupno:groupno,groupname:groupname,upgroupno:upgroupno};
}
}
/*********根据父组号递归创建下属组号的节点**************************************/
function CreateGroupTreeNode(ParentNode,UpGroupNo)
{
var parentElem = document.getElementById("xmltab");
for(var i = 0; i < gGroupDB.length; i++)
{
if(gGroupDB[i].upgroupno == UpGroupNo)
{
var groupno = "";
var groupname = "" ;
groupno = gGroupDB[i].groupno;
groupname = gGroupDB[i].groupname;
var CurNode = new Ext.tree.TreeNode({
text:groupname,
href:'groupusers.html?groupno='+gGroupDB[i].groupno+'&groupname='+gGroupDB[i].groupname,
hrefTarget:'byright',
expanded:true
});
ParentNode.appendChild(CurNode);
CreateGroupTreeNode(CurNode,groupno);
}
}
}
var xmlDoc = null;
var centerno = get_vars(parent.document,"centerno");
var dispatcherno = get_vars(parent.document,"dispatcherno");
var xml = "<?xml version='1.0' encoding='utf-8'?><root><tablenum>2</tablenum><actionnum>0</actionnum><centerno>"+centerno+"</centerno><dispatcherno>"+dispatcherno+"</dispatcherno></root>";
var xmlDoc = createXMLDOM();
xmlDoc.loadXML(xml);
Ext.Ajax.request({ url:"cgi-bin/grouplist.jsp",
xmlData: xmlDoc,
method:'POST',
success: function(response,options){ xmlDoc = response.responseXML;
fillGroupDB(xmlDoc);
//生成根节点
var root=new Ext.tree.TreeNode({
id:"root",
text:"通信录",
href:'groupusers.html?groupno=all&groupname=所有',
hrefTarget:'byright',
expanded:true
});
for(var i = 0; i < gGroupDB.length; i++)
{
if("" == gGroupDB[i].upgroupno || "65535" == gGroupDB[i].upgroupno)
{
//生成根节点下的一级子节点
var childNode=new Ext.tree.TreeNode({
text:gGroupDB[i].groupname,
href:'groupusers.html?groupno='+gGroupDB[i].groupno+'&groupname='+gGroupDB[i].groupname,
hrefTarget:'byright',
expanded:true
});
root.appendChild(childNode); //向根节点中增加一级子节点
//创建子节点
CreateGroupTreeNode(childNode,gGroupDB[i].groupno);
}
}
var tree=new Ext.tree.TreePanel({
title:"联系人组列表",
renderTo:"grouptree",
root:root,
border: false,
width:300,
height:582
});
},
failure: function(response,options){ Ext.MessageBox.alert('错误'); },
scope:this});
});
//xml数据
<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*,java.util.*" errorPage="" %><%
response.getWriter().print("<?xml version=\"1.0\" encoding=\"gb2312\"?>");
response.setContentType("text/xml;charset=gb2312");
response.getWriter().print("<root>");
response.getWriter().print("<returnflag>1</returnflag>");
response.getWriter().print("<groups>");
response.getWriter().print("<group><groupno>1</groupno><groupname>同学</groupname><isdspgroup>0</isdspgroup><upgroupno></upgroupno><upgroupname></upgroupname></group>");
response.getWriter().print("<group><groupno>2</groupno><groupname>张三</groupname><isdspgroup>1</isdspgroup><upgroupno>1</upgroupno><upgroupname>dfasdf</upgroupname></group>");
response.getWriter().print("<group><groupno>3</groupno><groupname>李四</groupname><isdspgroup>1</isdspgroup><upgroupno>1</upgroupno><upgroupname>dfasdf</upgroupname></group>");
response.getWriter().print("<group><groupno>4</groupno><groupname>aabbhhhhhhhhhh</groupname><isdspgroup>0</isdspgroup><upgroupno></upgroupno><upgroupname></upgroupname></group>");
response.getWriter().print("<group><groupno>5</groupno><groupname>bbbbhhhhhhhhhh</groupname><isdspgroup>1</isdspgroup><upgroupno>4</upgroupno><upgroupname>dfasdf</upgroupname></group>");
response.getWriter().print("</groups>");
response.getWriter().print("</root>");
response.setHeader("Cache-Control","no-cache");
response.getWriter().close();
%>
分享到:
相关推荐
要将XML数据转化为EXT树形菜单,我们需要完成以下步骤: 1. **解析XML**:EXT提供了一个名为`Ext.data.XmlReader`的类,用于从XML文档中读取数据。你需要定义reader的配置,包括XML的根节点和数据节点的标识符。...
EXT 分页与树形结构是EXT JavaScript框架中的两种核心特性,它们在开发高效、互动性强的Web应用程序时扮演着重要角色。EXT是一个强大的客户端JavaScript库,用于构建富互联网应用程序(RIA)。在这里,我们将深入...
1. 树形控件的实现:通过 Ext JS 的 TreePanel 和 TreeLoader,从服务器获取 JSON 数据并动态构建树形结构。 2. 文件一 `branchTree.html`:展示了如何配置 Ext JS 的 TreePanel,设置加载器以请求服务器数据,以及...
2. 定义数据源:树形结构的数据通常以JSON或XML格式存储。在这个例子中,我们使用ASP动态生成XML,因为XML是一种结构化的数据交换格式,适合表示层级关系。 3. ASP动态生成XML:在`TreeXML.asp`文件中,你可以使用...
要将这些数据转换为树形结构的JSON字符串,我们需要设计一个算法或方法来遍历数据库中的层次数据并构造相应的JSON结构。 在Ext JS框架中,树形控件分为TreeNode和AsyncTreeNode两种。TreeNode用于静态树,而...
接下来,`TreePanel`是用来展示树形结构数据的组件,常用于文件系统或组织结构的展示。与`Ext.Panel`类似,`TreePanel`也可以动态加载本地数据。这通常涉及到`TreeStore`和`TreeNode`的概念。`TreeStore`用于存储和...
在网页开发中,jQuery Tree 插件是一种常用的工具,用于展示数据的树形结构,通常用于文件系统、组织结构或层级关系的展现。这里我们列举了12款不同的jQuery Tree插件,它们各自具有独特的特性和优势。 1. **jQuery...
通常情况下,数据是从服务器获取的 JSON 或 XML 格式的数据,`DataReader` 负责将这些数据转换为 `Store` 中的 `Record`。 ##### 3.4 DataProxy 数据代理 `DataProxy` 用于处理与服务器的通信,包括发送请求和接收...
EXT树的动态加载能力是其一大亮点,它允许我们按需加载节点,从而减少初始页面加载时的数据量,提高应用性能。 在EXT树中,动态加载通常是通过使用`TreeLoader`类实现的。这个类负责从服务器获取子节点数据,当用户...
Ext Tree Panel是Ext JS中的一个核心组件,用于展示树形结构的数据。它提供了丰富的配置选项和事件处理,可以自定义节点样式、添加拖放功能、以及支持各种数据源。在我们的实例中,Tree Panel将通过XML文件获取初始...
在"struts2中用ext框架显示树(tree)形菜单"这个主题中,我们主要关注如何在Struts2应用中使用EXT框架来展示树形结构数据。EXT框架的TreePanel组件非常适合用来展示层次化的数据,如组织结构、文件系统或导航菜单。...
- **树形结构表格(TreeGrid)**:一次性生成树形表格,支持完整的分页和列排序功能。 - **其他复杂应用场景**:根据实际需求定制化的无限级树形菜单或树形结构。 #### 八、结论 通过使用Ext JS框架的AsyncTreeNode...
EXT TreePanel 是EXT JS库中的一个组件,它用于展示层次结构的数据,通常以树形结构显示,广泛应用于文件系统、组织结构或者菜单的展示。而DWR则是一种允许JavaScript在浏览器端与服务器端进行异步通信的技术,它...
总结,这个示例展示了如何使用ExtJS的GridPanel和TreePanel组件,结合后台数据读取,实现分页显示表格数据和树形结构数据,以及复选框的联动效果。在Visual Studio 2008环境中,开发者可以编写和调试这些功能,为...
Ext JS 是一个强大的JavaScript库,专门用于构建富客户端应用程序,尤其在创建复杂的用户界面时表现卓越。...在实际项目中,还可以结合其他Ext JS组件和功能,如窗体、图表、树形视图等,来打造完整的业务流程。
在EXT.NET框架中,树形控件(Tree)是一种常用的数据展示组件,它允许用户以层级结构展示数据。本文将详细介绍EXT.NET中的树加载及其实现方式,这对于初学者来说是一份很好的参考资料。 首先,EXT.NET中的树形控件...
将`Ext tree`与`DWR`结合,意味着前端的树形视图可以通过DWR直接调用后台的Java方法来获取或更新数据。例如,当用户展开树的一个节点时,前端可以发送一个DWR调用,请求后台填充该节点的子节点数据。后台处理请求后...
树形结构常用于组织和导航大量的分类信息,例如文件系统、组织架构或者网站导航菜单。 在Ext JS中,树(TreePanel)是用于显示树数据的容器。它提供了丰富的功能,包括拖放操作、节点的展开和折叠、节点选择、节点...
本篇将详细讲解如何使用`Ext2.2`和`Struts2`集成,通过`JSON`传输数据生成树形结构。 首先,`Ext2.2`的树形组件(TreePanel)是一种强大的可视化工具,能够展示层级关系的数据。它支持动态加载、拖放操作以及多种...
在ASP.NET环境中,使用Ext JS的TreePanel组件展示数据时,你可能会遇到一个问题,即尝试直接从服务器加载XML文件,但树形结构无法正确显示或数据加载失败。这个问题通常是由于跨域限制、数据格式不正确或者服务器端...