extjs的tree的使用|江阴雨辰互联

2023年6月22日发(作者：)

extjs的tree的使用（拖动、动态载入json数据、拖动后的事件处理） extjs的tree的使用（拖动、动态载入json数据、拖动后的事件处理）

时间:2009-04-17 11:15 点击:2873次字体：[大中小]

--------------------------------------------------------------------------------

我是为了实现树的拖动才开始学习extjs的，它也让我感到了extjs的强大，我就直接贴代码了一、实现树的jsp页面，我是直接将extjs写到jsp页面的，格式有点乱，呵 %

@pagelanguage=javaimport=.*,.* contentType=text/html;charset=GBKisEr

我是为了实现树的拖动才开始学习extjs的，它也让我感到了extjs的强大，我就直接贴代码了。

一、实现树的jsp页面，我是直接将extjs写到jsp页面的，格式有点乱，呵。。。。。

<%@ page language="java" import=".*,.*"

contentType="text/html; charset=GBK" isErrorPage="true"%>

<%@ taglib uri="/jsp/jstl/core" prefix="c" %>

注意dataUrl的值，那个action就是动态读取json数据的action，如下：

public ActionForward getJsonArray(ActionMapping mapping, ActionForm form,

HttpServletRequest request, HttpServletResponse response){

FndUser user = (FndUser) sion().getAttribute(

N_USER);

JSONArray jsonArray=n(user);

tentType("text/json; charset=GBK");

try {

ter().print(jsonArray);

} catch (Exception e) {

("输出json失败"+sage());

return null;

}

return null;

}

我读取的json数据是第一层节点

public JSONArray getJson(FndUser user)

{

List list = new ArrayList();

List userContentslist = getUserRssContents(user);

for(Iterator iter=or();t();)

{

String[] userContent=(String[])();

Map tree = new HashMap();

("text", userContent[1]);

("id", userContent[0]);

(tree);

}

JSONArray jsonArray = ject(list);

return jsonArray;

}

二、当点击第一层节点时，会异步绑定下级节点，在绑定下级节点前，会调用beforeload函数

l = '../info/?method=getChildJsonArray&nodeid='+

根据传入的上级节点的节点ID，得到其下级节点的json格式的数据

public ActionForward getChildJsonArray(ActionMapping mapping, ActionForm form,

HttpServletRequest request, HttpServletResponse response){

FndUser user = (FndUser) sion().getAttribute(

N_USER);

String nodeid=ameter("nodeid");

List list = new ArrayList();

List urllisttree = getUserRssUrl(user,nodeid);

for(Iterator iterurl=or();t();)

{

String[] userUrl=(String[])();;

Map url = new HashMap();

("text", userUrl[2]);

("id", userUrl[0]);

("href", "../info/?method=getRssComent&rssurl="+userUrl[1]);

("hrefTarget", "rssiframe");

("allowDrag", );

("leaf", );

(url); }

JSONArray jsonArray = ject(list);

tentType("text/json; charset=GBK");

try {

ter().print(jsonArray);

} catch (Exception e) {

("输出json失败"+sage());

return null;

}

return null;

}

这样，就实现了异步加载，看起来真是很简单哦

对于拖动事件，也是一样的，调用action，来更改文件夹之间的上下级关系，并实现后台的更新数据库，由于处于学习阶段，代码不尽合理。

function XmlHttpHelper(){}

XmlHttpHelper.__getXmlHttpObj = function()

{

try

{

return new ActiveXObject("P");

}

catch(e)

{

try

{

return new XMLHttpRequest();

}

catch(ee)

{

throw(new Error(-1, "无法创建XMLHTTP对象。"));

}

};

// 使用XMLHTTP和远程服务器通信。

// // async 是否为异步方式：true/false

// httpMethod http方法："post"/"get"

// responseType 返回数据的类型："text"/"xml"/null

// url 请求的URL地址

// callback 异步操作完成时执行的回调函数

// postData post方式时发送的数据

it = function(async, httpMethod, responseType, url, callback, postData)

{

var xmlhttp = this.__getXmlHttpObj();

(httpMethod, url, async);

if(!async && rCase() == "post")

{

uestHeader('Content-Length', );

uestHeader("Content-Type",

"application/x-www-form-urlencoded;charset=UTF-8");

}

if(async)

{

ystatechange = function()

{

if(tate == 4)

{

try

{

if(responseType != null)

{

if(rCase() == "text")

callback(seText);

else if(rCase() == "xml")

callback(seXML);

}

else

{

callback(null);

}

finally

{

xmlhttp = null;

}

} }

(postData);

}

else

{

(postData);

if( == 200)

{

if(responseType != null)

{

if(rCase() == "text")

return seText;

else if(rCase() == "xml")

return seXML;

}

else

{

return null;

}

return null;

}

};

/ JAVA编程, 专业技术教程网

收藏到：

本文地址：/plus/

标签: extjs json java extjs tree 来源:huazi4995 作者:huazi4995

看完这篇文章有何感觉？已有 12 人表态心情排行榜

欠扁犯困不解一般不错很棒

输入您的搜索字词提交搜索表单

Web

顶一下(3)60%踩一下(2)40%------分隔线---------------------------- 上一篇：extjs的grid应用（java

使用json绑定数据翻页）

下一篇：《ExtJS2.0实用简明教程》之窗口分组

收藏挑错推荐打印相关文章最清楚最简单的extjs的添加、删除、编辑、显示EXTJS 3.0 网狗盘之上传组件[开源]EXTJS3.0 火狐小字体补丁css文件解决ExtJS在火狐浏览器中汉字显示为小字体的样式补丁ExtJS 核心的抽奖程序三款 ExtJS主题(红色,橙色,红间灰)Java+ExtJS 2.2图书管理系统官方布局实例主页面的js源代码学习(简单翻译)Extjs图书管理系统ExtJs扩展之GroupPropertyGridExtJs之带图片的下拉列表框Web页面模板最新评论查看所有评论发表评论查看所有评论

请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。

评价: 中立好评差评

表情:

用户名: 密码: 验证码: 匿名? 发表评论本栏分类

输入您的搜索字词提交搜索表单

Web

ExtJS基础ExtJS官方教程Ext 详解ExtJS实例热点文章extjs的tree的使用（拖动、动态《Ext实战》节选：Checkbox与RadExt树的配置（单选，多选，带复ExtJS Combobox 如何设置默认以ExtJS 3.0 图片浏览程序ander插件的使用Extjs 处理 Date 对象EXTJs 2.0 combo组件使用办法详ExtJs Grid分页时序号自增的实现直接在页面上显示Extjs日期控件-

最新文章最清楚最简单的extjs的添加、删EXTJS 3.0 网狗盘之上传组件[开EXTJS3.0 火狐小字体补丁css文件解决ExtJS在火狐浏览器中汉字显ExtJS 核心的抽奖程序三款 ExtJS主题(红色,橙色,红间Java+ExtJS 2.2图书管理系统EXT EditorGridPanel 中用复选框官方布局实例主页面的js源代码 EXT Grid 导出Excel的另类实现,-

粤ICP备09023972号 Jiang Feng 2009.2 fengyuflying# QQ:185756667

原文来自：雨枫技术教程网

原文网址：/plus/

发布者：admin，转转请注明出处：http://www.yc00.com/news/1687382720a5928.html