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

在一个项目的开发中，遇到这样的情况，我希望在 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 >
         &nbsp;&nbsp; < br  />
         < 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 下拉列表中的一行时，就可以把该行对应的三个字段分别填写到页面上的三个文本框中。

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