Ajax读取Skyline Globe Server服务器中的服务(XML)并展示在zTree树形菜单中

      提到树形菜单，在Web开发中是非常实用的，zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。由于GIS数据的复杂性，由Ajax读取的XMl/JSON数据不能够被zTree认可，需要转化为标准的Json对象。zTree可以接受两种格式的json：标准Json(标准的 JSON 数据需要嵌套表示节点的父子包含关系)和简单Json(简单模式的 JSON 数据需要使用 id / pId 表示节点的父子包含关系)。

1、添加zTree和JQuery需要的Js、Css:

     
   
    
   

2、  通过$.ajax获取SGS服务器的数据：

  function addData() {
      $.ajax({
           //请求方式为get
           type: "GET",
           //xml文件位置
 url: "http://vision/SG/streamer.ashx?&VERSION=1.0.0&Service=WFS&Username=&Password=&request=GetCapabilities",       
           //返回数据格式为xml
           dataType: "xml",
           //请求成功完成后要执行的方法
           success: function (xml) {}

  }）

  }

3、将XML转为Json:

 var json = $.xml2json(xml);

4、将Json转换为简单Json:

 for (var i = 0; i < json.FeatureTypeList.FeatureType.length; i++) {
                   tt = tt + "{id:" + (i+1) + ", pId:0, name:" +"'"  +json.FeatureTypeList.FeatureType[i].Name +"'" + "}"
                   if (i != json.FeatureTypeList.FeatureType.length-1) {
                       tt = tt + ",";
                   }                   
                   }
               tt = tt + "]";

5、很多人进行到这里就开始初始化树形菜单，其结果必然是失败的，因为zTree需要的是Json对象，而不是Json字符串，所以需要一个转换：

var jsonFinal = eval("(" + tt + ")");

6、这是才可以加载json对象到zTree:

 $(document).ready(function () {
                   zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, jsonFinal);
               });

运行结果为：

                                                   

忽略不太美观的设计，毕竟功能是实现啦，贴出来和大家一起分享。下一步就是添加右键功能，实现TE3DWindow和Leaflet加载文件了，加油！骚年！