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

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

原创最新推荐文章于 2020-10-21 11:59:06 发布 · 4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#textbox #javascript #server #header #asp #table

Infragistics控件专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用JavaScript处理InfragisticsWebCombo控件的选择变化事件，以实现在选择下拉列表项时，无需触发服务器回传即可更新页面上其他控件内容的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在一个项目的开发中，遇到这样的情况，我希望在 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">

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

</head>

<body>

<div>

<br />

JavaScript获取WebCombo所选值</strong>

  <br />

<tr>

<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>

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

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

</FrameStyle>

</RowStyle>

</DropDownLayout>

<igtbl:UltraGridColumn>

</igtbl:UltraGridColumn>

<igtbl:UltraGridColumn>

</header>

</footer>

</igtbl:UltraGridColumn>

<igtbl:UltraGridColumn>

</header>

</footer>

</igtbl:UltraGridColumn>

</Columns>

</igcmbo:WebCombo>

</td>

字段一：</td>

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

</tr>

<tr>

</td>

字段二：</td>

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

</tr>

<tr>

</td>

字段三：</td>

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

</tr>

</table>

</div>

</form>

</body>

</html>

第二步：在Infragistics WebCombo 的属性中添加一个客户端事件WebCombo1_AfterSelectChange，在该客户端事件中输入如下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 下拉列表中的一行时，就可以把该行对应的三个字段分别填写到页面上的三个文本框中。

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