ComponentArt.web.ui中文帮助之Grid(二)

2.使用回调模式(AJAX)实现一个Grid

当你有大量数据—数百万条记录时，ComponentArt Grid在（RunningMode="Callback")回调运行模式能够提供最好的界面. 在这种模式下, ComponentArt Grid 使用回调来只刷新分页的数据.其他页面元素如图象不刷新，没有数据的表格区域保持原状态.对于很少的数据要得到好的界面效果，客户端运行模式是最好的选择
在回调
在Callback模式下当表格用最近数据重汇时一个微调按纽将出现. 这表明数据在回调中，延迟时间越长说明连接速度越慢或数据量越长
注意：Callback运行模式不支持服务器端模板，因为这种模式不能访问模板中的控件，服务器端模板在运行时产生一个无效的错误

实现一个在Callback运行模式下的表格

1．新建项目grid_client.aspx
2．在设计视图，从工具箱拖拽ComponentArt Grid控件到页面，id=“Grid1”
3.在属性页设置Grid属性如下表

属性	值
ImagesBaseUrl	images
PagerImagesFolderUrl	images
PagerStyle	Slider
RunningMode	Callback

4. 拷贝表格需要的图片和滑块到你的项目的图片文件夹.你可以找到滑块图片在/live_examples/grid/features/client_sideRunningMode/images/pager.
5.在Page_Load事件添加代码
[ C# ]
if (!Page.IsPostBack)
{
Grid1.DataSource = buildGridData();
Grid1.DataBind();
}
6.在页面初始化事件建立和指定服务器端事件委托给PageIndexChanged, SortCommand, NeedRebind, and NeedDataSource 事件
[ C# ]
protected void Page_Init(object sender, EventArgs e)
{
Grid1.PageIndexChanged +=
new ComponentArt.Web.UI.Grid.PageIndexChangedEventHandler
(OnPageIndexChanged);
Grid1.SortCommand +=
new ComponentArt.Web.UI.Grid.SortCommandEventHandler
(OnSortCommand);
Grid1.NeedRebind +=
new ComponentArt.Web.UI.Grid.NeedRebindEventHandler
(OnNeedRebind);
Grid1.NeedDataSource +=
new ComponentArt.Web.UI.Grid.NeedDataSourceEventHandler
(OnNeedDataSource);
}
7.添加处理程序给上述事件.根据表格的要求，这些函数设置新页的索引，获得新的排序语句，刷新从数据库得到的数据或者重绑定到现有数据
[ C# ]
public void OnPageIndexChanged(object sender,
ComponentArt.Web.UI.GridPageIndexChangedEventArgs args)
{
Grid1.CurrentPageIndex = args.NewIndex;
}
public void OnSortCommand(object sender,
ComponentArt.Web.UI.GridSortCommandEventArgs args)
{
Grid1.Sort = args.SortExpression;
}
public void OnNeedDataSource(object sender, EventArgs oArgs)
{
Grid1.DataSource = buildGridData();
}
public void OnNeedRebind(object sender, System.EventArgs oArgs)
{
Grid1.DataBind();
}
8.添加buildGridData()函数，填充和返回ADO.NET数据集.下面的例子使用简单的Access数据库在/live_examples/common/db/demo.mdb.拷贝demo.mdb到你的项目数据文件夹
[ C# ]
private System.Data.DataSet buildGridData()
{
string conStr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=";
conStr += Server.MapPath("~/App_Data/demo.mdb");
System.Data.OleDb.OleDbConnection dbCon =
new System.Data.OleDb.OleDbConnection(conStr);
dbCon.Open();
string sql = "SELECT * FROM Posts ORDER BY LastPostDate DESC";
System.Data.OleDb.OleDbDataAdapter dbAdapter =
new System.Data.OleDb.OleDbDataAdapter(sql, dbCon);
System.Data.DataSet ds = new System.Data.DataSet();
dbAdapter.Fill(ds);
return ds;
}
9..编译浏览页面

3.使用服务器端运行模式实现一个Grid

当你需要访问模板时使用服务器端运行模式的ComponentArt Grid，这种模式实现回传的刷新、分页，排序和数据分组

实现服务器端运行模式的Grid

1.在设计视图，从工具箱拖拽ComponentArt Grid控件到页面，id=“Grid1”

2.在HTML视图，替换现有grid标记为下面的标记。这些设置了服务器端运行模式，含有一层，包含5列.每列绑定在DataSet中的DataTable的字段中

<ComponentArt:Grid ID="Grid1"

CssClass="Grid"

FooterCssClass="GridFooter"

RunningMode="Server"

PagerStyle="Slider"

PagerImagesFolderUrl="images"

PagerTextCssClass="PagerText"

PageSize="18"

ImagesBaseUrl="images"

Width="710" Height="390"

runat="server">

<Levels>

<ComponentArt:GridLevel DataKeyField="PostId">

<Columns>

<ComponentArt:GridColumn DataField="PostId" />

<ComponentArt:GridColumn DataField="Subject" />

<ComponentArt:GridColumn DataField="LastPostDate"

FormatString="MMM dd yyyy, hh:mm tt" />

<ComponentArt:GridColumn DataField="StartedBy" />

<ComponentArt:GridColumn DataField="TotalViews" />

</Columns>

</ComponentArt:GridLevel>

</Levels>

</ComponentArt:Grid>

3.在代码视图，在Load事件，在第一次页面调用时绑定到数据源

[ C# ]

if (!Page.IsPostBack)

{

Grid1.DataSource = buildGridData();

Grid1.DataBind();

}

[ VB.NET ]

If Not IsPostBack Then

Grid1.DataSource = buildGridData()

Grid1.DataBind()

End If

4.在Page_Init事件, 建立和指定服务器端事件委托给PageIndexChanged, SortCommand, NeedRebind, 和NeedDataSource 事件.

[ C# ]

protected void Page_Init(object sender, EventArgs e)

{

Grid1.PageIndexChanged +=

new ComponentArt.Web.UI.Grid.PageIndexChangedEventHandler

(OnPageIndexChanged);

Grid1.SortCommand +=

new ComponentArt.Web.UI.Grid.SortCommandEventHandler

(OnSortCommand);

Grid1.NeedRebind +=

new ComponentArt.Web.UI.Grid.NeedRebindEventHandler

(OnNeedRebind);

Grid1.NeedDataSource +=

new ComponentArt.Web.UI.Grid.NeedDataSourceEventHandler

(OnNeedDataSource);

}

5. 添加处理程序给上述事件.根据表格的要求，这些函数设置新页的索引，获得新的排序语句，刷新从数据库得到的数据或者重绑定到现有数据

[ C# ]

public void OnPageIndexChanged

(object sender, ComponentArt.Web.UI.GridPageIndexChangedEventArgs args)

{

Grid1.CurrentPageIndex = args.NewIndex;

}

public void OnSortCommand

(object sender, ComponentArt.Web.UI.GridSortCommandEventArgs args)

{

Grid1.Sort = args.SortExpression;

}

public void OnNeedDataSource(object sender, EventArgs oArgs)

{

Grid1.DataSource = buildGridData();

}

public void OnNeedRebind(object sender, System.EventArgs oArgs)

{

Grid1.DataBind();

}

6. 添加buildGridData()函数，填充和返回ADO.NET数据集.下面的例子使用简单的Access数据库在/live_examples/common/db/demo.mdb.拷贝demo.mdb到你的项目数据文件夹

[ C# ]

private System.Data.DataSet buildGridData()

{

string conStr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=";

conStr += Server.MapPath("~/App_Data/demo.mdb");

System.Data.OleDb.OleDbConnection dbCon =

new System.Data.OleDb.OleDbConnection(conStr);

dbCon.Open();

string sql = "SELECT * FROM Posts ORDER BY LastPostDate DESC";

System.Data.OleDb.OleDbDataAdapter dbAdapter =

new System.Data.OleDb.OleDbDataAdapter(sql, dbCon);

System.Data.DataSet ds = new System.Data.DataSet();

dbAdapter.Fill(ds);

return ds;

}

7.编译浏览页面