首页 > 代码库 > ASP.NET-FineUI开发实践-7
ASP.NET-FineUI开发实践-7
下拉显示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的大小。我这个没判断，想弄的自己加吧，多测测
ASP.NET-FineUI开发实践-7