快捷搜索:  as  as) ORDER BY 1#

extjs的tree的使用(拖动、动态载入json数据、拖动

我是为了实现树的拖动才开始进修extjs的,它也让我认为了extjs的强大年夜,我就直接贴代码了。

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

留意dataUrl的值,那个action便是动态读取json数据的action,如下:

public ActionForward getJsonArray(ActionMapping mapping, ActionForm form,

HttpServletRequest request, HttpServletResponse response){

FndUser user = (FndUser) request.getSession().getAttribute(

HASConstants.SESSION_USER);

JSONArray jsonArray=this.getJson(user);

response.setContentType("text/json; charset=GBK");

try {

response.getWriter().print(jsonArray);

} catch (Exception e) {

log.error("输出json掉败"+e.getMessage());

return null;

}

return null;

}

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

public JSONArray getJson(FndUser user)

{

List list = new ArrayList();

List userContentslist = getUserRssContents(user);

for(Iterator iter=userContentslist.iterator();iter.hasNext();)

{

String[] userContent=(String[])iter.next();

Map tree = new HashMap();

tree.put("text", userContent[1]);

tree.put("id", userContent[0]);

list.add(tree);

}

JSONArray jsonArray = JSONArray.fromObject(list);

return jsonArray;

}

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

tree.loader.dataUrl = '../info/rss.do?method=getChildJsonArray&nodeid='+node.id

根据传入的上级节点的节点ID,获得其下级节点的json款式的数据

public ActionForward getChildJsonArray(ActionMapping mapping, ActionForm form,

HttpServletRequest request, HttpServletResponse response){

FndUser user = (FndUser) request.getSession().getAttribute(

HASConstants.SESSION_USER);

String nodeid=request.getParameter("nodeid");

List list = new ArrayList();

List urllisttree = getUserRssUrl(user,nodeid);

for(Iterator iterurl=urllisttree.iterator();iterurl.hasNext();)

{

String[] userUrl=(String[])iterurl.next();;

Map url = new HashMap();

url.put("text", userUrl[2]);

url.put("id", userUrl[0]);

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

url.put("hrefTarget", "rssiframe");

url.put("allowDrag", Boolean.TRUE);

url.put("leaf", Boolean.TRUE);

list.add(url);

}

JSONArray jsonArray = JSONArray.fromObject(list);

response.setContentType("text/json; charset=GBK");

try {

response.getWriter().print(jsonArray);

} catch (Exception e) {

log.error("输出json掉败"+e.getMessage());

return null;

}

return null;

}

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

对付拖动事故,也是一样的,调用action,来变动文件夹之间的高低级关系,并实现后台的更新数据库,因为处于进修阶段,代码不尽合理。

xmlHttpHelper.js

function XmlHttpHelper(){}

XmlHttpHelper.__getXmlHttpObj = function()

{

try

{

return new ActiveXObject("MSXML2.XMLHTTP");

}

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要领时发送的数据

//

XmlHttpHelper.transmit = function(async, httpMethod, responseType, url, callback, postData)

{

var xmlhttp = this.__getXmlHttpObj();

xmlhttp.open(httpMethod, url, async);

if(!async && httpMethod.toLowerCase() == "post")

{

xmlhttp.setRequestHeader('Content-Length', postData.length);

xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");

}

if(async)

{

xmlhttp.onreadystatechange = function()

{

if(xmlhttp.readyState == 4)

{

try

{

if(responseType != null)

{

if(responseType.toLowerCase() == "text")

callback(xmlhttp.responseText);

else if(responseType.toLowerCase() == "xml")

callback(xmlhttp.responseXML);

}

else

{

callback(null);

}

}

finally

{

xmlhttp = null;

}

}

}

xmlhttp.send(postData);

}

else

{

xmlhttp.send(postData);

if(xmlhttp.status == 200)

{

if(responseType != null)

{

if(responseType.toLowerCase() == "text")

return xmlhttp.responseText;

else if(responseType.toLowerCase() == "xml")

return xmlhttp.responseXML;

}

else

{

return null;

}

}

return null;

}

};

您可能还会对下面的文章感兴趣: