ASP.NET-FineUI開發實踐-11

我用實例項目寫了個子父頁面傳值，算是比較靈活的寫法，可以把js提取出來寫成包，然后調用，我先一步一步寫，為有困難的朋友打個樣。

先畫個頁面：

上面是個查詢用的表單，底下是表格，內存分頁，用到了VBox布局注意BoxFlex屬性的應用，頁面還有一個window頁面。我會把源碼放出來。

1.先看查詢

姓名的查詢按鈕會彈出一個window，打開window前后台都差不多，我用了前台，這個樣子滴

<f:TriggerBox runat="server" Label="姓名" AutoPostBack="false" TriggerIcon="Search"
   OnClientTriggerClick="ShowWindow()" ID="TriggerBox1" EnablePostBack="False">
</f:TriggerBox>

 

//顯示window
        function ShowWindow() {
            F('<% =Window1.ClientID %>').f_show('./selectgrid.aspx', '選擇', 800, 500);
        }

第一個參數是url，第二個是標題，然后是寬和高。js比回發快不多說。

選擇window下有按鈕三個：確定，確定並查詢，取消在最底下，注意grid 的EnableMultiSelect 屬性，三按鈕都是前台寫的，沒有觸發后台，可能是寫的簡單，但也感覺挺靈活的。

貼出來注意多看一眼注釋，確認和確認並查詢的方法，其實就是多個回發，但回發要在上層執行，方法寫在后台我感覺亂，轉不過來，所以都搬前台來了，一步一步寫，所以靈活，我可以中間干點別的。

        function select(select_back) {
            //得到選擇的行
            var rows = F('<% =Grid1.ClientID  %>').f_getSelectedRows();
            //選擇項
            var provinceName;
            //注意each的使用
            Ext.Array.each(rows, function (rowIndex, index) {
                //得到選擇的行數據和列數據
                var rec = F('<% =Grid1.ClientID  %>').store.getAt(rowIndex);
                provinceName = rec.get('Name');
            });
            //核心：得到當前的window
            var activeWindow = F.wnd.getActiveWindow();
            //核心：執行上層的js
            activeWindow.window.selectProvince(provinceName, select_back);
            //核心：隱藏該window
            activeWindow.f_hide();
        }

執行了上層的selectProvince方法，再把selectProvince方法貼出來，上層就是window_grid頁面

        function selectProvince(name, select_back) {
            //給控件賦值
            F('<% =TriggerBox1.ClientID %>').setValue(name);
            //是否回發
            if (select_back) {
                //回發事件
                F.customEvent('SelectGrid');
            }
        }

 

其實有了customEvent方法 愛怎么回發怎么回發，后台方法就是通過姓名查詢數據，沒啥好寫的。

這個例子主要是打開window，打開的window通過執行上層的js回發至后台靈活執行方法。

2.修改

也是打開個window，這里得到了一個選擇行的Id，當做參數傳過去了，后來發現這個沒用到，反正我沒用到，注意 rec.get(方法 參數是ColumnID

        function Grid_Edit() {
            var rows = F('<% =Grid1.ClientID  %>').f_getSelectedRows();
            var id;
            Ext.Array.each(rows, function (rowIndex, index) {
                var rec = F('<% =Grid1.ClientID  %>').store.getAt(rowIndex);
                id = rec.get('ItemId');
            });
            F('<% =Window1.ClientID %>').f_show('./gridedit.aspx?id=' + id, '修改', 500, 300);
        }

 加載數據也是js寫的，Bindedit方法上下也用到了。

        F.ready(function () {
            Bindedit();
        });
        function Bindedit(Position) {
            var activeWindow = F.wnd.getActiveWindow();
            var id = activeWindow.window.GetSelectID(Position);
            F.customEvent('Bindedit_' + id);
        }

 用到了上層的GetSelectID方法，參數是上還是下。

        function GetSelectID(Position) {
            var grid = F('<% =Grid1.ClientID  %>');
            var selectedValues = [];
            var rows = grid.f_getSelectedRows(), id;
            Ext.Array.each(rows, function (rowIndex, index) {
                //上機制，到0了就上不去了
                if (Position == "top" && rowIndex != 0) {
                    rowIndex = rowIndex - 1;
                }
                //到最后也上不去了
                if (Position == "next" && rowIndex != grid.f_getPaging().f_pageSize - 1 && rowIndex != grid.getStore().getCount()) {
                    rowIndex = rowIndex + 1;
                }
                //想寫翻頁着，不好寫
                if (rowIndex == grid.f_getPaging().f_pageSize - 1) {
                    //F.customEvent('rowIndex_Next_');
                }
                //新方法：選擇當前行
                selectedValues.push(rowIndex);
                grid.f_selectRows(selectedValues);
                //得到行對應列的數據
                var rec = grid.store.getAt(rowIndex);
                id = rec.get('ItemId');
            });
            return id;
        }

 

還有一個方法是GetWindow，我以前寫過，看看代碼吧。晚了睡覺。

這個JS寫的有點腫，可以直接后台調用，可以參見 ASP.NET-FineUI開發實踐-17對傳值進行了優化

發個圖：

 

下載地址： CSDN 0 分  備用地址