ASP.NET-FineUI开发实践-10

嵌套Grid，光棍月大放送，不藏着掖着。实在写的不好，没脸藏啊~只考虑显示排序修改什么的都不管！

扩展行是咋出来的，我着实没看懂，但是要实现效果也有方法，先想一下，

1.嵌套的Grid数据应该是动态的，我只知道在后头绑，事件是前台触发的，那就是把ID传后台就行了。

2.一个下拉生成一个Grid，后台生成到前台我不会，前台用ExtJs生成太复杂，要写好多的ExtJs原生。

3.结合以上两点大概代码是这样的，前台触发ID传到后台，后台绑定数据，在前台复制现成的控件，显示。

%26nbsp;

开始

1.先准备个grid，就不写了，准备行扩展列

            %26lt;f:TemplateField ColumnID="griditem" Hidden="true" RenderAsRowExpander="true"%26gt;                %26lt;ItemTemplate%26gt;                    %26lt;div runat="server" id="divItem" class="expander"%26gt;                    %26lt;/div%26gt;                %26lt;/ItemTemplate%26gt;            %26lt;/f:TemplateField%26gt;

　　

在每行展开的时候把扩展的grid复制到id=divitem里就可以了。

2.触发事件

API里真没找见，在网上找到的，拿过来可以用，

            F('%26lt;% =Grid1.ClientID%%26gt;').view.on('expandBody', function (rowNode, record, expandRow, eOpts) {                //传到后台，参数为行ID，行绑定的数据ID                F.customEvent('GridItem_' + rowNode.id + '_' + record.get('ItemId'));            });

　　

3.准备个扩展的Grid

正常些就可以，我放在了Panel里。JQ是为了控制Grid2的样式。

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

　　

        F.ready(function () {            F('%26lt;% =Grid2.ClientID%%26gt;').autoWidth = true;            F('%26lt;% =Grid2.ClientID%%26gt;').autoHeight = true;            F('%26lt;% =Grid2.ClientID %%26gt;').setWidth(F('%26lt;% =Grid1.ClientID %%26gt;').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($('#%26lt;% =PanelGrid1.ClientID %%26gt;-innerCt').html());        }

　　

手动触发showgirdItme正常，rowid哪来的，在事件里获到的。

还有一个关闭事件，仍掉复制的东西，省着占地，

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

　　

5.后台

触发了后台方法，把方法打出来

            if (e.EventArgument.IndexOf("GridItem_") %26gt;= 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)%26gt;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然后在绑定，所以只能绑定完了在执行复制，这是个处理的小技巧。

没了，上个图

%26nbsp;

还要注意嵌套的Grid点不了，因为一点就是选择的Grid1的行，应该是样式就可以调，不弄了，我也用不上。源码，看吧，有心情就弄，没有自己沾吧

这玩应也有脸拿出来也算第一人了，偷懒了，等成熟了（我会了）再完善吧。

%26nbsp;