ExtJs学习笔记(6)_可分页的GridPanel

一.WCF部分 1.通过查看官方的示例得知,分页数据源需要一个记录总数值,为保持通用性,这里借鉴jillZhang的文章,把他写的通用类PageData拿过来直接用

  1 using System;
  2 using System.Runtime.Serialization;
  3 
  4 namespace Ajax_WCF
  5 {
  6     [DataContract]
  7  public class PageData<T>
  8     {
  9         [DataMember]
 10  public int TotolRecord
 11         { get; set;}
 12 
 13         [DataMember]
 14  public T Data
 15         { get; set; }
 16     }    
 17 }

2.服务端的WCF方法:GetDataByPage

[OperationContract]
         [WebInvoke(Method = "*", ResponseFormat = WebMessageFormat.Json,UriTemplate = "GetDataByPage?start={start}&limit={limit}")]
 public PageData<T_Class[]> GetDataByPage(int start, int limit)
         {            
             PageData<T_Class[]> _Result = new PageData<T_Class[]>();
 using (DBDataContext db = new DBDataContext())
             {
 try
                 {
                     IQueryable<T_Class> query = db.T_Classes;
                     _Result.TotolRecord = query.Count();
                     var query2 = 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的属性栏里设置"序列化模式"为"单向",如下图: 二.静态页部分

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="04_Grid_Page.aspx.cs" Inherits="Ajax_WCF._4_Grid_Page" %>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" >
 <head runat="server">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
 <link rel="stylesheet" type="text/css" href="js/ext2.2/resources/css/ext-all.css" /> 
 <script type="text/javascript" src="js/ext2.2/adapter/ext/ext-base.js"></script> 
 <script type="text/javascript" src="js/ext2.2/ext-all.js"></script>
 <title></title>
 </head>
 <body>
 <script type="text/javascript">
     Ext.onReady(function() {
 var proxy = new Ext.data.HttpProxy({
             url: 'MyService.svc/GetDataByPage',
             method: 'GET'
         });
 
 var reader = new Ext.data.JsonReader(
         { root: 'Data', totalProperty: 'TotolRecord' },
             [
                 { name: 'F_ID' },
                 { name: 'F_ClassName' },
                 { name: 'F_ParentID' },
                 { name: 'F_Orders' },
                 { name: 'F_ReadMe' }
             ]
         );
 
 var store = new Ext.data.Store(
             { proxy: proxy, reader: reader }
         );
 
 // create the Grid 
  var grid = new Ext.grid.GridPanel({
             store: store,
             columns: [
 new Ext.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: new Ext.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>
 <div id="page-grid"></div>
 </body>
 </html>

转载请注明来自"菩提树下的杨过"

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏生信技能树

下载TCGA所有癌症的maf文件做signature分析

才sanger研究所已经做好了这个分析,但是值得我们重复一下,效果如下: ? TCGA所有癌症的mutation signature 首先TCGA所有癌症的ma...

71812
来自专栏狂码一生

用MFC写一个聊天室程序 - 学习笔记

下面的服务器端与客户端的程序与步骤是我在学习MFC网络编程写一个聊天室程序所写的程序,在这里作一个笔记,也希望能帮到一部分刚刚学习的朋友,一起共勉,一起努力历进...

1.1K15
来自专栏跟着阿笨一起玩NET

C#实现树型结构TreeView节点拖拽的简单功能(转)

本文摘抄博客园里面的牛人吉日嘎啦。http://www.cnblogs.com/jirigala

2601
来自专栏ml

caffe源码学习之Proto数据格式【1】

前言:   由于业务需要,接触caffe已经有接近半年,一直忙着阅读各种论文,重现大大小小的模型. 期间也总结过一些caffe源码学习笔记,断断续续,这次打算系...

6028
来自专栏c#开发者

Easyui DataGrid DateRange Filter 漂亮实用的日期区间段筛选功能

自定义扩展Jquery easyui datagrid filter组件实现对日期类型区间段的筛选功能。显示效果如一下 ? 是不是非常实用 引用的jquery ...

4027
来自专栏码匠的流水账

聊聊spring cloud gateway的RetryGatewayFilter

本文主要研究一下spring cloud gateway的RetryGatewayFilter

1882
来自专栏逸鹏说道

ExecuteReader在执行有输出参数的存储过程时拿不到输出参数

异常处理汇总-后端系列 http://www.cnblogs.com/dunitian/p/4523006.html 后期会在博客首发更新:http://dnt...

3557
来自专栏草根专栏

使用angular4和asp.net core 2 web api做个练习项目(一)

这是一篇学习笔记. angular 5 正式版都快出了, 不过主要是性能升级. 我认为angular 4还是很适合企业的, 就像.net一样. 我用的是wind...

7155
来自专栏移动开发面面观

ProgressiveJpeg介绍与在Android中的使用

2524
来自专栏跟着阿笨一起玩NET

C#如何快速高效地导出大量数据?

本文转载:http://www.cnblogs.com/herbert/archive/2010/07/28/1787095.html

4341

扫码关注云+社区

领取腾讯云代金券