c# - 如何在 GridView 的第三个中显示两列的产品？

Question

我有一个 GridView，例如具有.. column1 和 column2.. 当用户在 column1 和 column2 中输入数字时，我想在第三列 3 的文本框中显示输入数字的乘积。

Column1 | Column2  | Column3
200     |  100     | 20000

如果我不使用GridView，这可能很简单。我不确定如何在 GridView 中执行此操作，因为可以有无限的行。我不确定我是否可以将 ClientIDMode 设置为静态。

如果不是我可以使用的 GridView

function fill() {
        var txt1 = document.getElementById("TextBox1").value-0;
        var txt2 = document.getElementById("TextBox2").value-0;
        document.getElementById("TextBox3").value = txt1 * txt2;
    }

注意：我不想在回发时显示计算值。我想在 textbox 的 onchange 事件中显示它。如果需要，我准备限制可以添加到任何特定数字（例如 5）的行数。

更新

<asp:gridview ID="Gridview1" runat="server" ShowFooter="True" 
        AutoGenerateColumns="False"  ShowHeaderWhenEmpty="true" EmptyDataText="" CssClass="tabledata" 
                                   Width="100%" onrowdatabound="Gridview1_RowDataBound">
        <Columns>
        <asp:BoundField DataField="RowNumber" HeaderText="Row Number" />

       <%-- =================================================--%>
       <asp:TemplateField HeaderText="Charge Cost Center">
                <ItemTemplate>
                    <asp:DropDownList ID="drpchargecostcenter" runat="server" > <%--SelectedValue='<%# Eval("chargecostcenter") %>'--%>
                        <asp:ListItem Value="0">Select</asp:ListItem>
                        <asp:ListItem Value="1">A1ALTINV</asp:ListItem>
                        <asp:ListItem Value="2">A1BAXAD2C</asp:ListItem>
                    </asp:DropDownList>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Charge Location ">
                <ItemTemplate>
                    <asp:DropDownList ID="drpchargelocation" runat="server">
                        <asp:ListItem Value="0">Select</asp:ListItem>
                        <asp:ListItem Value="1">Thane</asp:ListItem>
                    </asp:DropDownList>
                </ItemTemplate>
            </asp:TemplateField>
         <%-- =================================================--%>


        <asp:TemplateField HeaderText="Expense Date">
            <ItemTemplate>
                <asp:TextBox ID="txtexpdate" runat="server" Text='<%# Eval("expdate") %>' 
                    onkeydown="return false;" Width="50px"></asp:TextBox>
                <asp:CalendarExtender ID="CalendarExtender1" runat="server" 
                    TargetControlID="txtexpdate">
                </asp:CalendarExtender>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="From Place">
            <ItemTemplate>
                <asp:TextBox ID="txtfrmplace" runat="server" Text='<%# Eval("fromplace") %>' 
                    Width="50px"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>

        <asp:TemplateField HeaderText="To Place">
            <FooterStyle HorizontalAlign="Right" />
            <ItemTemplate>
                <asp:TextBox ID="txttoplace" runat="server" Text='<%# Eval("toplace") %>' 
                    Width="50px"></asp:TextBox>
            </ItemTemplate>
            <FooterTemplate>
            <%-- <asp:Button ID="ButtonAdd" runat="server" Text="Add New Row" 
                    onclick="ButtonAdd_Click" />--%>
            </FooterTemplate>
        </asp:TemplateField>



        <asp:TemplateField HeaderText="Mode of Travel">
            <FooterStyle HorizontalAlign="Right" />
            <ItemTemplate>
                <asp:DropDownList ID="drpmodeoftravel" Width="100px" runat="server"  >
                </asp:DropDownList>
               <%-- <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
                    ConnectionString="<%$ ConnectionStrings:constr %>" 
                    SelectCommand="Proc_ReturnTravelMode" SelectCommandType="StoredProcedure">
                </asp:SqlDataSource>--%>
            </ItemTemplate>
            <FooterTemplate>
            <%-- <asp:Button ID="ButtonAdd" runat="server" Text="Add New Row" 
                    onclick="ButtonAdd_Click" />--%>
            </FooterTemplate>
        </asp:TemplateField>


            <asp:TemplateField HeaderText="KMS Travelled">
                <ItemTemplate>
                    <asp:TextBox ID="txtkms" runat="server" onkeypress="return isNumberKey(event)"
                        Text='<%# Eval("kmstravelled") %>' Width="50px"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Rate/KM">
                <ItemTemplate>
                    <asp:TextBox ID="txtrateperkm" runat="server" 
                        onkeypress="return isNumberKey(event)" Text='<%# Eval("rateperkm") %>' 
                        Width="40px"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Expense Head">
                <ItemTemplate>
                    <asp:DropDownList ID="drpexpensehead" runat="server" Width="80px">
                    <asp:ListItem Value="0">Select</asp:ListItem>
                        <asp:ListItem Value="1">Utkarsh Parajapati</asp:ListItem>
                    </asp:DropDownList>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Expense Description">
                <ItemTemplate>
                    <asp:TextBox ID="txtexpdesc" runat="server" 
                        Text='<%# Eval("expensedescription") %>' Width="60px"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Payment Mode">
                <ItemTemplate>
                    <asp:DropDownList ID="drppaymentmode" runat="server" Width="120px">                            
                        <asp:ListItem Value="0">Select</asp:ListItem>
                        <asp:ListItem Value="1">Reimbersement</asp:ListItem>
                    </asp:DropDownList>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Bill Amt">
                <ItemTemplate>
                    <asp:TextBox ID="billamt" runat="server" onkeypress="return isNumberKey(event)" 
                        Text='<%# Eval("billamt") %>' Width="60px"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
          <asp:TemplateField HeaderText="D">
            <ItemTemplate>
                <asp:LinkButton runat="server" ID="lnkDel" OnCommand="DeleteRowHandler" Text="D"></asp:LinkButton>
            </ItemTemplate>
        </asp:TemplateField>
        </Columns>
    </asp:gridview>

score 3 · Accepted Answer

我创建了一个与您的问题相似的示例。请检查并根据您的要求进行修改。

ASPX：

 <asp:GridView ID="Gridview1" runat="server" ShowFooter="True" AutoGenerateColumns="False"
        ShowHeaderWhenEmpty="true" EmptyDataText="" CssClass="tabledata" Width="100%">
        <Columns>
            <asp:BoundField DataField="ID" HeaderText="Row Number" />
            <asp:TemplateField HeaderText="KMS Travelled">
                <ItemTemplate>
                    <asp:TextBox ID="txtkms" runat="server" onchange="return Multiply(this,this.value);"
                        Width="50px"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Rate/KM">
                <ItemTemplate>
                    <asp:TextBox ID="txtrateperkm" runat="server" onchange="return Multiply(this,this.value);"
                         Width="40px"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Bill Amt">
                <ItemTemplate>
                    <asp:TextBox ID="billamt" runat="server" 
                        Width="60px"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

Javascript：

 <script type="text/javascript">
  //This method is called when quantity/cost textbox looses focus with some change in content
  function Multiply(element, val) {

    //billamt =  txtkms * txtrateperkm
      var otherElementName = '';
      var finalElementName = '';
      //id of calling element i.e, quantity/cost textbox
      var elementName = element.id;
      var index = elementName.split('_');
      var finalElement = document.getElementById(index[0] + "_billamt_" + index[2]);
      finalElement.value = '';
    //get second element, i.e., get quantity if change is in cost and vice-versa
      if (endsWith(elementName, "txtkms_" + index[2])) {
          otherElementName = elementName.replace("txtkms_" + index[2], "txtrateperkm_" + index[2]);
      }
      else if (endsWith(elementName, "txtrateperkm_" + index[2])) {
          otherElementName = elementName.replace("txtrateperkm" + index[2], "txtkms_" + index[2]);
      }
      var otherElement = document.getElementById(otherElementName);
      //get textbox where final value is to be displayed
      finalElementName = index[0] + "_billamt_" + index[2];        
      var finalElement = document.getElementById(finalElementName);
      finalElement.value = otherElement.value * val;
  }

  //checks if given string ends with given suffix
  function endsWith(str, suffix) {
    return str.indexOf(suffix, str.length - suffix.length) !== -1;
}

</script>

服务器端：

 protected void Page_Load(object sender, EventArgs e)
{
    Employee emp = null;
    List<Employee> listEmployee = new List<Employee>();
    for (int i = 0; i < 1; i++)
    {
        emp = new Employee();
        emp.ID = i;
        //emp.Age = "Age :" + i.ToString();
        //emp.Location = "Location :" + i.ToString();
        listEmployee.Add(emp);
    }
    Gridview1.DataSource = listEmployee;
    Gridview1.DataBind();

}
class Employee
{
 public int ID { get; set; }
}

如果您需要进一步的帮助，请告诉我。

score 1 · Accepted Answer

尝试这个

OnRowDataBound

protected void DemoGrid_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        var txtkms = e.Row.FindControl("txtkms") as TextBox;
        var txtrateperkm = e.Row.FindControl("txtrateperkm") as TextBox;
        var billamt = e.Row.FindControl("billamt") as TextBox;
        var jsFunction = String.Format("CalculateBillAmount('{0}','{1}','{2}');", txtkms.ClientID, txtrateperkm.ClientID, billamt.ClientID);
        txtkms.Attributes.Add("onkeyup", jsFunction);
        txtkms.Attributes.Add("onblur", jsFunction);
        txtrateperkm.Attributes.Add("onkeyup", jsFunction);
        txtrateperkm.Attributes.Add("onblur", jsFunction);
    }
}

JavaScript

function CalculateBillAmount(kmID, rateID, amtID) {
    var objKm = document.getElementById(kmID), objRate = document.getElementById(rateID), objAmt = document.getElementById(amtID);
    objAmt.value = +objKm.value * +objRate.value;
}

更新：这是页面加载时的标记和 GridView 绑定。

GridView 标记。

<asp:GridView ID="DemoGrid" runat="server" 
        AutoGenerateColumns="false" 
        OnRowDataBound="DemoGrid_RowDataBound">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate><%# Container.DataItem%></ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:TextBox ID="txtkms" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:TextBox ID="txtrateperkm" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:TextBox ID="billamt" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

页面加载

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        var data = new List<int> { 1, 2, 3, 4, 5 };
        DemoGrid.DataSource = data;
        DemoGrid.DataBind();
    }
}

score 0 · Accepted Answer

尝试这个，

<asp:textbox id="column3" runat="server" text='<%# string.Format( (int)Eval("column1").tostring()*(int)Eval("column2").tostring())' />"

c# - 如何在 GridView 的第三个中显示两列的产品？

3 回答 3

Related

Reference