如何将两个 GridView 列乘以一

Question

我希望能够在数量文本框中输入一个值，然后：

• 将该值乘以其“单位平方英尺”并将结果存储到“小计”中
• 汇总每个小计并将结果存储到“总计”中

这是我目前所拥有的：

           <asp:GridView runat="server" ID="gridViewBuildOfficeSpace" AllowPaging="false" 
                AllowSorting="false" AutoGenerateDeleteButton="false" 
                AutoGenerateEditButton="false" AutoGenerateSelectButton="false" 
                AutoGenerateColumns="false" ShowFooter="true" 
               onrowdatabound="gridViewBuildOfficeSpace_RowDataBound">
                <Columns>
                    <asp:BoundField DataField="Description" HeaderText="Description" />
                    <asp:BoundField DataField="Size" HeaderText="Size" />
                    <asp:BoundField DataField="Dimensions" HeaderText="Dimensions" />
                    <asp:TemplateField HeaderText="Unit Square Foot">
                        <ItemTemplate>
                            <asp:Label runat="server" ID="unitSquareFootLabel" Text='<%# Eval("UnitSquareFoot") %>'  />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Quantity" >
                        <ItemTemplate>
                            <asp:TextBox AutoPostBack="true" ID="gridviewQuantityItem" runat="server"/>
                        </ItemTemplate>
                        <FooterTemplate>
                            <asp:Label ID="Label12" Text="Total Size: " runat="server" />
                        </FooterTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="SubTotal">
                        <ItemTemplate>
                            <asp:Label ID="gridViewItemSubTotal"  runat="server" />
                        </ItemTemplate>
                        <FooterTemplate>
                            <asp:Label ID="totalSizeDisplayLabel" runat="server" />
                        </FooterTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>

代码背后：

        protected void gridViewBuildOfficeSpace_RowDataBound(object sender, GridViewRowEventArgs e)
    {

        for (int i = 0; i < gridViewBuildOfficeSpace.Rows.Count; i++)
        {
            gridViewBuildOfficeSpace.Rows[i].Cells[5].Text = Convert.ToString(Convert.ToDouble(gridViewBuildOfficeSpace.Rows[i].Cells[3].Text)*Convert.ToDouble(gridViewBuildOfficeSpace.Rows[i].Cells[4].Text)); 
        }
    }

我尝试在 TextBox 中使用 OnTextChanged，然后尝试找到相关的控件以将它们转换为整数并将它们相乘并将值显示到标签中，但是我得到关于 unitSquareFootLabel 的空引用。

但是使用上面的代码，我得到输入字符串的格式不正确。

我该怎么做？

Answer 1

您有 2 个选项。

1. 使用 jQuery 或 javascript 在客户端进行计算
2. 用c#在后端做（涉及刷新页面）

我推荐第一个选项。这是一个例子： 所以gridview需要稍微修改一下。我添加了一些可以很容易地被 JS 和 jQuery 引用的 css 类名：

<asp:GridView runat="server" ID="gridViewBuildOfficeSpace" 
    AutoGenerateColumns="False" ShowFooter="True"
    DataSourceID="SqlDataSource1">
    <Columns>
        <asp:BoundField DataField="DESCRIPTION" HeaderText="Description" />
        <asp:BoundField DataField="SIZE" HeaderText="Size" />
        <asp:BoundField DataField="DIMENSIONS" HeaderText="Dimensions" />
        <asp:TemplateField HeaderText="Unit Square Foot">
            <ItemTemplate>
                <asp:Label runat="server" ID="unitSquareFootLabel" Text='<%# Eval("SQFOOT") %>'  />
            </ItemTemplate>
            <ItemStyle CssClass="unitSquareFoot" />
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Quantity" >
            <ItemTemplate>
                <asp:TextBox ID="gridviewQuantityItem" runat="server" onblur="calculate()"/>
            </ItemTemplate>
            <FooterTemplate>
                <asp:Label ID="Label12" Text="Total Size: " runat="server" />
            </FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="SubTotal">
            <ItemTemplate>
                <asp:Label ID="gridViewItemSubTotal"  runat="server" />
            </ItemTemplate>
            <ItemStyle CssClass="SubTotal" />
            <FooterTemplate>
                <asp:Label ID="totalSizeDisplayLabel" runat="server" />
            </FooterTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

然后在页面底部，在结束body标签之前，添加这个js：

<script>
    function calculate() {
        //get the gridview
        gv = $('#gridViewBuildOfficeSpace');
        //Find the number of rows in the grid
        var rowCount = gv.find('tr').length;

        //Iterate through each row looking for the input boxes (This section is for the ROW totals)
        for (var i = 0; i < rowCount; i++) {
        //Iterate through each text box
            var row = gv.find("tr:eq(" + i + ")");
            //Find the input text field
            row.find(":input[type=text]").each(function () {
                //Get the quantity value
                quantity = $(this).val();
                //Get the sqfoot
                sqfoot = row.find("[class$='unitSquareFoot']").text();
                //Add the text to the subtotal field
                row.find("[class$='SubTotal']").text(quantity * sqfoot);
            });
        }
    }
</script>

这假设您添加了对 jQuery 的引用以使其工作...