使用javascript的多列动态gridview的列和 [英] Column sum of multiple columns of dynamic gridview using javascript

问题描述

我有一个Dynamic asp Gridview，所有列都作为模板feild TextBox。 Gridview的列也是动态的，列数可能会随时变化。



请在下面找到代码

  public   void  FillPoDetails（）
 {
 
 DataTable dt =  new  DataTable（）; 
 
 dt = pmdata.createdatatable（ int  .Parse（Session [ < span class =code-string> OurStyleid]。ToString（））， int  .Parse（Session [  PoPackid]。ToString（）））; 
 
 
 
 GenerateTable（dt.Columns.Count，dt.Rows.Count，dt）; 
 
  foreach （DataColumn col  in  dt.Columns）
 { 
  //  声明绑定字段并为绑定字段分配内存。 
 TemplateField bfield =  new  TemplateField（）; 
 
  //  初始化DataField值。 
 bfield.HeaderTemplate =  new  ArtWebApp.Controls.GridViewTemplate（ListItemType.Header，col.ColumnName）; 
 
  //  初始化HeaderText字段值。 
 bfield。 ItemTemplate =  new  ArtWebApp.Controls.GridViewTemplate（ListItemType.Item，col.ColumnName）; 
 
  //  将新创建的绑定字段添加到GridView。 
 GrdDynamic.Columns.Add（bfield）; 
} 
 
 
 
 GrdDynamic.DataSource = dt; 
 GrdDynamic.DataBind（）; 
 
} 
  public  GridViewTemplate（ListItemType类型，字符串 colname） 
 {
  //  存储模板类型。 
 _templateType =类型; 
 
  //  存储列名。 
 _columnName = colname ; 
} 
 
  void  ITemplate.InstantiateIn（System.Web.UI.Control容器）
 {
  switch （_ templateType）
 {
  case  ListItemType.Header：
  //  创建一个新的标签控件并将其添加到容器中。 
 Label lbl = < span class =code-keyword> new  Label（）;  //  分配新的标签对象。 
 lbl.Text = _columnName; 
 lbl.CssClass =   Headerclass; 
  //  在标签。 
容器中指定列的名称。 Controls.Add被（LBL）;  //  将新创建的标签控件添加到容器中。 
 断裂; 
 
  case  ListItemType.Item：
  //  创建一个新的文本框控件并将其添加到容器中。 
 TextBox tb1 =  new  TextBox（）;  //  分配新的文本框对象。 
 tb1.DataBinding + =  new  EventHandler（tb1_DataBinding）;  //  附加数据绑定事件。 
 tb1.Columns =  6 ;  //  创建一个大小为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 ==  颜色）
 {
 tb1.CssClass =  颜色; 
} 
  else  
 {
 tb1.CssClass =   txtCalQty; 
 tb1.Attributes.Add（  onkeypress，  return isNumberKey（event，this））; 
 tb1.Attributes.Add（  onkeyup，  sumofQty（this））; 
} 
 
 container.Controls.Add（tb1）;  //  将新创建的文本框添加到容器中。 
 
 断裂; 
 
 
} 
} 
 

并且为了获得行总数我已经在keydown事件上添加了一个Javascript函数，它的工作很清楚

  / /  计算按键数量的总和 
  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行中，因为



我尝试过：



我无法循环播放列

  //  计算按键数量的总和 
  function  sumofQty （objText）{
 
 
  var  cell = objText.parentNode; 
 
  var  row = cell.parentNode; 
 
  var  sum =  0 ; 
 
 
} 

解决方案

您可以执行以下操作以获取值的总和具有相同css类的元素 -

  var  sum =  0 ; 

（' 。YourActualClass' ）.each（ function （）{
sum + = parseFloat （

（ this ）。innerHTML（））;
}）;

然后将它分配给你想要的元素。



希望，它有帮助:)

如果我在这里遗漏任何东西，请告诉我

I have a Dynamic asp Gridview with all columns as template feild TextBox. The columns of the Gridview are also dynamic and column count may vary everytime.

Please find code below

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;


               }
           }

And inorder to get the row total I had added a Javascript function on keydown event and its working clearly

//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();         

       }

can anyone please help me in finding out the sum of each columns(all same cssclass).and display it in the Sizetotal row because

What I have tried:

I am not able to loop through columns

//calculate the sum of qty on keypress
       function sumofQty(objText) {
       
        
           var cell = objText.parentNode;
           
           var row = cell.parentNode;

           var sum = 0;
                

       }

解决方案

You can do something like following to get the sum of values from the elements with same css class-

var sum = 0;

('.YourActualClass').each(function(){ sum += parseFloat(

(this).innerHTML()); });

Then assign it to the element you want.

Hope, it helps :)
Please let me know if I am missing anything here.

这篇关于使用javascript的多列动态gridview的列和的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！