ExtJs学习笔记(6)_可分页的GridPanel
时间:2022-04-23
本文章向大家介绍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>
转载请注明来自"菩提树下的杨过"
- Leetcode 297. Serialize and Deserialize Binary Tree
- Leetcode 295. Find Median from Data Stream
- 投入大见效慢,还要做AI?
- Leetcode 292. Nim Game
- Leetcode 290. Word Pattern
- 【深度学习】使用tensorflow实现VGG19网络
- Leetcode 289. Game of Life
- Leetcode 287. Find the Duplicate Number
- Leetcode 284. Peeking Iterator
- Leetcode 283. Move Zeroes
- Leetcode 282. Expression Add Operators
- Leetcode 279. Perfect Squares
- Leetcode 278. First Bad Version
- Leetcode 275. H-Index II
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JAVA实现UTC时间转换成北京时间
- JDK8 LocalDateTime转换成时间戳
- Grafana创建zabbix自定义template(模板)
- 一条SQL引发的“血案”:
- Grafana安装配置Elasticsearch插件
- Elasticsearch升级踩坑记之使用snapshot备份数据
- RabbitMQ的安装及集群搭建方法
- CentOs7搭建rabbitmq集群
- Rabbitmq haproxy keepalived ACCESS_REFUSED - Login was refused using authentication mechanism PLAIN.
- IDEA maven+spring mvc简单项目
- 程序员用python给了女友一个七夕惊喜!
- 微信小程序开发实战(21):发起HTTPS请求
- 打破国外垄断,开发中国人自己的编程语言(2):使用监听器实现计算器
- 自定义你的github主页
- nginx配置ssl证书实现https