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" 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控件,參數說明如下:
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控件添加右鍵菜單的全部敘述,希望對大家有所幫助。
新聞熱點
疑難解答