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

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

ComponentArt Grid触发和处理服务器端事件

 

ComponentArt Grid的一个重要特征是它能够触发服务器端事件。为了充分发挥他的优势，适当的响应这些事件是至关重要的。这篇文章提供了服务器端事件的概述，同时也是一系列典型应用实例

 

下面是服务器事件的列表以及相应的类定义，版本3.0

 

事件	EventArgs	意义
ColumnReorder	GridColumnReorderEventArgs	一个列的位置在显示顺序中发生变化
DeleteCommand	GridItemEventArgs	行被删除
FilterCommand	GridFilterCommandEventArgs	产生一个服务器端过滤请求
GroupCommand	GridGroupCommandEventArgs	产生一个服务器端分组请求
InsertCommand	GridItemEventArgs	插入新行
ItemCheckChanged	GridItemCheckChangedEventArgs	Checkbox类型的列的选择状态变化
ItemCommand	GridItemCommandEventArgs	服务器模板中的控件导致的回传
ItemDataBound	GridItemDataBoundEventArgs	一个服务器模板被莫行示例化
NeedRebind	EventArgs	表格需要重新绑定到它的数据源
NeedDataSource	EventArgs	数据源需要更新
PageIndexChanged	GridPageIndexChangedEventArgs	一个新的页请求
Scroll	GridScrollEventArgs	一个卷轴滚动请求
SelectCommand	GridItemEventArgs	行被选择
SortCommand	GridSortCommandEventArgs	产生一个服务器端排序请求
UpdateCommand	GridItemEventArgs	行被编辑

 

新页（页改变）请求事件

解释服务器端事件的产生和处理，我们从最基本的例子开始：PageIndexChanged。这个事件表示使用表格分页系统的一个简单请求。除非手工分页请求（通过设置ManualPaging为true），只有必须的动作可以改变表格的CurrentPageIndex来匹配一个请求。下面是我们怎样定义事件处理

 

  public void Grid1_PageIndexChanged

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

  {

    Grid1.CurrentPageIndex = args.NewIndex;

  }

 

这样我们可以建立事件处理的委托

  private void InitializeComponent()

  {

    ...

Grid1.PageIndexChanged += new

ComponentArt.Web.UI.Grid.PageIndexChangedEventHandler(Grid1_PageIndexChanged);

  }

 

选择事件

另一个常用例子是包含关联表行的事件：SelectCommand。这个事件在一个表格行被选时产生，一个回传产生。与事件关联的只有已经选择的行的数据

要想当一行被选中时产生这个事件，我们必须先设置表格控件的AutoPostBackOnSelect为true

  <ComponentArt:Grid runat="server" ID="Grid1" AutoPostBackOnSelect="true" ...>

    ...

  </ComponentArt:Grid>

然后，在后置代码中，我们定义SelectCommand事件委托和事件处理程序

  private void Grid1_SelectCommand(object sender, ComponentArt.Web.UI.GridItemEventArgs args)

  {

    Response.Write("Selected item: " + args.Item["ID"] + "<br />/n");

  }

  private void InitializeComponent()

  {

    ...

 

Grid1.SelectCommand +=

 new ComponentArt.Web.UI.Grid.GridItemEventHandler(Grid1_SelectCommand);

  }

 

 

 

给表格添加右键菜单

ComponentArt Grid提供与ComponentArt Menu的无缝结合来创建智能右键菜单。表格和菜单交换关于选定表格行和他的状态的信息。OnContextMenu 属性指定了产生客户端菜单的子程序.

如下图，菜单操作包括编辑、删除、插入行等。每一个菜单行调用客户端函数来设置表格属性和调用表格方法

添加右键菜单

 1.添加ComponentArt Grid（Grid1）到页面，设置表格为客户端运行模式

2.在表格属性页，设置OnContextMenu属性为ShowContextMenu。ShowContextMenu是你添加在并发步骤中的客户端函数

3.添加ComponentArt Menu（Menu1）到页面。设置页面属性如下

Property       Value 

ContextMenu  Custom

Orientation    Vertical

4.在HTML视图，在</head>标签前，添加客户端JavaScript如下。ShowContextMenu函数在右键单击表格。这个程序选择右键点击的行，显示菜单，传递选定行的信息到ContextData 属性设定的菜单

<script type="text/javascript" language="javascript">

function ShowContextMenu(item, column, evt)

{

  Grid1.Select(item);

  Menu1.ShowContextMenu(evt);

  Menu1.ContextData = item;    

  return false;

}

</script>

5.在</ComponentArt:Menu>结束标记前，添加下面的标记添加行到菜单。

注意，每行包含ClientSideCommand属性值

前三行指出了由ComponentArt Grid自动产生的客户端函数。当表格打开菜单时，Edit 和Delete菜单行传回菜单得到的上下文信息。第四行（Exit）执行一行简单的JavaScript脚本来关闭右键菜单

<Items>

    <ComponentArt:MenuItem Text="Edit Row"

        ClientSideCommand="Grid1.Edit(GridContextMenu.ContextData);" />

    <ComponentArt:MenuItem Text="Delete Row"

        ClientSideCommand="Grid1.Delete(GridContextMenu.ContextData);" />

    <ComponentArt:MenuItem Text="Insert New Row"

        ClientSideCommand="Grid1.Table.AddRow()" />

    <ComponentArt:MenuItem Text="Exit"

        ClientSideCommand="function donthng(){return false;}" />

</Items>

6.编译执行页面，右键点击某行。右键菜单产生.当你点击一行时执行指派的客户端命令

注意：参考/live_examples/grid/features/grid_contextMenu/右键菜单的例子，包括类型，图片，回传数据库等