easyui treegrid 调webservice实现异步加载

效果：(不放个图下次看到这个记录时总觉着没印象，呵呵)

首先加载一级节点，单击展开时加载所有子节点。

实现方式：

easyui treegrid+webservice 后台方法，使用json格式数据交互

前台代码：

  //初始化测点树表格
        function InitTreeGrid() {
            $('#tag_treegrid').treegrid({
                 300, height: 350, nowrap: false, rownumbers: true, animate: true, collapsible: true,
                idField: 'id', treeField: 'text', parentField: 'pid', fit: true, fitColumns: true, border: false, showHeader: false,
                url: "CurveDataService.asmx/getTagTreeJSON?parentId=0", //调用webservice时使用url传参
                method:'GET',
                //queryParams: { ip: '', portStr: '', parentId: '0' },
                //第一次加载时可以使用queryParams传递额外参数，但在onBeforeExpand事件里加载时却没有额外参数回传，默认只回传id=**这个参数。
                //但id又不是webmethod的参数名字所以抛出了调用异常,最后改用Get方式提交请求，用url传参。
                onBeforeExpand: function (node) {
                    $('#tag_treegrid').treegrid('options').url = "CurveDataService.asmx/getTagTreeJSON?parentId=" + node.id;
                }
});}

后台代码：

        [WebMethod(Description = "获取测点树")]
        public void getTagTreeJSON(string parentId)
        {
            try
            {
                List<EasyUI_treenode> nodeTree = new List<EasyUI_treenode>();
                if (parentId == "0") //加载区域
                {
                    List<CurveConfig.AreaInfo> allAreaList = CurveService.Instance.getAllAreaInfo();
                    foreach (var area in allAreaList)
                    {
                        nodeTree.Add(new EasyUI_treenode() { id = "Area_" + area.name, text = area.desc, state = "closed" });
                    }

                }

                Context.Response.Write(JsonConvert.SerializeObject(nodeTree));
            }
            catch (Exception ex)
            {
                LogHelper.Instance.LogError("getAllAreaJSON execute error!", ex);
                Context.Response.Write(JsonConvert.SerializeObject(new List<CurveConfig.AreaInfo>()));
            }
        }

实现是遇到几个问题：
1.webservice 返回值

使用 public string MethodName(string para){ return "result"}方式返回的数据会使用xml格式包起来，所以treegrid控件不能识别数据格式，加载数据失败。

改成使用 context.Response.Write() 方法数据问题解决

2.onBeforeExpand 事件里面不能回传额外参数

在IE9的调试请求正文里只看到id=‘sss’ 这么一个参数，并且id不是webmethod方法的参数名字，所以抛出了请求异常。

改用url传参解决这个问题。 url: "CurveDataService.asmx/getTagTreeJSON?parentId=0", //调用webservice时使用url传参

注意需要在web.config里配置一下让webservice支持get请求

  <webServices>
      <protocols>
        <add name="HttpPost" />
        <add name="HttpGet" />
      </protocols>
    </webServices>

改完这些请求还是没有数据的，因为treegrid默认是使用的post请求方式，所以要在前台添加 method：‘GET’属性。

==========================================================================

2013-02-21 更新：

上面webservice 返回值的问题改成Response.write方式后出现了新的问题，同事用Flex调用接收不到这个输出，所以必须改成return方式

  $.ajax({
                type: "POST",
                 dataType:'text',
                url: "FcDatraService.asmx/setDefaultArea",
                data: { areaList: checkQuYuStr },
                success: function (result) {
                    alert($(result)[2].textContent);
                }
            });

改成return方式后，$.ajax在默认情况下回自适应返回值类型，所以在IE下可以使用result.text获取到返回值就是xml格式中间的内容；但火狐和goole下面就不行了，result是个document对象，没有text属性。

所以最后指定为text，这样在各个浏览器下面都是那一段xml的文本，使用jquery对象获取第二个元素的textContent内容就行了。