ASP.NET-FineUI开发实践-8

上回模拟的是下拉grid,这回我把下拉grid和表格自动不全放一起了,实在是好做,但是也有很多要注意的,现在分享下,大家学习。

接上回 传送门

1. 有个tbxMyBox1_TriggerClick方法直接重写了,目的是显示下拉的列表,直接上代码注意看注释,grid ID是grid2

     function tbxMyBox1_TriggerClick() {
            //先隐藏
            F(‘<% =Grid2.ClientID%>‘).hide();
            //位置设定样式
            $(‘#Grid2_wrapper‘).css(‘top‘, $("#<% =TriggerBox1.ClientID %>-triggerWrap").offset().top + $("#<% =TriggerBox1.ClientID %>-triggerWrap").height());
            $(‘#Grid2_wrapper‘).css(‘left‘, $("#<% =TriggerBox1.ClientID %>-triggerWrap").offset().left);
            $(‘#Grid2_wrapper‘).css(‘position‘, ‘fixed‘);
            $(‘#Grid2_wrapper‘).css(‘z-index‘, ‘9999‘);
            //显示方法
            F(‘<% =Grid2.ClientID%>‘).show(F(‘<% =TriggerBox1.ClientID %>‘).getEl(), function () {
            });
        }

  

下面问题来了:学习...不是这个

grid 显示出来老在那呆着,找了半天才找见解决方案,点击grid2以外自动隐藏grid2,加上这句

                //页面的点击事件
                $(document).click(function (e) {
                    var target = $(e.target);
                    //判断是否点击的位置,是gird和当前编辑的TriggerBox1就不变,点击其他位置就隐藏grid
                    //closest是一层层找上层元素,找不到返回0,可以在网上看看例子
                    //第二个判断是grid是否隐藏,显示的再触发隐藏
                    if (target.closest("#<% =Grid2.ClientID%>").length == 0 && !F(‘<% =Grid2.ClientID%>‘).isHidden() && target.closest("#<% =TriggerBox1.ClientID%>").length == 0) {
                        showhide();
                    }
                });

  加到show方法里,在grid2show出来之后触发。全:

		 function tbxMyBox1_TriggerClick(t) {
            //先隐藏
            F(‘<% =Grid2.ClientID%>‘).hide();
            //位置设定样式
            $(‘#Grid2_wrapper‘).css(‘top‘, $("#<% =TriggerBox1.ClientID %>-triggerWrap").offset().top + $("#<% =TriggerBox1.ClientID %>-triggerWrap").height());
            $(‘#Grid2_wrapper‘).css(‘left‘, $("#<% =TriggerBox1.ClientID %>-triggerWrap").offset().left);
            $(‘#Grid2_wrapper‘).css(‘position‘, ‘fixed‘);
            $(‘#Grid2_wrapper‘).css(‘z-index‘, ‘9999‘);
            //显示方法
            F(‘<% =Grid2.ClientID%>‘).show(F(‘<% =TriggerBox1.ClientID %>‘).getEl(), function () {
                //页面的点击事件
                $(document).click(function (e) {
                    var target = $(e.target);
                    //判断是否点击的位置,是gird和当前编辑的TriggerBox1就不变,点击其他位置就隐藏grid
                    //closest是一层层找上层元素,找不到返回0,可以在网上看看例子
                    //第二个判断是grid是否隐藏,显示的再触发隐藏
                    if (target.closest("#<% =Grid2.ClientID%>").length == 0 && !F(‘<% =Grid2.ClientID%>‘).isHidden() && target.closest("#<% =TriggerBox1.ClientID%>").length == 0) {
                        showhide();
                    }
                });
            });
        }

  

showhide();以前写了,就不写了。显示出来了。

2. 问题又来了,当点击grid1外的位置编辑列还原了,就是又变为正常状态,输入框没了,好像是以前写过startEditByPosition是编辑方法,在ext-part2.js里找到的,有图为证

字面意思就是开始编辑的位置,参数是行号和列号。这个方法的用处就是点击gird2时

参数grid1的beforeedit事件

        F.ready(function () {
            //浮动grid2能跑加上就不跑了
            F(‘<% =Grid2.ClientID%>‘).draggable = false;
            //编辑之前的事件
            F(‘<% = Grid1.ClientID %>‘).on(‘beforeedit‘, function (editor, e) {
                //列名
                if (e.field == ‘Name‘) {
                    //列号
                    window._selectrowIndex = e.rowIdx;
                    window._selectcellIndex = e.colIdx;
                }
                return true;
            });
        });

 当项目点击事件里随时改变编辑位置,这个事件也是斟酌过的,其他的事件有刷新,一眼就看出来了,这个事件看不见刷新。

 

            //项点击事件
            F(‘<%= Grid2.ClientID %>‘).on(‘itemmousedown‘, function (View, record, item, index, e) {
                F(‘<% =Grid1.ClientID%>‘).f_cellEditing.cancelEdit();
                F(‘<% =Grid1.ClientID%>‘).f_cellEditing.startEditByPosition({
                    row: _selectrowIndex, column: _selectcellIndex
                });
            });

  3. 就差点击事件了,我用了表格的双击事件,前台js触发,可能是用惯了

            F(‘<% =Grid2.ClientID%>‘).on(‘itemdblclick‘, function (grid, record, item, index) {
                F.customEvent(‘Grid2_click_‘ + index);
                F(‘<% =Grid2.ClientID%>‘).hide();
            });

  后台:

		protected void PageManager1_CustomEvent(object sender, CustomEventArgs e)
        {
            if (e.EventArgument.IndexOf("Grid2_click_") >= 0)
            {
                int index = Convert.ToInt32(e.EventArgument.Split(‘_‘)[2].ToString());
                string name = Grid2.Rows[index].Values[Grid2.FindColumn("Name").ColumnIndex].ToString();
                DataTable table = GetDataTable();
                foreach (DataRow row in table.Rows)
                {
                    if (row["Name"].ToString() == name)
                    {
                        string deleteScript = Grid1.GetDeleteIndexReference();
                        //string deleteScript = "";
                        JObject defaultObj = new JObject();
                        defaultObj.Add("Name", row["Name"].ToString());
                        defaultObj.Add("Gender", row["Gender"].ToString());
                        defaultObj.Add("EntranceYear", row["EntranceYear"].ToString());
                        defaultObj.Add("EntranceDate", row["EntranceDate"].ToString());
                        defaultObj.Add("AtSchool", (bool)row["AtSchool"]);
                        defaultObj.Add("Major", row["Major"].ToString());
                        PageContext.RegisterStartupScript(
                            deleteScript //删除当前行
                            + Grid1.GetAddNewRecordReferenceByindex(defaultObj) //新增定义的行
                            + "");//把窗体管理
                    }
                }
            }
        }

  

时间: 2024-11-05 13:42:03

ASP.NET-FineUI开发实践-8的相关文章

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

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

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

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

现在是这么个问题,在开发中表格是动态出来的,就是标准板是全部字段列出,客户要根据情况列出自己想要的,在增加操作页面的同时要是能用前台自带的功能直接保存到后台就好了,现在的列显示和隐藏是不回发的. 1.FineUI引用的extjs是ext-part1.js,这就不说了,以前截过图,这个文件是压缩的,参数也是简化的不好看,其实这个就是ext-all.js,ext-all哪来的呢,就是extjs官方实例里下的,下来之后也是压缩的,旁边还有个不压缩的,ext-all-debug.js ,完全可以看,那我

ASP.NET MVC5 网站开发实践(二) Member区域 - 添加文章

转自:http://www.cnblogs.com/mzwhj/p/3592895.html 上次把架构做好了,这次做添加文章.添加文章涉及附件的上传管理及富文本编辑器的使用,早添加文章时一并实现. 要点: 富文本编辑器采用KindEditor.功能很强大,国人开发,LGPL开源,自己人的好东西没有理由不支持. 附件的上传同样基于KindEditor实现,可以上传图片,flash,影音,文件等. 目录 ASP.NET MVC5 网站开发实践 - 概述 ASP.NET MVC5 网站开发实践(一)

【新书推荐】《微软开源跨平台移动开发实践》带你走近微软开源开源跨平台技术

上周收到本书作者李争送的一本12月份的新书<微软开源跨平台移动开发实践——利用ASP.NET Core 1.0 .Apache Cordova.Xamarin和Azure快速构建移动应用解决方案>.这本书的名字超长.这本书也是超薄,只有220页,一个周末时间就读完了,但是这本书的内容确是超丰富,浓缩了微软这三年向开源和跨平台领域的转变,微软在开源和跨平台领域构建出来的一套技术体系.从服务端的NET Core.ASP.NET 和 Web APi ,到Web端的 Typescript脚本语言,再到

ASP.NET程序开发范例宝典

在整理资料时发现一些非常有用的资料源码尤其是初学者,大部分是平时用到的知识点,可以参考其实现方法,分享给大家学习,但请不要用于商业用途. 如果对你有用请多多推荐给其他人分享. 点击对应章节标题下载本章节下所有源代码. 目录: 第2章 HTML开发与实践 15 2.1 框架的使用 16 实例009 使用FrameSet框架布局聊天室 16 实例010 使用IFrame框架布局企业管理系统 17 2.2 滚屏的实现 18 实例011 滚动显示博客公告 18 实例012 滚屏效果并实现超级链接 20

ASP.NET跨平台最佳实践

前言 八年的坚持敌不过领导的固执,最终还是不得不阔别已经成为我第二语言的C#,转战Java阵营.有过短暂的失落和迷茫,但技术转型真的没有想象中那么难.回头审视,其实单从语言本身来看,C#确实比Java更优秀(并非C#天生丽质,而是它站在了巨人的肩膀上). 本文并非为.NET正名而来,而仅仅是分享作者近几年在ASP.NET跨平台方面的研究与实践经验,算是对八年的.NET之路作一个阶段性的总结. .NET技术自诞生以来,便一直因其跨平台能力差而广受诟病.这里面有微软有意为之,也有别有用心之人在混淆视

asp.net 网站开发流程总结

由于这学期要做asp.net的网站开发,导师让我们在前期做详细的计划说明,时间安排.由于网站开发流程不知道,以及需要学什么指示都是盲懂,所以计划安排需在了解大致流程之后才能做出来,一下是询问同学和在网上查阅,总结出的粗略的网站开发流程以及一些所需要学的知识.可能存在很多漏洞和缺陷,如大家看到了也希望大家指导..... 总结一 asp.net建网站的主要步骤 1. 首先是需求分析了,分析你打算做哪些功能,涉及哪些因素以及他们的关联关系等等. 2. 数据库设计,根据功能定义出可能的数据对象,设计出数

【新书推荐】《微软开源跨平台移动开发实践》--带你走近微软开源开源跨平台技术

上周收到本书作者李争送的一本12月份的新书<微软开源跨平台移动开发实践——利用ASP.NET Core 1.0 .Apache Cordova.Xamarin和Azure快速构建移动应用解决方案>.这本书的名字超长.这本书也是超薄,只有220页,一个周末时间就读完了,但是这本书的内容确是超丰富,浓缩了微软这三年向开源和跨平台领域的转变,微软在开源和跨平台领域构建出来的一套技术体系.从服务端的NET Core.ASP.NET 和 Web APi ,到Web端的 Typescript脚本语言,再到