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

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);
                        }
                    }
                }
            }
        }

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

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

时间: 2024-10-05 11:33:33

ASP.NET-FineUI开发实践-13(二)的相关文章

FineUI开发实践-目录

FineUI初学手册 下载,实例项目搭建 ASP.NET-FineUI开发实践-1 实际开发环境是FineUI 4.0.4,编辑页面回发,__doPostBack应用 ASP.NET-FineUI开发实践-2 1.Window控件显示2.显示隐藏控件4.直接通过行号修改指定列内容5.获取iframe ASP.NET-FineUI开发实践-3 1.参照模拟数据库分页通过缓存重写内存分页,优化页面响应速度2.得到指定行指定列的值后台3.按钮至少选择一项的通用方法,OnClientClick+=累加.

ASP.NET5+EntityFramework7开发实践(三)

1.说明 在<ASP.NET5+EntityFramework7开发实践(一)>介绍过仓储模式,只是没有在控制器中如何使用? 本章重新补充一下.注意,也会使用ASP.NET5中的依赖注入. 2.仓储模式 先看接口: 1 public interface IRoleRepository:IDisposable 2 { 3 //IEnumerable和IQueryable 4 //二者在EF都会延迟加载,不同的是: 5 //IEnumerable是数据加载到内存,刷选在内存中的数据上执行 6 //

使用ADO实现BLOB数据的存取 -- ADO开发实践之二

使用ADO实现BLOB数据的存取 -- ADO开发实践之二 http://www.360doc.com/content/11/0113/16/4780948_86256633.shtml 一.前言 在上一篇文章<>中我们详细介绍了ADO基本的操作方法,在实际的开发过程中我们常常需要存储较大的二进制数据对象,比如:图像.音频文件.或其它二进制数据,这些数据我们称之为二进制大对象BLOB(Binary Large Object),其存取的方式与普通数据有所区别.本文将介绍利用ADO在数据库中存取B

Git工程开发实践(二)——Git内部实现机制

Git工程开发实践(二)--Git内部实现机制 一.Git仓库内部实现简介 Git本质上是一个内容寻址(content-addressable)的文件系统,根据文件内容的SHA-1哈希值来定位文件.Git核心部分是一个简单的键值对数据库(key-value data store).向Git数据库插入任意类型的内容,会返回一个键值,通过返回的键值可以在任意时刻再次检索(retrieve)插入的内容.通过底层命令hash-object可以将任意数据保存到.git目录并返回相应的键值.Git包含一套面

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

其实我也不会,老实教人学怕误人子弟,但是抱着毁人不倦的精神还是糊弄糊弄个别小白吧,最起码能加点原创. 下面以表单为例,打开官方项目,版本为FineUI_4.1.1,打开form_compare页,右键在浏览器中查看,右键查看源文件,这次要做的是前台通过按钮点击生成form及与后台的交互. 1.生成一个行 form_compare里有文本行 文本框1 ,源文件里搜 文本框1 看到了什么,fieldLable就是‘文本框 1‘,说明生成的lable和后面的input(就是textbox)是一个元素,

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

开原版好像是没有gird树,有一个扩展列下的模拟树列,就是不能展开,专业版有,开原版我弄了弄,思路是有,就是不是很好实现.这篇博客直接写出了(一)说明一个肯定是写不完的. FineUI重在封装,改这个我也不打算大量的js实现,最起码前台传几个属性就可以了,后台就都实现了,这是初衷,就是有点慢,太慢的话以后会改成前台实现的.以前我修改的或新建的不管是前后台方法都是可以通用的,尽量避免一个页面写一遍,那不是好代码. 1.核心 对于显示树层级,主要的就是缩进,这个弄好了就可以了,好在列有个DataSi

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

1.上回说到修改以前的会出现好几个5: 这是因为新增时是只新增到最后一行,所以点击选好了就跑到最后一行了,而且行号不会累积,只加到初始化的行号. 其实js里是有插入的,例子里可以插入到第一行,新增是add,插入是insert.在ext-part2.js里 insert的参数是0,就是第一行,换成行号就可以了.我重写了方法 insert 的参数是rowIndex,  rowIndex=window._selectrowIndex window._selectrowIndex是在弹出windown时

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

在网上找了找,实验了一下window弹出和关闭的动画效果分享一下. 接上次的代码 default.js window_tips.animCollapse= true;//打开动画效果 window_tips.animateTarget = Ext.getBody();//开始的定位,就是以哪定位,是个el,=按钮 也行 ext-part2.js f_showTips: function里加上 window_tips.on('beforehide', this.f_hideTips);//注册关闭

ASP.NET5+EntityFramework7开发实践(一)

 1.创建项目 创建“空白解决方案”,名为GiveCase. 在解决方案里,添加ASP.NET5 Empty模板项目,名为GiveCase.Web.  2.实体类 实体基类: 1 /// <summary> 2 /// 实体 抽象基类 3 /// </summary> 4 /// <typeparam name="TKey">主键类型</typeparam> 5 public abstract class EntityBase<TK