GridPanel CheckboxSelectionModel - 选择的总和

时间:2017-12-13 18:27:58

标签: javascript c# extjs

如何汇总所有选定行的特定列? (通过javascript)

    <script>
        var sumCheck= function () {
            var resultSum;

          /* todo loop selectedrows
             resultSum += column(nvlparmvfin); */;

            alert(resultSum);
        };
    </script>

 <ext:GridPanel runat="server" ID="grid1" Height="250px" Frame="true" StoreID="dsGrid1">
                        <ColumnModel runat="server">
                            <Columns>
                                <ext:NumberColumn runat="server" DataIndex="nvlparmvfin" Format=",0.00" Align="Right"/>                             
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:CheckboxSelectionModel runat="server" Mode="Multi">
                                <Listeners>
                                    <SelectionChange Fn="sumCheck()" />
                                </Listeners> 
                            </ext:CheckboxSelectionModel>
                        </SelectionModel>                       
</ext:GridPanel>

如果你能帮助我,非常感谢你;

3 个答案:

答案 0 :(得分:1)

你必须经历所选记录的循环,然后存储取一个特定列的值并将其放在计数上。

您的代码将类似于此

var grd = this.up().up();
var gridSel = grd.getSelection();
var count = 0;
    for(var i=0; i<gridSel.length;i++){
        var num = gridSel[i].data.indexSum;
            num = parseInt(num);
            count += num;
      }
alert(count);

我为你创造了一个小提琴。请检查。

Fiddle

答案 1 :(得分:0)

使用 grid.getSelectionModel() ,您将获得所有选定的record

FIDDLE 中,我使用 ExtJS 4.2 中的grid创建了一个演示。我希望这能帮助您解决问题或达到您的要求。

Ext.create('Ext.grid.Panel', {
    title: 'Sum of Selected',
    store: {
        fields: ['product', 'price'],
        data: [{
            product: 'A',
            price: 20
        }, {
            product: 'B',
            price: 52
        }, {
            product: 'C',
            price: 36
        }, {
            product: 'D',
            price: 56
        }]
    },
    columns: [{
        text: 'Product',
        dataIndex: 'product',
        flex: 1
    }, {
        text: 'Price ($)',
        dataIndex: 'price',
        flex: 1
    }],
    renderTo: Ext.getBody(),
    selModel: {
        checkOnly: false,
        mode: 'SIMPLE'
    },
    selType: 'checkboxmodel',
    tbar: ['->', {
        xtype: 'textfield',
        fieldLabel: 'Sum of Selected',
        readOnly: true,
        value: 0
    }],
    buttons: [{
        text: 'Sum of Selected',
        handler: function () {
            var selectionModel = this.up('grid').getSelectionModel();
            if (selectionModel.getCount()) {
                var total = 0;
                Ext.Array.forEach(selectionModel.getSelection(), function (rec) {
                    total += rec.get('price');
                });
                Ext.Msg.alert('Success', 'Total sum of selected product is <br> <b>' + Ext.util.Format.usMoney(total) + '</b>');
            } else {
                Ext.Msg.alert('Info', 'Sorry,No product selected');
            }
        }
    }],

    listeners: {
        selectionchange: function () {
            var grid = this,
                selected = grid.getSelectionModel().getSelection(),
                total = 0;
            Ext.Array.forEach(selected, function (rec) {
                total += rec.get('price');
            });
            grid.down('textfield').setValue(total);
        }
    }
});

答案 2 :(得分:0)

完美,我做了一些调整,效果很好。完整的示例代码如下。

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.Store2.DataSource = new object[]
            {
                new object[] { 'A', 20 },
                new object[] { 'B', 52 },
                new object[] { 'C', 36 }
            };
            this.Store2.DataBind();

        }
    }
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:GridPanel runat="server">
            <Store>
                <ext:Store ID="Store2" runat="server">
                    <Model>
                        <ext:Model runat="server" AutoDataBind="true">
                            <Fields>
                                <ext:ModelField Name="product" />
                                <ext:ModelField Name="price" />
                            </Fields>
                        </ext:Model>
                    </Model>

                    <Reader>
                        <ext:ArrayReader />
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Header="Product" DataIndex="product" Flex="1" />
                    <ext:Column runat="server" Header="Price ($)" DataIndex="price" Flex="1" />
                </Columns>
            </ColumnModel>
                        <SelectionModel>
                <ext:CheckboxSelectionModel runat="server" Mode="Multi">
                    <Listeners>
                        <SelectionChange Handler="var total = 0;
                                                  var grid = this;
                                                  var selected = grid.getSelection();;
                                                  Ext.Array.forEach(selected, function (rec) {
                                                      total += rec.get('price');
                                                   });
                            alert(total);
                            " />
                    </Listeners>
                </ext:CheckboxSelectionModel>
            </SelectionModel>


        </ext:GridPanel>


    </form>
</body>
</html>

非常感谢你的回复。