ASP.NET-FineUI开发实践-13(二)

简介: 1.加图标和事件 上次已经通过DataSimulateTreeLevelField属性控制了树节点的显示,不用看也知道就是给指定列数据前面加个图标的HTML 可以在SimulateTreeHeper类里看到实现方法,不多说了,原理就是循环行累加上图片就可以了,注意图片的ID和样式 ...

1.加图标和事件

上次已经通过DataSimulateTreeLevelField属性控制了树节点的显示,不用看也知道就是给指定列数据前面加个图标的HTML

可以在SimulateTreeHeper类里看到实现方法,不多说了,原理就是循环行累加上图片就可以了,注意图片的ID和样式

  /// <summary>
        /// 给树赋值
        /// </summary>
        private void SetValueTree()
        {
            if (EnableTree)
            {
                foreach (GridRow row in Rows)
                {
                    //下级行数
                    string Nextindex = GetNextIndex(row, Rows);
                    //默认图标
                    string iconname = "page.png";
                    //图片ID,点击用,绑定事件
                    string imgid = ClientID+"_tree_icon_" + row.RowIndex;
                    //父节点图标
                    if (Nextindex != "")
                    {
                        iconname = "folder.png";
                    }
                    //加入图标和ID,注意加过的就不加了
                    if (row.Values[FindColumn(TreeName).ColumnIndex].ToString().IndexOf(ClientID+"_tree_icon_") < 0)
                    {
                        row.Values[FindColumn(TreeName).ColumnIndex] = "<img id=\"" + imgid + "\" src=\"..\\res\\icon\\" + iconname + "\" width=\"16\" height=\"16\"  style=\"margin-top:-5px;margin-bottom:-2px;cursor: pointer\"/>" + row.Values[1];
                    }
                }
            }
        }
         /// <summary>
        /// 得到下级行号
        /// </summary>
        /// <param name="row">本节点</param>
        /// <param name="Rows">集合</param>
        /// <returns>集合以,隔开</returns>
        private string GetNextIndex(GridRow row, GridRowCollection Rows)
        {
            string topindex = "";
            int pridindex = FindColumn(TreeDataParentIDField).ColumnIndex;
            int idindex = FindColumn(TreeDataIDField).ColumnIndex;
            foreach (GridRow gr in Rows)
            {
                //父ID等于本ID添加到集合
                if (gr.Values[pridindex].ToString() != "" && gr.Values[pridindex].ToString() == row.Values[idindex].ToString())
                {
                    topindex += topindex == "" ? gr.RowIndex.ToString() : "," + gr.RowIndex.ToString();
                }
            }
            return topindex;
        }

 

这里有个方法是得到下级的行号,这是个核心方法。
在AfterDataBind里加上就可以了

下面就是点击方法,用JQ实现的,从后台输出

        /// <summary>
        /// 点击事件只给有子集的点击事件
       /// </summary>
        private void TreeClick()
        {
            StringBuilder sbx = new StringBuilder();
            foreach (GridRow row in Rows)
            {
                //有下级菜单才绑定事件
                string Nextindex = GetNextIndex(row, Rows);
                if (Nextindex != "")
                {
                    string imgid = ClientID + "_tree_icon_" + row.RowIndex;
                    sbx.Append("$('#" + imgid + "').click(function(){F.customEvent(\"GridTreeClick_" + row.RowIndex + "\");});");
                }
            }
            PageContext.RegisterStartupScript(sbx.ToString());
        }

 

还是用到了F.customEvent方法回发后台,其实可以用doPostBack方法直接在Grid.cs里执行,但是考虑到会执行其他方法还是给放到页面的cs文件了,
grid_tree.cs
    protected void PageManager1_CustomEvent(object sender, CustomEventArgs e)
        {
            if (e.EventArgument.IndexOf("GridTreeClick_") >= 0)
            {
                string rowindex = e.EventArgument.ToString().Split('_')[1];
                Grid1.DoTreeClick(rowindex);
            }
        }

 

可以看到DoTreeClick就是点击树图标的方法,这个方法 实现收起和展开。
2.实现展开和收起
在DoTreeClick之前先要有第一次加载方法。
首先要先定义一个参数,这个参数记录应该删除的行号,前面已经说是通过删除行实现收起和展开的
        private static string _moveindex;//移除的数据
        /// <summary>
        /// 移除的数据
        /// </summary>	
        public static string moveindex
        {
            get { return _moveindex; }
            set { _moveindex = value; }
        }

可以看到这个参数是static的不会平白消失,FineUI控制属性的Ajax回发是在构造函数里,

 

有兴趣的可以研究下,我还没太懂
先写一个第一次加载的方法,实现绑定了所有数据但只显示第一层根节点。
  /// <summary>
        /// 第一次显示数方法
        /// </summary>
        private void ShowTree()
        {
            //初始化树
            if (EnableTree)
            {
                List<string> movelist = new List<string>();
                //循环行
                foreach (GridRow row in Rows)
                {
                    //得到层级
                    int lub = GetLevelNub(row, Rows);
                    if (lub != 0)
                    {
                        //子集删除
                        movelist.Add(row.RowIndex.ToString());
                    }
                }
                //排序(重要) 从大到小排序,不排序会删除1后造成2变成1
                movelist.Sort(delegate(string str1, string str2) { return int.Parse(str2) - int.Parse(str1); });
                string MoveRowIndex = "";
                foreach (string s in movelist)
                {
                    MoveRowIndex += MoveRowIndex == "" ? s : "," + s;
                }
                if (MoveRowIndex != null)
                {
                    //放入缓存记录已经消除的行
                    moveindex = MoveRowIndex;
                    string js = ""
                        + "var store =" + XID + ".getStore();"
                        + "var rows = [" + MoveRowIndex + "];"
                        + "Ext.Array.each(rows, function (rowIndex, index) {"
                        + "    store.removeAt(rowIndex);"
                        + "});"
                        //刷新行号,(重要)
                        + XID + ".view.refresh();";
                    PageContext.RegisterStartupScript(js);
                }
                //绑定树点击事件
                TreeClick();
            }
        }
逻辑就是得到删除的行号,排序,缓存,js实现,注意刷新行号方法和XID的意义。
加上方法TreeClick方法写在了ShowTree里

下面就可以做展开和收起了,再建一个参数记录展开的行号,专业版实例里可以通过属性控制指定列的展开,我控制这个参数可以实现(这个方法没有写只是理论上的...)

 

  private static List<string> _RowCollapsed;//展开集合
        /// <summary>
        /// 展开集合
        /// </summary>	
        public static List<string> RowCollapsed
        {
            get { return _RowCollapsed; }
            set { _RowCollapsed = value; }
        }

 其实这里可以留扣了,逻辑说出来也不复杂,就都一次写出来吧

 /// <summary>
        /// 点击树事件
        /// </summary>
        /// <param name="treenode">点击的节点(行号)</param>
        public void DoTreeClick(string treenode)
        {
            if (EnableTree)
            {
                StringBuilder sb = new StringBuilder();
                List<string> movelist = null;
                if (movelist == null)
                {
                    //集合
                    if (RowCollapsed == null)
                    {
                        RowCollapsed = new List<string>();
                    }
                    //每次点击更改集合,移出和新增
                    if (RowCollapsed.Contains(treenode))
                    {
                        RowCollapsed.Remove(treenode);
                    }
                    else
                    {
                        RowCollapsed.Add(treenode);
                    }
                    movelist = new List<string>(moveindex.Split(','));
                }
                int PIDindex = FindColumn(TreeDataParentIDField).ColumnIndex;
                int IDindex = FindColumn(TreeDataIDField).ColumnIndex;
                //得到下级菜单
                string nextindex = GetNextIndex(Rows[Convert.ToInt32(treenode)], Rows);
                if (nextindex != "")
                {
                    string[] s = nextindex.Split(',');
                    for (int i = 0; i < s.Length; i++)
                    {
                        GridRow dr = Rows[Convert.ToInt32(s[i])];
                        string rowindex = dr.RowIndex.ToString();
                        //收起动作循环子集收起
                        if (!RowCollapsed.Contains(treenode))
                        {
                            movelist.Add(rowindex);
                            DoNextTreeClick(rowindex, ref movelist, false);
                        }
                        //展开循环子集展开
                        else
                        {
                            movelist.Remove(rowindex);
                            if (RowCollapsed.Contains(rowindex))
                            {
                                DoNextTreeClick(rowindex, ref movelist, true);
                            }
                        }
                    }
                    moveindex = "";
                    if (movelist.Count >= 2)
                    {
                        movelist.Sort(delegate(string str1, string str2) { return int.Parse(str2 == "" ? "0" : str2) - int.Parse(str1 == "" ? "0" : str1); });
                    }
                    foreach (string ss in movelist)
                    {
                        moveindex += moveindex == "" ? ss : "," + ss;
                    }
                    if (moveindex != null)
                    {
                        string js = ""
                            //+"F.ready(function(){"
                            + "var store =F('" + ClientID + "').getStore();"
                            + "var rows = [" + moveindex + "];"
                            + "Ext.Array.each(rows, function (rowIndex, index) {"
                            + "    store.removeAt(rowIndex);"
                            + "});"
                            //+ XID + ".f_loadData();"
                            + "F('" + ClientID + "').view.refresh();";
                            //+ "});";
                            //sb.Append(js);
                        sb.Append("F('" + ClientID + "').f_loadData();");
                        sb.Append(js);
                    }
                    PageContext.RegisterStartupScript(sb.ToString());
                }
                TreeClick();
            }
        }
        /// <summary>
        /// 循环子集
        /// </summary>
        /// <param name="treeindex"></param>
        /// <param name="movelist"></param>
        private void DoNextTreeClick(string treeindex, ref List<string> movelist, bool Collapsed)
        {
            if (EnableTree)
            {
                StringBuilder sb = new StringBuilder();
                int PIDindex = FindColumn(TreeDataParentIDField).ColumnIndex;
                int IDindex = FindColumn(TreeDataIDField).ColumnIndex;
                //得到下一菜单
                string nextindex = GetNextIndex(Rows[Convert.ToInt32(treeindex)], Rows);
                if (nextindex != "")
                {
                    string[] s = nextindex.Split(',');
                    for (int i = 0; i < s.Length; i++)
                    {
                        GridRow dr = Rows[Convert.ToInt32(s[i])];
                        string rowindex = dr.RowIndex.ToString();
                        //展开
                        if (movelist.Contains(rowindex) && Collapsed)
                        {
                            movelist.Remove(rowindex);
                        }
                        //收起
                        if (!Collapsed && !movelist.Contains(rowindex))
                        {
                            movelist.Add(rowindex);
                        }
                        //展开子集在展开集合中则执行该子集的展开
                        if (Collapsed && RowCollapsed.Contains(rowindex))
                        {
                            DoNextTreeClick(rowindex, ref movelist, true);
                        }
                    }
                }
            }
        }

 就是点击展开子集,这里判断子集已经展开就继续展开子集,收起要收起该子集的所有子集,主要是参数逻辑的计算。至此功能全部实现

下面应该写图标的展开和收起的改变,全部的前台实现,及其他编辑选择锁定列的测试和修改

目录
相关文章
|
7天前
|
开发框架 JSON .NET
.Net4.0 Web.config 配置实践
.Net4.0 Web.config 配置实践
|
14天前
|
人工智能 量子技术 C#
【专栏】.NET 开发:开启数字化新时代
【4月更文挑战第29天】.NET开发在数字化新时代中发挥关键作用,借助跨平台能力、高性能和现代编程语言支持,如C#,助力企业实现数字化转型。通过企业级应用开发、移动应用和云计算集成,.NET加速业务流程和提升用户体验。未来,.NET将涉足AI、ML、MR/AR及量子计算,持续推动技术创新和数字化转型。开发者应提升技能,适应高性能需求,把握发展机遇。
|
14天前
|
缓存 监控 算法
【专栏】.NET 开发:实现卓越性能的途径
【4月更文挑战第29天】本文探讨了.NET开发中的性能优化,强调了理解性能问题根源和使用分析工具的重要性。基础优化包括代码优化(如减少计算、避免内存泄漏)、资源管理及选择合适算法。高级策略涉及并行编程、缓存策略、预编译(AOT)和微服务架构。持续性能测试与监控是关键,包括性能测试、监控分析和建立优化反馈循环。开发者应持续学习和实践性能优化,以构建高性能应用。
|
14天前
|
开发框架 .NET C#
【专栏】理解.NET 技术,提升开发水平
【4月更文挑战第29天】本文介绍了.NET技术的核心概念和应用,包括其跨平台能力、性能优化、现代编程语言支持及Web开发等特性。文章强调了深入学习.NET技术、关注社区动态、实践经验及学习现代编程理念对提升开发水平的重要性。通过这些,开发者能更好地利用.NET构建高效、可维护的多平台应用。
|
14天前
|
机器学习/深度学习 vr&ar 开发者
【专栏】.NET 技术:引领开发新方向
【4月更文挑战第29天】本文探讨了.NET技术如何引领软件开发新方向,主要体现在三方面:1) 作为跨平台开发的先锋,.NET Core支持多操作系统和移动设备,借助.NET MAUI创建统一UI,适应物联网需求;2) 提升性能和开发者生产力,采用先进技术和优化策略,同时更新C#语言特性,提高代码效率和可维护性;3) 支持现代化应用架构,包括微服务、容器化,集成Kubernetes和ASP.NET Core,保障安全性。此外,.NET还不断探索AI、ML和AR/VR技术,为软件开发带来更多创新可能。
|
14天前
|
物联网 vr&ar 开发者
【专栏】.NET 技术:为开发注入活力
【4月更文挑战第29天】本文探讨了.NET技术的创新,主要体现在三个方面:1) .NET Core实现跨平台开发革命,支持多种操作系统和硬件,如.NET MAUI用于多平台UI;2) 性能提升与生产力飞跃,C#新特性简化编程,JIT和AOT优化提升性能,Roslyn提供代码分析工具;3) 引领现代化应用架构,支持微服务、容器化,内置安全机制。未来,.NET 7将带来更多新特性和前沿技术整合,如量子计算、AI,持续推动软件开发创新。开发者掌握.NET技术将赢得竞争优势。
|
14天前
|
人工智能 前端开发 Cloud Native
【专栏】洞察.NET 技术的开发趋势
【4月更文挑战第29天】本文探讨了.NET技术的三大发展趋势:1) 跨平台与云原生技术融合,通过.NET Core支持轻量级、高性能应用,适应云计算和微服务;2) 人工智能与机器学习的集成,如ML.NET框架,使开发者能用C#构建AI模型;3) 引入现代化前端开发技术,如Blazor,实现前后端一致性。随着.NET 8等新版本的发布,期待更多创新技术如量子计算、AR/VR的融合,.NET将持续推动软件开发的创新与进步。
|
14天前
|
开发框架 物联网 测试技术
【专栏】.NET 开发:打造领先应用的基石
【4月更文挑战第29天】本文探讨了.NET开发框架为何成为构建领先应用的首选。高性能与稳定性是.NET的核心优势,它采用先进的技术和优化策略,如.NET Core的轻量级设计和JIT/AOT编译模式。跨平台兼容性让开发者能用相同代码库在不同操作系统上构建应用。现代化的开发体验,如C#语言的创新特性和Visual Studio的强大工具,提升了开发者生产力。丰富的生态系统和广泛支持,包括庞大的开发者社区和微软的持续投入,为.NET提供了坚实后盾。
|
14天前
|
人工智能 前端开发 Devops
【专栏】洞察.NET 技术在现代开发中的作用
【4月更文挑战第29天】本文探讨了.NET技术在现代软件开发中的核心价值、应用及挑战。.NET提供语言统一性与多样性,强大的Visual Studio工具,丰富的类库,跨平台能力及活跃的开发者社区。实际应用包括企业级应用、Web、移动、云服务和游戏开发。未来面临性能优化、容器化、AI集成等挑战,需持续创新。开发者应深入理解.NET,把握技术趋势,参与社区,共创美好未来。
|
14天前
|
机器学习/深度学习 人工智能 开发者
【专栏】.NET 技术:为开发带来新机遇
【4月更文挑战第29天】本文探讨了.NET技术如何为软件开发带来新机遇,分为三个部分:首先,.NET的跨平台革命,包括.NET Core的兴起、Xamarin与.NET MAUI的移动应用开发、开源社区的推动及性能优化;其次,介绍了云服务与微服务架构的集成,如Azure云服务、微服务支持、DevOps与CI/CD,以及Docker容器化;最后,讨论了AI与机器学习集成,如ML.NET、认知服务、TensorFlow和ONNX,使开发者能构建智能应用。面对这些机遇,开发者应不断学习和适应新技术,以创造更多价值。