在Asp.Net中GridView是一個比較常用的數據呈現控件,在Ext.Net裏GridPanel類似GridView.但效果界面更美觀.如下圖:
![]()
圖中界面設計如下:
圖中界面設計如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridPage.aspx.cs" Inherits="ExtNet.GridPage" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!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>
<script type="text/javascript">
var template = '<span style="color:{0};">{1}</span>';
var InStock = function(value) {
return String.format(template, (value > 50) ? "red" : "green", value);
};
var OnOrder = function(value) {
return String.format(template, (value > 20) ? "red" : "green", value);
};
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<ext:GridPanel
ID="GridPanel1"
runat="server"
StripeRows="true"
Title="分頁顯示"
Width="600"
Height="290"
AutoExpandColumn="ProductName">
<Store>
<ext:Store ID="Store1" runat="server" OnRefreshData="MyData_Refresh">
<Reader>
<ext:JsonReader>
<%-- 使用dataTable做數據源時使用JsonReader,object[] 對象做數據源時使用ArrayReader--%>
<Fields>
<ext:RecordField Name="ProductName" />
<ext:RecordField Name="UnitPrice" Type="Float" />
<ext:RecordField Name="UnitsInStock" Type="Int" />
<ext:RecordField Name="UnitsOnOrder" Type="Int" />
<ext:RecordField Name="Discontinued" Type="Int" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:RowNumbererColumn />
<ext:Column Header="ProductName" Width="80" DataIndex="ProductName" />
<ext:Column Header="UnitPrice" Width="75" DataIndex="UnitPrice">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:Column Header="UnitsInStock" Width="75" DataIndex="UnitsInStock">
<Renderer Fn="InStock" />
</ext:Column>
<ext:Column Header="UnitsOnOrder" Width="75" DataIndex="UnitsOnOrder">
<Renderer Fn="OnOrder" />
<%-- 調用js進行樣式處理 --%>
</ext:Column>
<ext:DateColumn Header="Discontinued" Width="85" DataIndex="Discontinued" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
<LoadMask ShowMask="true" />
<%-- 一般用來在加載數據時遮罩住元素。如果指定了 store配置選項，
遮罩將自動與store的加載進程同步，並且遮罩元素將被緩存以複用。
對於其它所有元素， 當前遮罩將會替換元素Updater的加載提示器，並且在初始化加載之後銷燬。
LoadMask:創建一個新的遮罩,show 將當前遮罩顯示在配置的元素上 --%>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="10">
<%-- 隨着記錄數量的增加，瀏覽器渲染它們所需要的事件越來越長。
分頁用來降低與客戶端交互的數據量。注意：如果記錄/行數 比屏幕的有效可見區域更多，將會自動添加垂直滾動條。 --%>
<Items>
<ext:Label ID="lblPageSize" runat="server" Text="每頁:" />
<ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />
<ext:ComboBox ID="ComboBox1" runat="server" Width="80">
<Items>
<ext:ListItem Text="1" />
<ext:ListItem Text="2" />
<ext:ListItem Text="10" />
<ext:ListItem Text="20" />
</Items>
<SelectedItem Value="10" />
<Listeners>
<Select Handler="#{PagingToolbar1}.pageSize = parseInt(this.getValue()); #{PagingToolbar1}.doLoad();" />
</Listeners>
</ext:ComboBox>
</Items>
</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>
</div>
</form>
</body>
</html>
後臺代碼如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;
using System.Data;
using System.Data.SqlClient;
namespace ExtNet
{
public partial class GridPage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.BindData();
}
}
protected void MyData_Refresh(object sender, StoreRefreshDataEventArgs e)
{
this.BindData();
}
private void BindData()
{
var store = this.GridPanel1.GetStore();
store.DataSource = SqlHelper.ExecuteDataTable(CommandType.Text, @"SELECT ProductName,UnitPrice,UnitsInStock,UnitsOnOrder,Discontinued FROM [Products]");
store.DataBind();
}
}
}
