引言:使用Ext的TreePanel对论坛版块进行管理。

一、使用TreePanel+TreeLoader+ashx
最初直接使用TreePanel自带的TreeLoader指定url:GetForums.ashx(使用JavaScriptSerializer对List<T>进行序列化输出json数据)

 展开所有结点


二、使用TreePanel+Ajax+ashx
但是上面的方法在IE下无法正常加载,改变方法采用调用Ajax指定url:GetForums.ashx,将取到的数据添加到root结点下。

 load data    


三、使用TreePanel+Ajax+WebService
由于版块管理的操作较多,有删除功能对应DeleteForum.ashx,拖动功能对应MoveForum.ashx等等。这样ashx文件会越来越多,怎样才能更好的管理呢?
使用WebService,非常方便,而且连序列化成json的工作都省略了。

主要注意的就是ajax中指定了method为post和headers的Content-Type为application/json

 load data      


Web Service需要注意的地方有
[ScriptService]一定要,这样script才能调用web service
在WebMethod上加上[ScriptMethod(ResponseFormat=ResponseFormat.Json)]

    return list;
  }
}

这样客户端调用就可以得到json
不过得到的数据如下:

 

{"d":[{"__type":"Relax.Web.Admin.Forums.TreeNode","id":59,"text":"web development","leaf":false,"children"
:[{"__type":"Relax.Web.Admin.Forums.TreeNode","id":60,"text":"asp.net","leaf":false,"children":[]},{"__type"
:"Relax.Web.Admin.Forums.TreeNode","id":61,"text":"php","leaf":false,"children":[]}]},{"__type":"Relax
.Web.Admin.Forums.TreeNode","id":62,"text":"web development","leaf":false,"children":[{"__type":"Relax
.Web.Admin.Forums.TreeNode","id":63,"text":"asp.net","leaf":false,"children":[]},{"__type":"Relax.Web
.Admin.Forums.TreeNode","id":64,"text":"php","leaf":false,"children":[]}]}]}


刚开始吓到了,不是我输出的啊?仔细看下,就是{"d" : []}而已,所以只需要将上面的data修改成data.d就可以了。
还有多了个"_type" : "xxx",不过这个没有关系,没有冲突。

补充说明:
当调用WebService需要传入参数的时候如:

 type)
{}

那客户端的ajax的调用指定jsonData就可以了,jsonData中的参数对应Web Service上的参数。

,
      buttons: Ext.MessageBox.OK,
      icon: Ext.MessageBox.ERROR
    });
  }
});

大家可以看到上面多了行removeChildNodes(root);由于小菜使用ajax取得数据之后是直接appendChild到root结点下,所以得先清空下重新获取。
由于TreeNode没有removeChildNodes方法,所以只能自己写一个如下:

只是使用下递归,排除root结点。

    node.remove();
  }
}    


这里严重鄙视下自己,下回分析问题要再认真点。

 

 

 

 

相关文章:

  • 2022-12-23
  • 2021-10-24
  • 2021-11-11
  • 2022-12-23
  • 2021-12-15
  • 2021-12-19
  • 2021-11-14
猜你喜欢
  • 2021-09-02
  • 2021-12-30
  • 2021-07-27
  • 2022-12-23
  • 2022-12-23
  • 2022-03-09
相关资源
相似解决方案