DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> 使用Ext.tree.TreePanel調用webservice動態構建樹
使用Ext.tree.TreePanel調用webservice動態構建樹
編輯:AJAX詳解     
項目中有個需求需要使用樹,並且樹的節點比較多,需要動態加載,看了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>AJaxtitle>
 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>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved