使用javascript控制datagrid中的对象

80酷酷网    80kuku.com

  datagrid|javascript|对象|控制

问: 我有一个类,返回一个dataset数据集,如何绑定在javascript中。答:怎么叫绑定到javascript? 比如要在一段js中调用它? 问 :我一个页面上有2个datagrid的,一个是从cs绑定的值,另外一个是空的,没有值。用户在datagrid上做操作,如修改值,然后把修改的值做运算后,在datagrid2显示运算的结果,然后把结果回传出来,cs再做进一步处理。 问:你写个事例,我模仿一下。 答:好的


以下是ASPX页面,上面放了三个datasource,基本不用看,看javascript部分好了
<!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>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> 
       
        <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+"');");
        }

    }


 



分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: