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

更新時間：2015年08月10日 15:38:29 作者：shalves

大家對于FineUI Grid控件會添加右鍵菜單嗎，下面小編就給大家詳細(xì)介紹基于FineUI Grid控件添加右鍵菜單，需要的朋友可以參考下

FineUI官方Demo上一直沒有Grid右鍵菜單的實(shí)現(xiàn)，其實(shí)從4.1.x的版本開始，允許添加自定義的事件監(jiān)聽（Listeners），所以要實(shí)現(xiàn)這個功能已經(jīng)相當(dāng)容易了。

ExtJs右鍵菜單有很多種，對于Grid控件來說，我這里只簡單說明兩種實(shí)現(xiàn)。即在表格的數(shù)據(jù)行上右鍵單擊時彈出的菜單，以及在空白位置右鍵單擊時彈出的菜單。

時間有限，廢話不多說了，先看兩個效果圖。（實(shí)現(xiàn)環(huán)境 FineUI4.1.6，.NET 4.0因?yàn)樾枰付丶腎D）

1. 數(shù)據(jù)行右鍵菜單

2. 空白處右鍵菜單

實(shí)現(xiàn)方法：

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

第二步：往Grid控件后面添加兩個Menu控件，分別對應(yīng)要實(shí)現(xiàn)的兩個右鍵菜單，要指定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”事件監(jiān)聽

 <f:Grid ID="Grid1" runat="server" Title="FineUI Grid右鍵菜單Demo" CssStyle="margin: 10px;" 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控件，參數(shù)說明如下：

containercontextmenu：grid：表格對象，e：事件對象，eOpts：事件對象參數(shù)；

itemcontextmenu：grid：表格對象，record：選擇的行對像(可以通過record.rawData屬性獲得所選行的全部數(shù)據(jù))，item：html元素對象，index：行索引，e：事件對象，eOpts：事件對象參數(shù)；

如有其它想了解的地方，請去翻查ExtJs的Api doc http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.Panel

一般情況下，照抄上面的代碼就Ok了，除非你對事件處理函數(shù)有更多的要求。

第四步：實(shí)現(xiàn)菜單功能。按照正常的方法綁定菜單按鈕的事件就可以了，沒什么需要特別說明的

在第二步的代碼里可以看到，已經(jīng)為添加和修改按鈕添加了服務(wù)端OnClick事件綁定。下面看一下后臺代碼的實(shí)現(xiàn)

 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，設(shè)置需要填充的控件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="數(shù)據(jù)采集" 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>

以上內(nèi)容是基于FineUI Grid控件添加右鍵菜單的全部敘述，希望對大家有所幫助。

您可能感興趣的文章: