ASP.NET-FineUI开发实践-10

简介: 嵌套Grid,光棍月大放送,不藏着掖着。实在写的不好,没脸藏啊~只考虑显示排序修改什么的都不管! 话说三石官网加实例了,http://fineui.com/demo/#/demo/grid/grid_rowexpander_grid.aspx 是用extjs写的,我写的啰嗦点 扩展行是咋出来的,我着实没看懂,但是要实现效果也有方法,先想一下, 1.嵌套的Grid数据应该是动态的,我只知道在后头绑,事件是前台触发的,那就是把ID传后台就行了。

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

话说三石官网加实例了,http://fineui.com/demo/#/demo/grid/grid_rowexpander_grid.aspx 是用extjs写的,我写的啰嗦点

扩展行是咋出来的,我着实没看懂,但是要实现效果也有方法,先想一下,
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然后在绑定,所以只能绑定完了在执行复制,这是个处理的小技巧。
没了,上个图
 
还要注意嵌套的Grid点不了,因为一点就是选择的Grid1的行,应该是样式就可以调,不弄了,我也用不上。源码,看吧,有心情就弄,没有自己沾吧
这玩应也有脸拿出来也算第一人了,偷懒了,等成熟了(我会了)再完善吧。
本来不想放源码着 CSDN资源10分

 

目录
相关文章
|
1月前
|
人工智能 开发框架 .NET
.NET技术的强大功能:.NET技术的基础特性、在现代开发中的应用、以及它如何助力未来的软件开发。
.NET技术是软件开发领域的核心支柱,以其强大功能、灵活性及安全性广受认可。本文分三部分解析:基础特性如多语言支持、统一运行时环境;现代应用如企业级与Web开发、移动应用、云服务及游戏开发;以及未来趋势如性能优化、容器化、AI集成等,展望.NET在不断变化的技术环境中持续发展与创新。
65 4
|
2天前
|
人工智能 前端开发 开发工具
解读.NET 技术的开发潜力
本文全面介绍了.NET技术在软件开发领域的核心优势、创新应用及面临的挑战。.NET以其统一的开发平台、强大的工具和跨平台能力,成为企业级应用、Web应用乃至游戏开发的理想选择。然而,在性能优化、容器化及AI集成等方面仍需不断突破。通过积极拥抱开源和社区驱动模式,.NET将持续推动软件开发的进步。
11 1
|
13天前
|
存储 运维
.NET开发必备技巧:使用Visual Studio分析.NET Dump,快速查找程序内存泄漏问题!
.NET开发必备技巧:使用Visual Studio分析.NET Dump,快速查找程序内存泄漏问题!
|
14天前
|
SQL 关系型数据库 数据库
七天.NET 8操作SQLite入门到实战详细教程(选型、开发、发布、部署)
七天.NET 8操作SQLite入门到实战详细教程(选型、开发、发布、部署)
|
13天前
|
消息中间件 开发框架 前端开发
YuebonCore:基于.NET8开源、免费的权限管理及快速开发框架
YuebonCore:基于.NET8开源、免费的权限管理及快速开发框架
|
19天前
|
开发框架 JavaScript 前端开发
|
24天前
|
jenkins 测试技术 持续交付
解锁.NET项目高效秘籍:从理论迷雾到实践巅峰,持续集成与自动化测试如何悄然改变游戏规则?
【8月更文挑战第28天】在软件开发领域,持续集成(CI)与自动化测试已成为提升效率和质量的关键工具。尤其在.NET项目中,二者的结合能显著提高开发速度并保证软件稳定性。本文将从理论到实践,详细介绍CI与自动化测试的重要性,并以ASP.NET Core Web API项目为例,演示如何使用Jenkins和NUnit实现自动化构建与测试。每次代码提交后,Jenkins自动触发构建流程,通过编译和运行NUnit测试确保代码质量。这种方式不仅节省了时间,还能快速发现并解决问题,推动.NET项目开发迈向更高水平。
34 8
|
24天前
|
Kubernetes 监控 Devops
【独家揭秘】.NET项目中的DevOps实践:从代码提交到生产部署,你不知道的那些事!
【8月更文挑战第28天】.NET 项目中的 DevOps 实践贯穿代码提交到生产部署全流程,涵盖健壮的源代码管理、GitFlow 工作流、持续集成与部署、容器化及监控日志记录。通过 Git、CI/CD 工具、Kubernetes 及日志框架的最佳实践应用,显著提升软件开发效率与质量。本文通过具体示例,助力开发者构建高效可靠的 DevOps 流程,确保项目成功交付。
44 0
|
24天前
|
JSON C# 开发者
💡探索C#语言进化论:揭秘.NET开发效率飙升的秘密武器💼
【8月更文挑战第28天】C#语言凭借其强大的功能与易用性深受开发者喜爱。伴随.NET平台演进,C#持续引入新特性,如C# 7.0的模式匹配,让处理复杂数据结构更直观简洁;C# 8.0的异步流则使异步编程更灵活高效,无需一次性加载全部数据至内存。通过示例展示了模式匹配简化JSON解析及异步流实现文件逐行读取的应用。此外,C# 8.0还提供了默认接口成员和可空引用类型等特性,进一步提高.NET开发效率与代码可维护性。随着C#的发展,未来的.NET开发将更加高效便捷。
39 1
|
20天前
|
C# Windows 开发者
超越选择焦虑:深入解析WinForms、WPF与UWP——谁才是打造顶级.NET桌面应用的终极利器?从开发效率到视觉享受,全面解读三大框架优劣,助你精准匹配项目需求,构建完美桌面应用生态系统
【8月更文挑战第31天】.NET框架为开发者提供了多种桌面应用开发选项,包括WinForms、WPF和UWP。WinForms简单易用,适合快速开发基本应用;WPF提供强大的UI设计工具和丰富的视觉体验,支持XAML,易于实现复杂布局;UWP专为Windows 10设计,支持多设备,充分利用现代硬件特性。本文通过示例代码详细介绍这三种框架的特点,帮助读者根据项目需求做出明智选择。以下是各框架的简单示例代码,便于理解其基本用法。
59 0

相关实验场景

更多