在客户端获取Infragistics WebCombo所选的值

最新推荐文章于 2020-10-21 11:59:06 发布

oneiter

最新推荐文章于 2020-10-21 11:59:06 发布

阅读量3.9k

点赞数

分类专栏： Infragistics控件文章标签： textbox javascript server header asp table

本文链接：https://blog.youkuaiyun.com/oneiter/article/details/1591398

版权

Infragistics控件专栏收录该内容

6 篇文章

订阅专栏

在一个项目的开发中，遇到这样的情况，我希望在 Infragistics WebCombo 的下拉表中选择一行，然后把这行中的几个字段，分别填写到另外的几个控件上。

当然，我们可以使用Infragistics WebCombo 的SelectedRowChanged事件，在事件中去获取选择行的内容，然后填写到其它控件上，并显示给用户，这样实现也挺简单，思路也明确。但是这样做，有个不好的地方，就是每点一次Infragistics WebCombo 进行选择，都触发一次服务器端事件，导致页面的回传、刷新，不但降低了效率，用户体验也不够好。

其实，这个功能通过JavaScript来实现的话，就能起到比较好的效果。下面是我为此而做的一个简单的例子：

第一步：做一个简单的页面WebComboScript.aspx，上面有一个Infragistics WebCombo ，和三个TextBox，代码如下：

<% @ Page Language="C#" AutoEventWireup="true" CodeFile="WebComboScript.aspx.cs" Inherits="WebComboScript" %>

<% @ Register Assembly="Infragistics2.WebUI.WebCombo.v5.3, Version=5.3.20053.73, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"

Namespace="Infragistics.WebUI.WebCombo" TagPrefix="igcmbo" %>

<% @ Register Assembly="Infragistics2.WebUI.UltraWebGrid.v5.3, Version=5.3.20053.73, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"

Namespace="Infragistics.WebUI.UltraWebGrid" TagPrefix="igtbl" %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns ="http://www.w3.org/1999/xhtml" >

< head runat ="server" >

< title > JavaScript获取WebCombo所选值 </ title >

</ head >

< body >

< form id ="form1" runat ="server" >

< div >

< strong >

< br />

JavaScript获取WebCombo所选值 </ strong >

   < br />

< table style ="width: 552px" border =1 >

< tr >

< td style ="width: 203px" >

< igcmbo:WebCombo ID ="WebCombo1" runat ="server" BackColor ="White" BorderColor ="LightGray" BorderStyle ="Solid" BorderWidth ="1px" ForeColor ="Black" Height ="22px" JavaScriptFileName ="" JavaScriptFileNameCommon ="" Version ="3.00" Width ="200px" >

< Rows >

< igtbl:UltraGridRow Height ="" >

< cells >

< igtbl:UltraGridCell Text ="字段11" ></ igtbl:UltraGridCell >

< igtbl:UltraGridCell Text ="字段12" ></ igtbl:UltraGridCell >

< igtbl:UltraGridCell Text ="字段13" ></ igtbl:UltraGridCell >

</ cells >

</ igtbl:UltraGridRow >

< igtbl:UltraGridRow Height ="" >

< cells >

< igtbl:UltraGridCell Text ="字段21" ></ igtbl:UltraGridCell >

< igtbl:UltraGridCell Text ="字段22" ></ igtbl:UltraGridCell >

< igtbl:UltraGridCell Text ="字段23" ></ igtbl:UltraGridCell >

</ cells >

</ igtbl:UltraGridRow >

< igtbl:UltraGridRow Height ="" >

< cells >

< igtbl:UltraGridCell Text ="字段31" ></ igtbl:UltraGridCell >

< igtbl:UltraGridCell Text ="字段32" ></ igtbl:UltraGridCell >

< igtbl:UltraGridCell Text ="字段33" ></ igtbl:UltraGridCell >

</ cells >

</ igtbl:UltraGridRow >

< igtbl:UltraGridRow Height ="" >

< cells >

< igtbl:UltraGridCell Text ="字段41" ></ igtbl:UltraGridCell >

< igtbl:UltraGridCell Text ="字段42" ></ igtbl:UltraGridCell >

< igtbl:UltraGridCell Text ="字段43" ></ igtbl:UltraGridCell >

</ cells >

</ igtbl:UltraGridRow >

</ Rows >

< DropDownLayout BorderCollapse ="Separate" HeaderClickAction ="Select" JavaScriptFileName =""

RowHeightDefault ="20px" >

< HeaderStyle BackColor ="LightGray" BorderStyle ="Solid" >

< BorderDetails ColorLeft ="White" ColorTop ="White" WidthLeft ="1px" WidthTop ="1px" />

</ HeaderStyle >

< FrameStyle BackColor ="Silver" BorderStyle ="Ridge" BorderWidth ="2px" Cursor ="Default"

Font-Names ="Verdana" Font-Size ="10pt" Height ="130px" Width ="325px" >

</ FrameStyle >

< RowStyle BackColor ="White" BorderColor ="Gray" BorderStyle ="Solid" BorderWidth ="1px" >

< BorderDetails WidthLeft ="0px" WidthTop ="0px" />

</ RowStyle >

< SelectedRowStyle BackColor ="DarkBlue" ForeColor ="White" />

</ DropDownLayout >

< ClientSideEvents AfterSelectChange ="WebCombo1_AfterSelectChange" />

< ExpandEffects ShadowColor ="LightGray" />

< Columns >

< igtbl:UltraGridColumn >

</ igtbl:UltraGridColumn >

< igtbl:UltraGridColumn >

< header >

< RowLayoutColumnInfo OriginX ="1" ></ RowLayoutColumnInfo >

</ header >

< footer >

< RowLayoutColumnInfo OriginX ="1" ></ RowLayoutColumnInfo >

</ footer >

</ igtbl:UltraGridColumn >

< igtbl:UltraGridColumn >

< header >

< RowLayoutColumnInfo OriginX ="2" ></ RowLayoutColumnInfo >

</ header >

< footer >

< RowLayoutColumnInfo OriginX ="2" ></ RowLayoutColumnInfo >

</ footer >

</ igtbl:UltraGridColumn >

</ Columns >

</ igcmbo:WebCombo >

</ td >

< td align ="right" >

字段一： </ td >

< td style ="width: 200px" >

< asp:TextBox ID ="TextBox1" runat ="server" Width ="150px" ></ asp:TextBox ></ td >

</ tr >

< tr >

< td style ="width: 203px" >

</ td >

< td align ="right" >

字段二： </ td >

< td style ="width: 200px" >

< asp:TextBox ID ="TextBox2" runat ="server" Width ="150px" ></ asp:TextBox ></ td >

</ tr >

< tr >

< td style ="width: 203px" >

</ td >

< td align ="right" >

字段三： </ td >

< td style ="width: 200px" >

< asp:TextBox ID ="TextBox3" runat ="server" Width ="150px" ></ asp:TextBox ></ td >

</ tr >

</ table >

</ div >

</ form >

</ body >

</ html >

第二步：在Infragistics WebCombo 的属性中添加一个客户端事件WebCombo1_AfterSelectChange，在该客户端事件中输入如下JavaScript 代码：

< script id = " Infragistics " type = " text/javascript " >

<!--

function WebCombo1_AfterSelectChange(webComboId)

{

//根据传入的ID创建一个对象

var oWebCombo1 = igcmbo_initCombo(webComboId);

//获取被选择的行索引

var selectRowIndex = oWebCombo1.getSelectedIndex();

//获取所选行的值

var value0 =oWebCombo1.getGrid().Rows.getRow(selectRowIndex).getCell(0).getValue();

var value1 =oWebCombo1.getGrid().Rows.getRow(selectRowIndex).getCell(1).getValue();

var value2 =oWebCombo1.getGrid().Rows.getRow(selectRowIndex).getCell(2).getValue();

//把获取的值设置到相应的TextBox

document.getElementById('<%=this.TextBox1.ClientID%>').value = value0;

document.getElementById('<%=this.TextBox2.ClientID%>').value = value1;

document.getElementById('<%=this.TextBox3.ClientID%>').value = value2;

} // -->

</ script >

这样，当每选择Infragistics WebCombo 下拉列表中的一行时，就可以把该行对应的三个字段分别填写到页面上的三个文本框中。

以上只是一个简单的尝试，当然可以根据需要，编写更加复杂的代码，实现更加复杂的功能。本文只是提供一种思路。