ASP.NET-FineUI开发实践-7

简介: 下拉显示grid列表。其实很简单,但是试了很多方法,水平有限,主要是都不好使,还是简单的好使了,分享下。 先是看了看网上的,是直接写个了extjs控件类(我也不懂),然后直接用就行了,要写成FineUI的我还没那个水平,就放弃了。

下拉显示grid列表。其实很简单,但是试了很多方法,水平有限,主要是都不好使,还是简单的好使了,分享下。

先是看了看网上的,是直接写个了extjs控件类(我也不懂),然后直接用就行了,要写成FineUI的我还没那个水平,就放弃了。又看了看其他的例子,没多大用。

原理就是点击下拉时把grid在指定位置显示出来,选择grid行后赋值给下拉控件。

下拉的控件DropDownList其实并不适合,首先要捕捉展开事件,难在赋值上,这个思路是给DropDownList绑定数据下拉显示grid而不是自动的数据,grid选完后控制DropDownList选择的数据,给DropDownList绑定后出现下拉框和grid同时出现,下拉的列表弄不没,看源码得知下拉的列表时自动生成的,ID不固定,没规律获取不到,如果只绑定数据不显示数据也会出现一个自动生成的div只是没内容,但是不好看,总之不要DropDownList,用TriggerBox原因是这俩长得一样。

1.TriggerBox下拉事件就是点击事件 OnClientTriggerClick 就可以了,grid的位置还是选择了用jq控制,extjs也能控制,但不适合FineUI。

 

2.利用在form下grid会先生成_wrapper div标签,挪了_wrapper 就等于挪了grid

3.上代码

 

function showgrid() {
            //获取的是TriggerBox1里那个输入框的位置,不是TriggerBox1的位置,因为还有个lable的宽度
            //alert($("#<% =TriggerBox1.ClientID %>-triggerWrap").offset().left);
            //alert($("#<% =TriggerBox1.ClientID %>-triggerWrap").offset().top);
            //设置位置,top和left
            $('#Grid1_wrapper').css('top', $("#<% =TriggerBox1.ClientID %>-triggerWrap").offset().top + $("#<% =TriggerBox1.ClientID %>-triggerWrap").height());
            $('#Grid1_wrapper').css('left', $("#<% =TriggerBox1.ClientID %>-triggerWrap").offset().left);
            //设置该div是浮动
            $('#Grid1_wrapper').css('position', 'fixed');
            //显示grid,第二个参数是显示完成后执行的函数,先放着可以跟后台交互重新加载grid啥的
            F('<% =Grid1.ClientID%>').show(F('<% =TriggerBox1.ClientID %>').getEl(), function () {
            });
            //extjs 的方法showAt好像不管用,没试
            //F('<% =Grid1.ClientID%>').showAt(F('<% =TriggerBox1.ClientID%>').getXY(),true);
        }

  

恩就这几行,已知问题是Grid1_wrapper老长了,挪完了可能会出滚动条,这个就不解决了,应该好弄。

如果grid能移动把在ready把这句加上

F('<% =Grid1.ClientID%>').draggable = false;

4.赋值,前台grid选择事件老是没试成功,只能选择了后台事件,注册grid的行点击事件,咋写就不说了,看例子,后台是获取数据和显示

TriggerBox1.Text = Grid1.Rows[index].Values[Grid1.FindColumn("Name").ColumnIndex].ToString();

  

这句是显示名字的,如果是ID就放隐藏空间里,然后在取,就不写了。

上个图

5.grid的分页条弄出来了,放了个取消就是关闭grid,直接在前台实现是

F('<% =Grid1.ClientID%>').hide();

  

这个功能可以放在TriggerBox控件的第二个按钮X完成,就不写了。

6.点着点着发现我的页签总保持一个,不知道啥时候改的,也放出来吧

7.DropDownList的展开收起事件

F('<% =DropDownList1.ClientID%>').on('expand', function (combo) {
            });
            F('<% =DropDownList1.ClientID%>').on('collapse', function (combo) {
                //F('<% =Grid1.ClientID%>').hide();
            });

  

后记:DropDownList可以判断选择位置,地方不够了会显示到上面或者改变选项div的大小。我这个没判断,想弄的自己加吧,多测测

目录
相关文章
|
14天前
|
设计模式 开发框架 JavaScript
基于.NET8 + Vue/UniApp前后端分离的快速开发框架,开箱即用!
基于.NET8 + Vue/UniApp前后端分离的快速开发框架,开箱即用!
|
2月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
113 3
|
14天前
|
存储 缓存 NoSQL
2款使用.NET开发的数据库系统
2款使用.NET开发的数据库系统
|
14天前
|
开发框架 JavaScript 前端开发
2024年全面且功能强大的.NET快速开发框架推荐,效率提升利器!
2024年全面且功能强大的.NET快速开发框架推荐,效率提升利器!
|
2月前
|
JSON C# 开发者
C#语言新特性深度剖析:提升你的.NET开发效率
【10月更文挑战第15天】C#语言凭借其强大的功能和易用性深受开发者喜爱。随着.NET平台的演进,C#不断引入新特性,如C# 7.0的模式匹配和C# 8.0的异步流,显著提升了开发效率和代码可维护性。本文将深入探讨这些新特性,助力开发者在.NET开发中更高效地利用它们。
36 1
|
2月前
|
开发框架 NoSQL MongoDB
C#/.NET/.NET Core开发实战教程集合
C#/.NET/.NET Core开发实战教程集合
|
2月前
|
C# Windows
一款基于.NET开发的简易高效的文件转换器
一款基于.NET开发的简易高效的文件转换器
|
JavaScript API
ASP.NET-FineUI开发实践-9(四)
现在是这么个问题,在开发中表格是动态出来的,就是标准板是全部字段列出,客户要根据情况列出自己想要的,在增加操作页面的同时要是能用前台自带的功能直接保存到后台就好了,现在的列显示和隐藏是不回发的。 1.
909 0
|
前端开发 API 数据库
ASP.NET-FineUI开发实践-9(三)
1. TextChanged事件前台触发回发后台,接上文,先给TextBox1加上事件,看看是怎么生成出来的, 注意AutoPostBack="true",找源代码,f4多出了个 listeners: { change: function () { ...
845 0
|
JavaScript API
ASP.NET-FineUI开发实践-9(二)
其实我也不会,老实教人学怕误人子弟,但是抱着毁人不倦的精神还是糊弄糊弄个别小白吧,最起码能加点原创。 下面以表单为例,打开官方项目,版本为FineUI_4.1.1,打开form_compare页,右键在浏览器中查看,右键查看源文件,这次要做的是前台通过按钮点击生成form及与后台的交互。
865 0