如何计算所有值 kendo 网格列并希望使用一个文本框显示在外面？

Question

其实我的需求是要计算所有的金额值，并且要显示在网格之外。

例如，我有一个名为 amount 的列，请假设 amount 网格列还有 10 个值，我想计算这 10 个值的总和，并希望使用一个文本框在 kendo 网格之外显示.

请任何人帮助我实现这一目标。

请看这个例子。我想在这个例子中做。 http://dojo.telerik.com/UmIKE

Answer 1

请尝试使用以下代码片段。

<div id="grid"></div>
<input type="text" id="txtAllRowSum" />
<input type="text" id="txtCurrentPageSum" />
<script>
    $(document).ready(function () {
        var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
                    dataSource = new kendo.data.DataSource({
                        transport: {
                            read: {
                                url: crudServiceBaseUrl + "/Products",
                                dataType: "jsonp"
                            },
                            update: {
                                url: crudServiceBaseUrl + "/Products/Update",
                                dataType: "jsonp"
                            },
                            destroy: {
                                url: crudServiceBaseUrl + "/Products/Destroy",
                                dataType: "jsonp"
                            },
                            create: {
                                url: crudServiceBaseUrl + "/Products/Create",
                                dataType: "jsonp"
                            },
                            parameterMap: function (options, operation) {
                                if (operation !== "read" && options.models) {
                                    return { models: kendo.stringify(options.models) };
                                }
                            }
                        },
                        batch: true,
                        pageSize: 20,
                        schema: {
                            model: {
                                id: "ProductID",
                                fields: {
                                    ProductID: { editable: false, nullable: true },
                                    ProductName: { validation: { required: true } },
                                    UnitPrice: { type: "number", validation: { required: true, min: 1 } },
                                    Discontinued: { type: "boolean" },
                                    UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                                }
                            }
                        }
                    });

        $("#grid").kendoGrid({
            dataSource: dataSource,
            pageable: true,
            height: 550,
            dataBound: onDataBound,
            toolbar: ["create"],
            columns: [
                "ProductName",
                { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
                { field: "UnitsInStock", title: "Units In Stock", width: "120px" },
                { field: "Discontinued", width: "120px" },
                { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
            editable: "inline"
        });
    });
    function onDataBound(arg) {
        //Total sum of UnitsInStock field
        var datalength = arg.sender.dataSource.data().length;
        var totalsum = 0;
        if (datalength > 0) {
            for (var i = 0; i < datalength; i++) {
                totalsum += arg.sender.dataSource.data()[0].UnitsInStock;
            }
        }
        $("#txtAllRowSum").val(totalsum);

        //UnitsInStock field sum of current page
        var curretpagesum = 0;
        var grid = $("#grid").data("kendoGrid");
        $(grid.tbody).find('tr').each(function (index) {
            curretpagesum += parseInt($(this).find('td:eq(2)').html());
        });
        $("#txtCurrentPageSum").val(curretpagesum);
    }


</script>

如有任何疑问，请告诉我。