• 软件测试技术
  • 软件测试博客
  • 软件测试视频
  • 开源软件测试技术
  • 软件测试论坛
  • 软件测试沙龙
  • 软件测试资料下载
  • 软件测试杂志
  • 软件测试人才招聘
    暂时没有公告

字号: 小 中 大 | 推荐给好友 上一篇 | 下一篇

可输入的dropdownlist+服务器端的数据

发布: 2007-6-30 18:56 | 作者: admin | 来源: | 查看: 13次 | 进入软件测试论坛讨论

领测软件测试网 在把桌面程序改为 web程序时, 原来程序中用到的一个Infragistics的控件,既能输入又能下啦,下拉显示为一个table, 虽然Infragistics也提供了这样的web control, 但在使用过程中出现了一些bug。设置也比较繁琐。于是只好自己写了。
不过没有写成控件,通用性比较差
1。在服务器端将可选择的值导在一个datagrid中, 设置这个datagrid的display = @#none@#
2. 再在服务器端设置datagrid的每个item的onlick值
For i = 0 To dgd.Items.Count - 1
dgd.Items(i).Attributes.Add("onclick", "show(""" + dgd.Items(i).Cells(0).Text.Trim + """,@#" + txt.ClientID + "@#)")
dgd.Items(i).Attributes.Add("onMouseOver", "this.className=@#sel@#;")
dgd.Items(i).Attributes.Add("onMouseOut", "this.className=@#params@#;")
dgd.Items(i).CssClass = "params"
Next
这里必须设置在客户端点击某行时在那个控件现实什么值
3。还在服务器端设置点击的图片的客户端事件
img.Attributes.Add("onclick", "lstParams(@#" + txt.ClientID + "@#,@#" + dgd.ClientID + "@#)")
显示哪个datagrid中的值在哪个textbox下
4. 在客户端javascript中复制要显示的隐藏的datagrid中的值到一个div中,并设置显示的位置
/<DIV id=divParams
style="DISPLAY: none; Z-INDEX: 102; LEFT: 288px; WIDTH: 200px; POSITION: absolute; TOP: 264px; HEIGHT: 115px"/>/</DIV/>

function lstParams(txtbox,dgd) { var x,y; var dd=document.all[@#divParams@#]; var dpar=document.all[dgd]; var e =document.all[txtbox]; var str; var y=e.offsetTop+e.offsetHeight; var x=e.offsetLeft; while(e=e.offsetParent) { y+=e.offsetTop; x+=e.offsetLeft; }
str=dpar.innerHTML;
dd.innerHTML="/<table class=@#paramTB@# rules=@#all@# />"+str+"/</table/>";
with(dd.style) { left = x; top =y ; } }

客户端点击事件:
function show(value,ctr) { document.all[ctr].value=value; }
function hideParams() { var el=window.event.srcElement; if (el.id.indexOf(@#btnLst@#)==-1) document.all[@#divParams@#].style.display=@#none@#; else { if( document.all[@#divParams@#].style.display==@#none@#) document.all[@#divParams@#].style.display=@#@#; else document.all[@#divParams@#].style.display=@#none@#; } }
window.document.attachEvent("onclick",hideParams);
5。 要模仿得像dropdownlist要设置点击的图片紧靠在textbox旁
IMG id=btnLst style="Z-INDEX: 1;top:4px; LEFT: -5px; POSITION: relative" alt="" src="Images/btn.gif" runat=server

这样就可以模仿一个可输入的dropdownlist下拉为一个table, 点中某行可以将要显示的值显示在输入框中

延伸阅读

文章来源于领测软件测试网 https://www.ltesting.net/


关于领测软件测试网 | 领测软件测试网合作伙伴 | 广告服务 | 投稿指南 | 联系我们 | 网站地图 | 友情链接
版权所有(C) 2003-2010 TestAge(领测软件测试网)|领测国际科技(北京)有限公司|软件测试工程师培训网 All Rights Reserved
北京市海淀区中关村南大街9号北京理工科技大厦1402室 京ICP备2023014753号-2
技术支持和业务联系:[email protected] 电话:010-51297073

软件测试 | 领测国际 | ISTQB | ISTQB官网 | TMMi | TMMi认证 | 国际软件测试工程师认证 | 领测软件测试网