Easyui treegrid calls webservice for asynchronous loading

Effect(Don't put a picture. The next time I see this record, I'm not impressed)

Load the first-level node, and click expand to load all the child nodes.

Implementation Method:

Easyui treegrid + webservice background method, Data Interaction in json format

Front-end code:

// Initialize the function InitTreeGrid () {$ ('# tag_treegrid') of the measurement point tree table '). treegrid ({width: 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 ", // when calling webservice, use the url to pass the parameter method: 'get', // queryParams: {ip:'', portStr: '', parentId: '0'}, // when loading for the first time, you can use queryParams to pass additional parameters, but there is no additional parameter for returning when loading in the onBeforeExpand event. By default, only the parameter id = ** is returned. // But the id is not the parameter name of webmethod, so a call exception is thrown. Finally, the request is submitted in Get mode and the parameter is passed through url. OnBeforeExpand: function (node) {$ ('# tag_treegrid'). treegrid ('options'). url = "CurveDataService. asmx/getTagTreeJSON? ParentId = "+ node. id ;}});}

Background code:

[WebMethod (Description = "")] public void getTagTreeJSON (string parentId) {try {List <EasyUI_treenode> nodeTree = new List <EasyUI_treenode> (); if (parentId = "0") // load the region {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> ()));}}

Implementation involves several problems:
1. webservice Return Value

Data returned using the public string MethodName (string para) {return "result"} method is packaged in xml format. Therefore, the treegrid control cannot identify the data format and fails to load the data.

Use context. Response. Write () to solve the data problem.

2. No additional parameters can be returned in the onBeforeExpand event.

In the debugging Request body of IE9, only the parameter id = 'ss' is displayed, and the id is not the parameter name of the webmethod method. Therefore, a request exception is thrown.

Use url parameter passing to solve this problem. Url: "CurveDataService. asmx/getTagTreeJSON? ParentId = 0 ", // use url to pass parameters when calling webservice

Note that you need to configure webservice to support get requests in web. config.

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

There is still no data for these requests. Because treegrid uses the post Request method by default, you must add the method: 'get' attribute on the foreground.

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

Update:

The preceding webservice returned value problem is changed to the Response. write method, and a new problem occurs. The colleague cannot receive this output using the Flex call, so the return method must be changed.

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

After the return method is changed, $. ajax returns the adaptive return value type by default, so you can use result in IE. the returned value obtained by text is the content in the middle of the xml format. However, Firefox and goole won't work, and result is a document object without the text attribute.

Therefore, the text is specified as text. In this way, the xml text is stored in each browser. You can use the jquery object to obtain the textContent of the second element.