ASP.NET-FineUI開發實踐-10

時間 2019-11-09

標籤 asp.net asp fineui 開發實踐欄目 ASP 简体版

原文原文鏈接

嵌套Grid，光棍月大放送，不藏着掖着。實在寫的很差，沒臉藏啊~只考慮顯示排序修改什麼的都無論！javascript

話說三石官網加實例了，http://fineui.com/demo/#/demo/grid/grid_rowexpander_grid.aspx 是用extjs寫的，我寫的囉嗦點html

擴展行是咋出來的，我着實沒看懂，可是要實現效果也有方法，先想一下，

1.嵌套的Grid數據應該是動態的，我只知道在後頭綁，事件是前臺觸發的，那就是把ID傳後臺就好了。

2.一個下拉生成一個Grid，後臺生成到前臺我不會，前臺用ExtJs生成太複雜，要寫好多的ExtJs原生。

3.結合以上兩點大概代碼是這樣的，前臺觸發ID傳到後臺，後臺綁定數據，在前臺複製現成的控件，顯示。

開始

1.先準備個grid，就不寫了，準備行擴展列

            <f:TemplateField ColumnID="griditem" Hidden="true" RenderAsRowExpander="true">
                <ItemTemplate>
                    <div runat="server" id="divItem" class="expander">
                    </div>
                </ItemTemplate>
            </f:TemplateField>

在每行展開的時候把擴展的grid複製到id=divitem裏就能夠了。

2.觸發事件

API裏真沒找見，在網上找到的，拿過來能夠用，

            F('<% =Grid1.ClientID%>').view.on('expandBody', function (rowNode, record, expandRow, eOpts) {
                //傳到後臺，參數爲行ID，行綁定的數據ID
                F.customEvent('GridItem_' + rowNode.id + '_' + record.get('ItemId'));
            });

3.準備個擴展的Grid

正常些就能夠，我放在了Panel裏。JQ是爲了控制Grid2的樣式。

    <f:Panel runat="server" ID="PanelGrid1" Height="0px" Hidden="false">
        <Items>
            <f:Grid ID="Grid2" Width="200px" runat="server" ShowBorder="false" ShowGridHeader="true"
                ShowHeader="false" AllowColumnLocking="True">
                <Columns>
                    <f:TemplateField Width="60px" HeaderText="序號">
                        <ItemTemplate>
                            <asp:Label runat="server" Text='<%# Container.DataItemIndex + 1 %>'></asp:Label>
                        </ItemTemplate>
                    </f:TemplateField>
                    <f:BoundField runat="server" HeaderText="身高" DataField="ShenGao" />
                    <f:BoundField runat="server" HeaderText="體重" DataField="TiZhong" />
                    <f:BoundField runat="server" HeaderText="血壓低" DataField="XueYaDi" />
                    <f:BoundField runat="server" HeaderText="血壓高" DataField="XueYaGao" />
                </Columns>
            </f:Grid>
        </Items>
    </f:Panel>

        F.ready(function () {
            F('<% =Grid2.ClientID%>').autoWidth = true;
            F('<% =Grid2.ClientID%>').autoHeight = true;
            F('<% =Grid2.ClientID %>').setWidth(F('<% =Grid1.ClientID %>').getWidth() - 100);
        });

4.準備複製方法

剛纔說是前臺複製，兩種，一個是extjs能夠複製grid2元素而後顯示到指定位置，沒試出來，實在沒時間會。

第二個方法就是整個過程的核心也是最偷懶的地方，直接複製HTML，複製HTML最大的問題是ID，兩個ID同樣了EXTJS會亂的，好在他只認一個，我把PanelGrid1放在了Grid1 的上面，後臺找到的Grid2就是Panel裏的了；複製HTML還會複製Grid2 的全部屬性，若是Grid2.Hidden=Ture那也複製過去了，不顯示了，因此PanelGrid1的Height=0，就是隱藏的意思。

另外一個重要的就是獲取了，要把HTML複製用JQ找到來源和目標，直接上代碼，你們不用找了

        function showgirdItme(rowid) {
            //選擇行隱藏列的ID，rowid來自後臺
            var itemid = $('#' + rowid).find('div .expander').attr('id');
            //複製的HTML
            $('#' + itemid).html($('#<% =PanelGrid1.ClientID %>-innerCt').html());
        }

手動觸發showgirdItme正常，rowid哪來的，在事件裏獲到的。

還有一個關閉事件，仍掉複製的東西，省着佔地，

不要寫錯地方，Sunny就寫錯了

下面這段放到F.ready裏，放ready外面獲取不到F('<% =Grid1.ClientID%>')的

            F('<% =Grid1.ClientID%>').view.on('collapsebody', function (rowNode, record, expandRow, eOpts) {
                var itemid = $('#' + rowNode.id).find('div .expander').attr('id');
                $('#' + itemid).html('');
            });

5.後臺

觸發了後臺方法，把方法打出來

Sunny沒看懂；

此事件觸發 protected void PageManager1_CustomEvent(object sender, CustomEventArgs e) 因此首先要定義 PageManager1_CustomEvent 事件

好比：<f:PageManager ID="PageManager1" AutoSizePanelID="Panel2" OnCustomEvent="PageManager1_CustomEvent" runat="server" />

大家都沒我對她好

            if (e.EventArgument.IndexOf("GridItem_") >= 0)
            {
                string rowid = e.EventArgument.Split('_')[1].ToString();
                string id = e.EventArgument.Split('_')[2].ToString();
                DataTable table = GetDataTable();
                DataRow[] drs = table.Select("Id = '" + id + "'");
                DataTable dt = new DataTable();
                dt = table.Clone();
                foreach (DataRow dr in drs)
                {
                    //模擬數據
                    dt.Rows.Add(dr.ItemArray);
                    dt.Rows.Add(dr.ItemArray);
                    if (Convert.ToInt32(id)>102)
                    {
                        dt.Rows.Add(dr.ItemArray);
                        dt.Rows.Add(dr.ItemArray);
                    }
                }
                //綁定
                Grid2.DataSource = dt;
                Grid2.DataBind();
                //注意延遲方法
                string sc = "window.setTimeout(function () {showgirdItme('" + rowid + "');},100);";
                FineUI.PageContext.RegisterStartupScript(sc);
            }

就是得到數據，綁定，可是看到有setTimeout方法，由於Extjs是延遲加載，他會先執行js而後在綁定，因此只能綁定完了在執行復制，這是個處理的小技巧。

沒了，上個圖