现在的位置: 首页 > 综合 > 正文

Extjs 3.2.1 GridPanel 分页(数据源为aspx返回的xml格式数据流)

2012年02月24日 ⁄ 综合 ⁄ 共 4056字 ⁄ 字号 评论关闭

刚开始学习Extjs,百度+股沟了很久,看了很多例子,发现还是官方的API最管用,其实重要的还是在理解其原理上

比如分页,是按照传给aspx页面的params: { start: 0, limit: 26}来进行取值的,其实分页还是在后台自己处理的

另外增加了网上找的导出数据到Excel以便打印的功能

 

废话少说,代码展示一切:

 

主页面:

 

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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">
<title></title>

<%--ExtJS库--%>
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css" />
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ExtJS/ext-all.js"></script>

<%--数据处理JS--%>
<script type="text/javascript" src="GetData.js" charset="gb2312"></script>

</head>
<body>

<div id="myGrid">

</div>

</body>
</html>

 

 

 

 

取值页面后台Data.aspx.cs 

Data.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Data : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
int start = Int32.Parse(Request["start"]);
int limit = Int32.Parse(Request["limit"]);

List
<string> datalist = new List<string>();
datalist
= GetData();
datalist.TrimExcess();

int end = start + limit;//得到数据总量

string datastr = "<records><totalRecords>"+ datalist.Count.ToString() +"</totalRecords>";

//该判断用于最后一页数据小于每页行数的情况,更新要返回的limit
if (end > datalist.Count)//如果请求数据总量大于实际数据总量
{
limit
= datalist.Count - start;//修改将要取值的条数
}

for (int i = 0; i < limit; i++)
{
datastr
+= datalist.GetRange(start, limit)[i].ToString();//取值
}

datastr
+= "</records>";

Response.ContentType
= "text/xml";
Response.Write(datastr);
}

private List<string> GetData()
{
List
<string> datalist = new List<string>();
//string data = "<records><totalRecords>100</totalRecords>";
string data = "";
for (int i = 1; i <= 100; i++)
{
data
= "<record>";
data
+= "<id>" + i.ToString() + "</id>";
data
+= "<name>" + "" + i.ToString() + "" + "</name>";
data
+= "<time>" + DateTime.Now.ToLongTimeString() + "</time>";
data
+= "</record>";

datalist.Add(data);
data
= "";
}

return datalist;
}
}

 

 

核心JS文件 

 

GetData.js


var myInfo = Ext.data.Record.create([
{name:
'name', mapping: 'name'},
{name:
'time',mapping:'time'}
]);

var myReader = new Ext.data.XmlReader({
totalProperty:
'totalRecords',
record:
'record',
idProperty:
'id'
},myInfo);

var ds = new Ext.data.Store({
proxy:
new Ext.data.HttpProxy({
url:
'Data.aspx'
}),
reader:myReader
});

//重载RowNumberer,使每页的行编号自动增加
Ext.grid.RowNumberer = Ext.extend(Ext.grid.RowNumberer, {
renderer:
function (value, cellmeta, record, rowIndex, columnIndex, store) {
return store.lastOptions.params.start + rowIndex + 1;
}
});

var rownum = new Ext.grid.RowNumberer();
rownum.width
= 40;

var cm = new Ext.grid.ColumnModel([
rownum,
{ header:
'姓名', dataIndex: 'name' },
{ header:
'时间', dataIndex: 'time' }
]);

Ext.onReady(
function () {
Ext.BLANK_IMAGE_URL
= 's.gif';
var grid = new Ext.grid.GridPanel({
renderTo:
'myGrid',
loadMask: { msg:
'数据请求中,请稍后...' },
cm: cm,
store: ds,
stripeRows:
true, //隔行颜色不同
title: '事件记录报表',
tbar:
new Ext.Toolbar({
width:
600,
items: [
'查询时间',
'-',
{
text:
'打印',
cls:
'x-btn-text',
handler:
function () {
downloadViewData(grid);
}
}
]
}),
width:
600,
height:
500,
bbar:
new Ext.PagingToolbar({
pageSize:
26,
store: ds,
displayInfo:
true,
beforePageText:
'',
afterPageText:
'/{0}页',
firstText:
'首页',
prevText:
'上一页',
nextText:
'下一页',
lastText:
'尾页',
displayMsg:
'显示 第 {0} 条 到 第 {1} 条 记录,共 {2} 条记录',
emptyMsg:
'无记录'
})
});
ds.load({
params: { start:
0, limit: 26 }
});

function downloadViewData(grid) {
try {
var xls = new ActiveXObject('Excel.Application');
}
catch (e) {
alert(
'未安装Excel软件或者当前浏览器禁止执行控件');
return '';
}

var cm = grid.getColumnModel();
var colCount = cm.getColumnCount();

xls.visible
= true;
var xlBook = xls.Workbooks.Add;
var xlSheet = xlBook.Worksheets(1);

var temp_obj = [];

//获取列标
for (i = 1; i < colCount; i++) {
if (cm.isHidden(i) == true) {
//隐藏列不打印
} else {
temp_obj.push(i);
}
}

//获取列标题值
for (i = 1; i <= temp_obj.length; i++) {
xlSheet.Cells(
1, i).Value = cm.getColumnHeader(temp_obj[i - 1]);
}

var store = grid.getStore();
var recordCount = store.getCount();
var view = grid.getView();

//获取数据值
for (i = 1; i <= recordCount; i++) {
for (j = 1; j <= temp_obj.length; j++) {
xlSheet.Cells(i
+ 1, j).Value = view.getCell(i - 1, temp_obj[j - 1]).innerText;
}
}

xlSheet.Columns.AutoFit;
xls.ActiveWindow.Zoom
= 75; //设置Excel单元格的大小
xls.UserControl = true;
xls
= null;
xlBook
= null;
xlSheet
= null;
}
});

 

抱歉!评论已关闭.