注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Start Know

自分を信じて、自分で一定でいけます

 
 
 

日志

 
 

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

2008-08-21 16:36:13|  分类: .net |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

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

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

  评论这张
 
阅读(705)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018