技术开发 频道

使用Ext.tree.TreePanel调用webservice动态构建树


【IT168技术文档】

  项目中有个需求需要使用树,并且树的节点比较多,需要动态加载,看了Ext.tree.TreePanel中的例子,TreeLoader只能接受Json数据。webservice传输的是xml文档,不能直接调用。在网上找了2天,终于解决这个问题。
  default.aspx页面
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Ajax._Default" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head runat="server"> 6 <title>Ajax</title> 7 <link href="ext-2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> 8 9 <script src="ext-2.0/ext-base.js" type="text/javascript"></script> 10 11 <script src="ext-2.0/ext-all.js" type="text/javascript"></script> 12 13 <script src="ext-2.0/ext-lang-zh_CN.js" type="text/javascript"></script> 14 15 <script src="js/XmlTreeLoader.js" type="text/javascript"></script> 16 17 </head> 18 <body> 19 <form id="form1" runat="server"> 20 <div id="tree" style="width: 400px; height: 500px;"> 21 </div> 22 </form> 23 24 <script language="javascript" type="text/javascript"> 25 Ext.onReady(function(){ 26 Ext.BLANK_IMAGE_URL="ext-2.0/resources/images/default/s.gif"; 27 var tree = new Ext.tree.TreePanel({ 28 el:'tree', 29 animate:true, 30 autoScroll:true, 31 containerScroll: true, 32 loader: new Ext.ux.XmlTreeLoader({ 33 dataUrl:"http://localhost/WebService/WebService.asmx/GetCompany", 34 requestMethod:"post" 35 }) 36 }); 37 38 // set the root node 39 var root = new Ext.tree.AsyncTreeNode({ 40 text: '全部', 41 draggable:false, 42 id:'0' 43 }); 44 tree.setRootNode(root); 45 46 // render the tree 47 tree.render(); 48 root.expand(); 49 }); 50 </script> 51 52 </body> 53 </html>
0
相关文章