一.WCF部分
1.通过查看官方的示例得知，分页数据源需要一个记录总数值，为保持通用性，这里借鉴jillZhang的文章http://www.cnblogs.com/jillzhang/archive/2008/06/29/1232086.html，把他写的通用类PageData拿过来直接用
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->1usingSystem;
2usingSystem.Runtime.Serialization;
3
4namespaceAjax_WCF
5{
6[DataContract]
7publicclassPageData<T>
8{
9[DataMember]
10publicintTotolRecord
11{get;set;}
12
13[DataMember]
14publicTData
15{get;set;}
16}
17}
2.服务端的WCF方法:GetDataByPage
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->[OperationContract]
[WebInvoke(Method="*",ResponseFormat=WebMessageFormat.Json,UriTemplate="GetDataByPage?start={start}&limit={limit}")]
publicPageData<T_Class[]>GetDataByPage(intstart,intlimit)
{
PageData<T_Class[]>_Result=newPageData<T_Class[]>();
using(DBDataContextdb=newDBDataContext())
{
try
{
IQueryable<T_Class>query=db.T_Classes;
_Result.TotolRecord=query.Count();
varquery2=query.OrderBy(c=>c.F_RootID).ThenBy(c=>c.F_Orders).Select(c=>new{F_ID=c.F_ID,F_ClassName=c.F_ClassName,F_ParentID=
c.F_ParentID,F_Orders=c.F_Orders,F_ReadMe=c.F_ReadMe}).Skip(start).Take(limit);
_Result.Data=db.ExecuteQuery<T_Class>(query2,true).ToArray<T_Class>();
}
catch{}
db.Connection.Close();
}
return_Result;
}
这里讲一个小技巧，也是从jillZhang那里学过来的，以前默认在linq to sql(dbml)设计器里拖出来的类，默认生成的代码是不支持序列化的，我们只能手动添加[DataContract]和[DataMember]，
其实系统可以自动生成的，方法是在dbml的属性栏里设置"序列化模式"为"单向"，如下图:
二.静态页部分
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="04_Grid_Page.aspx.cs"Inherits="Ajax_WCF._4_Grid_Page"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<linkrel="stylesheet"type="text/css"href="js/ext2.2/resources/css/ext-all.css"/>
<scripttype="text/javascript"src="js/ext2.2/adapter/ext/ext-base.js"></script>
<scripttype="text/javascript"src="js/ext2.2/ext-all.js"></script>
<title></title>
</head>
<body>
<scripttype="text/javascript">
Ext.onReady(function(){
varproxy=newExt.data.HttpProxy({
url:'MyService.svc/GetDataByPage',
method:'GET'
});
varreader=newExt.data.JsonReader(
{root:'Data',totalProperty:'TotolRecord'},
[
{name:'F_ID'},
{name:'F_ClassName'},
{name:'F_ParentID'},
{name:'F_Orders'},
{name:'F_ReadMe'}
]
);
varstore=newExt.data.Store(
{proxy:proxy,reader:reader}
);
//createtheGrid
vargrid=newExt.grid.GridPanel({
store:store,
columns:[
newExt.grid.RowNumberer(),
{id:'F_ID',header:"分类ID",width:30,sortable:true,dataIndex:'F_ID'},
{header:"分类名称",width:75,sortable:true,dataIndex:'F_ClassName'},
{header:"父类ID",width:75,sortable:true,dataIndex:'F_ParentID'},
{header:"排序号",width:75,sortable:true,dataIndex:'F_Orders'},
{header:"备注",width:50,sortable:true,dataIndex:'F_ReadMe'}
],
stripeRows:true,
autoExpandColumn:'F_ID',
height:393,
width:600,
title:'产品信息',
viewConfig:
{
columnsText:'列',
sortAscText:'升序',
sortDescText:'降序'
},
bbar:newExt.PagingToolbar({
pageSize:15,//每页显示的记录值
store:store,
displayInfo:true,
displayMsg:'总记录数{0}-{1}of{2}',
emptyMsg:"没有记录"
})
});
grid.render('page-grid');
store.load({params:{start:0,limit:15}});
grid.getSelectionModel().selectFirstRow();
});
</script>
<divid="page-grid"></div>
</body>
</html>
转载请注明来自"菩提树下的杨过"
http://www.cnblogs.com/yjmyzz/archive/2008/08/30/1280282.html
相关推荐
这篇博客"EXTJS_GridPanel_ColumnModel_列的宽度随数据变化而变化"探讨了如何使GridPanel的列宽根据数据内容自动调整，以确保最佳的用户界面体验。 在EXTJS中，ColumnModel允许我们定义每列的标题、数据字段、宽度...
ExtJs 教程与实例_学习笔记 1.什么是ExtJs 2....等等
6. **样式与布局**：由于两个框架都涉及用户界面，可能需要处理 ExtJS 样式与 Tapestry 默认样式之间的冲突，以确保视觉一致性。 通过这样的集成，开发者可以获得 ExtJS 提供的精美 UI 组件和 Tapestry 强大的后端...
在"EXT_ASP.rar_asp extjs_extjs_extjs asp_extjs+asp"这个压缩包中，我们可以看到EXTJS与ASP结合使用的示例，用于开发一个通讯录程序，这是一个很好的学习EXTJS和ASP集成的实践项目。 首先，EXTJS的核心在于它的...
ExtJS实现的用户管理界面,实现了用户的增加功能、修改功能、删除功能、查看工程。还提供了下拉列表选择框进行年龄的选择功能。
ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc
6. **性能优化**：使用EXTJS时，应考虑页面加载速度，可能需要进行数据分页、延迟加载等优化。PHP端则可以通过缓存策略、数据库查询优化等方式提升性能。 7. **版本控制**：虽然未提及，但良好的开发实践中，项目...
标题中的"ssh_extjs.rar_extjs_extjs ssh_oracle"提到了几个关键的IT技术，它们是SSH（Spring、Struts、Hibernate...学习和理解这些技术对于提升Java Web开发能力至关重要，尤其是在需要构建高效、可扩展的业务应用时。
这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略，特别是在大数据量的情况下，它将数据分批加载，避免一次性加载所有记录导致的...
资源名称：获取ExtjS表格的值_ ExtJS_3.4 cellSelectModel资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式，就是Ext.create(....)，而且可以使用动态...ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(十)---ExtJS4图片验证码的实现
目录 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 ...28. extJs 2.0学习笔记(ext.js篇) 77
本学习文档聚焦于ExtJS 6版本，以下是各章节的主要知识点： 第1章：ExtJS入门指南 在这一章中，你会了解到ExtJS的基本架构和工作原理，包括如何创建基本的页面、加载库文件、理解和使用MVC（Model-View-Controller...
6. **拖放功能**：通过ExtJS的`DragDrop`插件，可以实现Web应用内的拖放操作，如同Windows文件管理器中的文件拖放。 7. **数据绑定**：ExtJS的数据模型和Store组件可以与C#后端的数据接口无缝对接，实现数据的实时...
extjs_struts2_整合
EXTJS+PHP bs小型房屋管理系统
总之，"ExtJs_ASPMVC_Batch_Operation.rar"是一个综合性的示例，涵盖了Web开发中的多个重要技术，对于想要深入学习ExtJS与ASP.NET MVC集成的开发者来说，是一个宝贵的资源。通过实践这个项目，你可以了解到如何在...
### Extjs 5 学习笔记之 SenchaCmd 深入解析 #### 一、SenchaCmd 的简介 SenchaCmd 是一个跨平台的命令行工具，它为基于 ExtJS 和 Sencha Touch 应用程序的开发周期提供了全面的支持。从创建应用程序的基础结构到...
GridPanel则是ExtJS中的表格视图组件，它可以展示大量的数据，并提供排序、筛选、分页等功能。在集成TreePanel和GridPanel时，可能涉及到的概念有：将TreePanel的节点与GridPanel的数据关联，实现点击树节点时动态...
extjs3.1中文API_chm版+书 下次再穿个可视化编辑器