在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();
}
}
}
207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
