基於FineUI Grid控件添加右鍵菜單

基於FineUI Grid控件添加右鍵菜單。本站提示廣大學習愛好者：（基於FineUI Grid控件添加右鍵菜單）文章只能為提供參考，不一定能成為您想要的結果。以下是基於FineUI Grid控件添加右鍵菜單正文

FineUI官方Demo上一向沒有Grid右鍵菜單的完成，其實從4.1.x的版本開端，許可添加自界說的事宜監聽（Listeners），所以要完成這個功效曾經相當輕易了。

ExtJs右鍵菜單有許多種，關於Grid控件來講，我這裡只簡略解釋兩種完成。即在表格的數據行上右鍵單擊時彈出的菜單，和在空白地位右鍵單擊時彈出的菜單。

時光無限，空話不多說了，先看兩個後果圖。（完成情況 FineUI4.1.6，.NET 4.0由於須要指定控件的ID）

1. 數據行右鍵菜單

2. 空白處右鍵菜單

完成辦法：

第一步：添加Grid控件。。。不多說了

第二步：往Grid控件前面添加兩個Menu控件，分離對應要完成的兩個右鍵菜單，要指定ClientIDMode為Static，Hidden為true 

<f:Menu ID="containerMenu" runat="server" ClientIDMode="Static" Hidden="true">
 <f:MenuButton Icon="Add" Text="添加" OnClick="OnAddClick"></f:MenuButton>
 <f:MenuSeparator />
 <f:MenuButton Icon="Reload" Text="刷新"></f:MenuButton>
 </f:Menu>
 <f:Menu ID="itemMenu" runat="server" ClientIDMode="Static" Hidden="true">
 <f:MenuButton Icon="Pencil" Text="修正" OnClick="OnEditClick"></f:MenuButton>
 <f:MenuButton Icon="Delete" Text="刪除"></f:MenuButton>
 <f:MenuSeparator />
 <f:MenuButton Icon="Reload" Text="刷新"></f:MenuButton>
 </f:Menu>

第三步：為Grid添加事宜“containercontextmenu”，“itemcontextmenu”事宜監聽

 <f:Grid ID="Grid1" runat="server" Title="FineUI Grid右鍵菜單Demo" Css AllowPaging="true" PageSize="20"
 EnableHeaderMenu="false" EnableColumnLines="true" DataKeyNames="ID" >
 <Columns>
 .....省略
 </Columns>
 <Listeners>
 <f:Listener Event="containercontextmenu" Handler="function (grid, e, eOpts) { e.stopEvent(); F('containerMenu').showAt(e.getXY()); }" />
 <f:Listener Event="itemcontextmenu" Handler="function (grid, record, item, index, e, eOpts) { e.stopEvent(); F('itemMenu').showAt(e.getXY()); }" />
 </Listeners>
 </f:Grid> 

這兩個事宜屬於ExtJs的GridPanel控件，參數解釋以下：

containercontextmenu：grid：表格對象，e：事宜對象，eOpts：事宜對象參數；

itemcontextmenu：grid：表格對象，record：選擇的行對像(可以經由過程record.rawData屬性取得所選行的全體數據)，item：html元素對象，index：行索引，e：事宜對象，eOpts：事宜對象參數；

若有其它想懂得的處所，請去翻查ExtJs的Api doc http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.Panel

普通情形下，照抄下面的代碼就Ok了，除非你對事宜處置函數有更多的請求。

第四步：完成菜單功效。依照正常的辦法綁定菜單按鈕的事宜便可以了，沒甚麼須要特殊解釋的

在第二步的代碼裡可以看到，曾經為添加和修正按鈕添加了辦事端OnClick事宜綁定。上面看一下後台代碼的完成

 protected void OnAddClick(object sender, EventArgs e)
 {
 FineUI.Alert.Show("Add Click!", FineUI.MessageBoxIcon.Information);
 }
 protected void OnEditClick(object sender, EventArgs e)
 {
 var selectedrow = Grid1.Rows[Grid1.SelectedRowIndex].DataKeys[0].ToString();
 FineUI.Alert.Show(string.Format("修正ID為{0}的記載", selectedrow), FineUI.MessageBoxIcon.Warning);
 }

若何應用FineUI Grid控件，添加分頁功效，然後高度填充全部頁面。詳細請看上面文字解釋和代碼剖析。

      應用FineUI 控件的每一個頁面都有一個f:PageManager控件，它包括屬性：AutoSizePanelID，設置須要填充的控件ID，從它的demo可以看出，正常情形下須要再放置一個容器Panel，便可以使全部頁面填充。

<f:PageManager ID="PageManager1" runat="server" AutoSizePanelID="ResultSetGrid" />
<f:Grid ID="ResultSetGrid" runat="server" EnableCheckBoxSelect="true" Title="" DataKeyNames="ID"
 ShowBorder="false"
 PageSize="3"
 AllowPaging="true"
 IsDatabasePaging="true"
 OnPageIndexChange="ResultSetGrid_PageIndexChange"
 OnSort="ResultSetGrid_Sort"
 AllowSorting="true"
 SortField="ID">
 <Toolbars>
 <f:Toolbar ID="ResultSetGrid_Toolbar" runat="server">
  <Items>
  <f:Button ID="btnAdd" runat="server" Text="添加" OnClientClick="Add();" EnablePostBack="false" Icon="ApplicationAdd"></f:Button>
  <f:Button ID="btnEdit" runat="server" Text="編纂" EnableAjax="true" OnClick="btnEdit_Click" Icon="ApplicationEdit"></f:Button>
  <f:Button ID="btnDelete" runat="server" Text="刪除" OnClick="btnDelete_Click" Icon="ApplicationDelete"></f:Button>
  <f:Button ID="btnImport" runat="server" OnClientClick="Import();" Text="數據收集" Icon="ApplicationLink"></f:Button>
  <f:Button ID="btnSelf" runat="server" OnClientClick="Filter();" Text="自界說挑選" Icon="ApplicationKey"></f:Button>
  </Items>
 </f:Toolbar>
 </Toolbars>
 <Columns>
 <f:RowNumberField EnablePagingNumber="true" />
 </Columns>
 </f:Grid>

以上內容是基於FineUI Grid控件添加右鍵菜單的全體論述，願望對年夜家有所贊助。