科技行者

行者学院 转型私董会 科技行者专题报道 网红大战科技行者

知识库

知识库 安全导航

至顶网软件频道使用javascript控制datagrid中的对象

使用javascript控制datagrid中的对象

  • 扫一扫
    分享文章到微信

  • 扫一扫
    关注官方公众号
    至顶头条

本文主要讲了如何使用javascript控制datagrid中的对象。

作者:乔峰 来源:CSDN 2008年3月17日

关键字: 控制 JavaScript java

  • 评论
  • 分享微博
  • 分享邮件

以下是ASPX页面,上面放了三个datasource,基本不用看,看javascript部分好了 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xmlns=http://www.w3.org/1999/xhtml >
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
    <!--
    //由于IE和FireFox/NetScape实现DOM的方式稍有不同,如果要在firefox中能顺利运行,此方法应稍做修改
    function rechange(obj,targ){
        //传入两个参数,第一个参数是一个select,第二个是dg2的客户端ID
        var tmp;
        var i=0;
        var arr=new Array();
        //由select上溯直到tbody为止
        var tab=obj.parentNode;
        while(tab.tagName!="TBODY"){
            tab=tab.parentNode;
        }
        //得到所有的产品统计列表存入arr中
        for( i=1;i<tab.childNodes.length;i++){
            //这是下拉选择框
            var selectTag=tab.childNodes[i].childNodes[0].childNodes[0];
            //这是行的第二列
            var litTag=tab.childNodes[i].childNodes[1];
            //下拉选择项的选择值即为产品ID
            var productID=selectTag.value;
            //数量是存放在行的第二列中
            var quantity=parseInt(litTag.innerText);
            //如果数组没有初始化,初始化序列为产品ID的数组
            if(arr[productID]==null){
                arr[productID]=new Array();
                arr[productID][0]=0;
            }
            //加入到关于产品ID的数量统计中
            arr[productID][0]+=quantity;
        }
        //得到下一个dg2的tbody主体
        var targ=document.getElementById(targ).childNodes[0];
        //然后遍历所有的行,从1开始是因为有标头
        for(i=1;i<targ.childNodes.length;i++){
            //得到产品ID
            var productID=targ.childNodes[i].childNodes[0].innerHTML;
            //var productName=targ.childNodes[i].childNodes[1].innerHTML;
            //var quantity=targ.childNodes[i].childNodes[2].innerHTML;
            //如果arr数组中有关于此产品的统计,则重写
            if(arr[productID]!=null){
                targ.childNodes[i].childNodes[2].innerHTML=arr[productID][0];
            }
            //反之置0
            else{
                targ.childNodes[i].childNodes[2].innerHTML=0;
            }
        }
    }
    //-->
    </script>
</head>
<body>
    <form id="form1" runat="server">
       
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT [ProductName], [ProductID] FROM [Alphabetical list of products] where [ProductID]<20">
        </asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT [ProductID], [Quantity] FROM [Order Details] where [ProductID]<20"></asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT a.[ProductID],b.[ProductName],sum(a.[Quantity]) as [totalQuantity] FROM [Order Details] a inner join [Alphabetical list of products] b on a.[ProductID]=b.[ProductID] where a.[ProductID]<20 group by a.[productid],b.[ProductName]">
        </asp:SqlDataSource>
           
        <asp:DataGrid runat="server" ID="dg1" AutoGenerateColumns="False" DataSourceID="SqlDataSource2" OnItemDataBound="dg1_ItemDataBound">
            <Columns>
                <asp:TemplateColumn HeaderText="ProductID">
                    <ItemTemplate>
                        <asp:DropDownList runat="server" ID="DDL1" DataSourceID="SqlDataSource1" DataTextField="ProductName" DataValueField="ProductID"></asp:DropDownList>
                    </ItemTemplate>
                </asp:TemplateColumn>
                <asp:BoundColumn DataField="Quantity" FooterText="Quantity" HeaderText="Quantity"></asp:BoundColumn>
            </Columns>
        </asp:DataGrid>&nbsp;
       
        <asp:DataGrid runat="server" ID="DG2" DataSourceID="SqlDataSource3"></asp:DataGrid>
       
    </form>
</body>
</html>

 

cs部分:给dropdownlist一个客户端事件,传入的两个参数,在上面的javascript部分有说明

 protected void dg1_ItemDataBound(object sender, DataGridItemEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) {
            DataRowView drv = (DataRowView)e.Item.DataItem;
            DropDownList DDL1 =(DropDownList ) e.Item.FindControl("DDL1");
            for (int i = 0; i < DDL1.Items.Count;i++ ) {
                if (drv["ProductID"].ToString() == DDL1.Items[i].Value) {
                    DDL1.SelectedIndex = i;
                    break;
                }
            }
            DDL1.Attributes.Add("onchange","javascript:rechange(this,'"+this.DG2.ClientID+"');");
        }

    }

    • 评论
    • 分享微博
    • 分享邮件
    邮件订阅

    如果您非常迫切的想了解IT领域最新产品与技术信息,那么订阅至顶网技术邮件将是您的最佳途径之一。

    重磅专题
    往期文章
    最新文章