使用JavaScript的GridView计算

GridView calculations with JavaScript

本文关键字：计算 GridView JavaScript 使用更新时间：2023-09-26

Hi，因为网格视图将在浏览器中呈现为表格

我如何在asp.net网格视图上应用以下JavaScript

HTML表上的演示：jsfiddle

Javascript代码

请注意，这里首先计算总金额，然后将每行总金额除以总金额

<script>
    $(document).ready(function () {
        $(".txtMult input").keyup(multInputs);
        function multInputs() {
            var $mult = 0;
            // calculate Grand total
            $("tr.txtMult").each(function () {
                // get the values from this row:
                var $val1 = $('.val1', this).val();
                var $val2 = $('.val2', this).val();
                var $total = ($val1) * ($val2);
                $mult += $total;
            });
            // for each row:
            $("tr.txtMult").each(function () {
                // get the values from this row:
                var $val1 = $('.val1', this).val();
                var $val2 = $('.val2', this).val();
                var $total = ($val1) * ($val2);
                var $Percentage = (($total / $mult)).toFixed(2);
                $('.percentage', this).text($Percentage);
                $('.multTotal', this).text($total);
            });
            $("#grandTotal").text(mult);
        }
    });
</script>

网格视图代码

<asp:GridView ID="testgrid" runat="server" AutoGenerateColumns="False">
    <Columns>
        <asp:TemplateField HeaderText="Quantity">
            <ItemTemplate>
                <asp:TextBox ID="txtCalcQuantity" placeholder="Enter Quantity" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Unit Price">
            <ItemTemplate>
                <asp:TextBox ID="txtCalcUnitprice" placeholder="Enter Unit Price" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Total">
            <ItemTemplate>
                <asp:Label ID="lblTotal" runat="server" Text="0"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Percentage">
            <ItemTemplate>
                <asp:Label ID="lblPercentage" runat="server"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

非常感谢您的帮助

Grid View:
<asp:GridView ID="testgrid" runat="server" AutoGenerateColumns="False" OnRowDataBound="testgrid_RowDataBound">
    <Columns>
        <asp:TemplateField HeaderText="Quantity">
            <ItemTemplate>
                <asp:TextBox ID="txtCalcQuantity" CssClass="val1"  placeholder="Enter Quantity" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Unit Price">
            <ItemTemplate>
                <asp:TextBox ID="txtCalcUnitprice" CssClass="val2"  placeholder="Enter Unit Price" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Total">
            <ItemTemplate>
                <asp:Label ID="lblTotal" CssClass="multTotal" runat="server" Text="0"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Percentage">
            <ItemTemplate>
                <asp:Label ID="lblPercentage" CssClass="percentage"  runat="server"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
        <asp:Label ID="grandTotal" runat="server"></asp:Label>
GV backend:
 protected void testgrid_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                    e.Row.CssClass = "txtMult";
            }
        }
Javascript :
<script>
    $(document).ready(function () {
        $(".txtMult input").keyup(multInputs);
        function multInputs() {
            var $mult = 0;
            // calculate Grand total
            $("tr.txtMult").each(function () {
                // get the values from this row:
                var $val1 = $('.val1', this).val();
                var $val2 = $('.val2', this).val();
                var $total = ($val1) * ($val2);
                $mult += $total;
            });
            // for each row:
            $("tr.txtMult").each(function () {
                // get the values from this row:
                var $val1 = $('.val1', this).val();
                var $val2 = $('.val2', this).val();
                var $total = ($val1) * ($val2);
                var $Percentage = (($total / $mult)).toFixed(2);
                $('.percentage', this).text($Percentage);
                $('.multTotal', this).text($total);
            });
            $("#<%=grandTotal.ClientID %>").text($mult);
        }
    });