使用Javascript的动态gridview的多列的列总和

Posted 2023-02-22

【中文标题】使用Javascript的动态gridview的多列的列总和

【英文标题】：Column sum of multiple columns of dynamic gridview using Javascript

【发布时间】：2017-02-02 20:08:44

【问题描述】：

我有一个动态 asp Gridview，所有列都作为模板字段 TextBox。 Gridview 的列也是动态的，列数可能每次都不同。

请在下面找到代码

public void FillPoDetails()

    DataTable dt = new DataTable();           
    dt = pmdata.createdatatable(int.Parse(Session["OurStyleid"].ToString()), int.Parse(Session["PoPackid"].ToString()));
    GenerateTable(dt.Columns.Count, dt.Rows.Count,dt);
    foreach (DataColumn col in dt.Columns)
    
        //Declare the bound field and allocate memory for the bound field.
        TemplateField bfield = new TemplateField();

        //Initalize the DataField value.
        bfield.HeaderTemplate = new ArtWebApp.Controls.GridViewTemplate(ListItemType.Header, col.ColumnName);

        //Initialize the HeaderText field value.
        bfield.ItemTemplate = new ArtWebApp.Controls.GridViewTemplate(ListItemType.Item, col.ColumnName);

        //Add the newly created bound field to the GridView.
        GrdDynamic.Columns.Add(bfield);
    
    GrdDynamic.DataSource = dt;    
    GrdDynamic.DataBind();  

public GridViewTemplate(ListItemType type, string colname)

    //Stores the template type.
    _templateType = type;

    //Stores the column name.
    _columnName = colname;


void ITemplate.InstantiateIn(System.Web.UI.Control container)

    switch (_templateType)
    
        case ListItemType.Header:
            //Creates a new label control and add it to the container.
            Label lbl = new Label();            
            //Allocates the new label object.
            lbl.Text = _columnName;
            lbl.CssClass = "Headerclass";
            //Assigns the name of the column in the lable.
            container.Controls.Add(lbl);        
            //Adds the newly created label control to the container.
            break;
        case ListItemType.Item:
            //Creates a new text box control and add it to the container.
            TextBox tb1 = new TextBox();                            
            //Allocates the new text box object.
            tb1.DataBinding += new EventHandler(tb1_DataBinding);    
            //Attaches the data binding event.
            tb1.Columns =6;
            //Creates a column with size 4.
            // tb1.Width = System.Web.UI.WebControls.Unit.Percentage(100);
            tb1.Width = 100;
            tb1.Wrap = true;
            tb1.ID = "txt_" + _columnName;
            if(_columnName== "ColorTotal")
            
                tb1.CssClass = "ColorTotal";
            
            else if (_columnName == "Color")
            
                tb1.CssClass = "Color";
            
            else
            
                tb1.CssClass = "txtCalQty";
                tb1.Attributes.Add("onkeypress", "return isNumberKey(event,this)");
                tb1.Attributes.Add("onkeyup", "sumofQty(this)");
                                   
            container.Controls.Add(tb1);                            
            //Adds the newly created textbox to the container.  
            break;
    

为了获得总行数，我在 keydown 事件上添加了一个 javascript 函数，它的工作原理很清晰

 //calculate the sum of qty on keypress
   function sumofQty(objText) 


       var cell = objText.parentNode;

       var row = cell.parentNode;

       var sum = 0;
       var textboxs = row.getElementsByClassName("txtCalQty");

       for (var i = 0; i < textboxs.length; i++)
       
           sum += parseFloat(textboxs[i].value);
       
       var textboxtotalqtys = row.getElementsByClassName("ColorTotal");
       textboxtotalqtys[0].value = sum.toString();         

   

结果如下

谁能帮我找出每列的总和（所有相同的 cssclass）。并将其显示在 Sizetotal 行中，因为我无法遍历列

【参考方案1】：

我会通过html5 data attributes 给每个文本框一个行 ID 和一个列 ID。并在 javascript (jQuery) 中通过列 id 过滤文本框。

示例：

..
var sum = 0;
$( "input[data-column-id='" + selectedColumnId + "']" ).each(function( index )
 
   sum += parseFloat($( this ).val() );
);
..

顺便说一下，使用 jQuery。太棒了。

【参考方案2】：

不确定您的要求，但这可能会对您有所帮助，将数据绑定到网格后，再次循环遍历列列表

GrdDynamic.DataSource = dt;    
GrdDynamic.DataBind();
int rowIndex=2;
GrdDynamic.FooterRow.Cells[1].Text = "Total";
GrdDynamic.FooterRow.Cells[1].HorizontalAlign = HorizontalAlign.Right;
foreach (DataColumn col in dt.Columns)

   decimal total = dt.AsEnumerable().Sum(row => row.Field<decimal>(col.Caption));
   GrdDynamic.FooterRow.Cells[rowIndex++].Text = total.ToString("N2");
 

【参考方案3】：

有一个非常简单的方法。

为每列添加页脚和标签，然后从数据库端进行计算最好是使用LINQ 和分组，为每列找到页脚标签控件并将值绑定到这些页脚的标签控件，这样您的 UI 将具有减少负载。

代码见这里：

.ASPX 网格中的页面：

  <asp:TemplateField HeaderText="Total">
   <ItemTemplate>
  <asp:Literal ID="ltrlTotal" Text='<%#Eval("Total") %>' runat="server"> </asp:Literal> // For Sub Total
</ItemTemplate>
 <FooterTemplate>
 <strong><asp:Literal ID="ltrlGrandTotal" runat="server"> // This is Grand Total
  </asp:Literal></strong>
 </FooterTemplate>                       
 </asp:TemplateField>

C# 代码：

 var searchResult = soService.SearchResult(companyId);
            var grandTotal = searchResult.Select(so => so.Total).Sum();
            searchResult.All(aa => aa.GrandTotal == grandTotal);

            gridSo.DataSource = searchResult;
            gridSo.DataBind();

            if (searchResult.Count > 0)
            
                Literal ltrlGrandTotal = gridSo.FooterRow.FindControl("ltrlGrandTotal") as Literal;
                if (ltrlGrandTotal != null)
                    ltrlGrandTotal.Text = string.Format("Grand Total : $ 0", grandTotal);
            

【讨论】：

嗨 Shyam 但是gridview是动态的，每次当列中的值被客户端更改时，计算都应该发生

你能提供那个jquery例子吗