先来看看效果,以前一直喜欢的extjs效果,昨天看到了jquery两个插件的效果,做个了demo,感觉很爽:
此demo得注意几个地方,要调用服务器端webservice返回dataTable对象,必须加Microsoft.Web.Preview.dll的应用,这就要装ajax ctf版本了,相信很多有ajax环境的朋友也未必装了这个版本,所以在你的C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Futures January CTP\v1.0.61025就没有Microsoft.Web.Preview.dll这个文件了,这个大家可以在网上ASPAJAXCTP.msi,装上这个就有Microsoft.Web.Preview.dll,在项目中加上这个应用就之后就是配置web.config了,在web.config中与<System.Web>平级的地方加上下面的代码:
1
<!--配置dataTable序列化开始-->
2
<system.web.extensions>
3
<scripting>
4
<webServices>
5
<jsonSerialization>
6
<converters>
7
<add name="DataSetConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataSetConverter,Microsoft.Web.Preview, Version=1.0.61025.0, Culture=neutral,PublicKeyToken=31bf3856ad364e35"/>
8
<add name="DataRowConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataRowConverter,Microsoft.Web.Preview, Version=1.0.61025.0, Culture=neutral,PublicKeyToken=31bf3856ad364e35"/>
9
<add name="DataTableConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataTableConverter,Microsoft.Web.Preview, Version=1.0.61025.0, Culture=neutral,PublicKeyToken=31bf3856ad364e35"/>
10
</converters>
11
</jsonSerialization>
12
</webServices>
13
</scripting>
14
</system.web.extensions>
15
<!--配置dataTable序列化结束-->
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
下来就可以写webservice了,就返回20数据的一个方法:
1
// [ToolboxItem(false)]
2
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。
3
[System.Web.Script.Services.ScriptService]
4
public class WebServiceData : System.Web.Services.WebService
5
{
6![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
7
[WebMethod]
8
public string HelloWorld()
9
{
10
return "Hello World";
11
}
12
//返回20条数据
13
[WebMethod]
14
public DataTable GetDataList()
15
{
16
DataTable dtb = new DataTable("dd");
17![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
18
dtb.Columns.Add(new DataColumn("Name", typeof(string)));
19
dtb.Columns.Add(new DataColumn("Email", typeof(string)));
20
dtb.Columns.Add(new DataColumn("Salary", typeof(int)));
21![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
22
for (int intLoop = 0; intLoop < 20; intLoop++)
23
{
24
DataRow row = dtb.NewRow();
25
row["Name"] = string.Format("medal{0}", intLoop);
26
row["Email"] = string.Format("medal{0}@126.com", intLoop);
27
row["Salary"] = (intLoop + 1) * 100;
28
dtb.Rows.Add(row);
29
}
30![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
31
return dtb;
32
}
33
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
24
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
25
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
26
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
27
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
28
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
29
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
30
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
31
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
32
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
33
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
你如果用的也是vs2008的话[ToolboxItem(false)]这一行一定要把它干掉,否则客户端会不认识这个webservice的,默认情况是没被干掉的。
下来就是一大堆js的应用了,好像没什么说的,就是jquery的插件代码,放个包上来,想研究下的朋友看看