javascript - 未捕获的类型错误 : $(. ..).data(...).saveAsPDF 不是函数。剑道网格

Question

我正在尝试将数据导出到剑道网格中的 pdf。

网格:

    $("#tax_lists").kendoGrid({
        toolbar: ["excel","pdf"],
        excel: {
            allPages: true,
            fileName: "Products.xlsx"
        },
        pdf: {
            allPages: true,
            avoidLinks: true,
            paperSize: "A4",
            margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" },
            landscape: true,
            repeatHeaders: true,
            template: $("#page-template").html(),
            scale: 0.8
        },
        dataSource: sData,
        sortable: true,
        resizable: true,
          columns: [
          {hidden: true, field: "TaxStatementID",attributes:{"class":"tax_statement_id"}},
          {field: "Month", title: "Month"},
          {field: "AnnualSalary", title: "Annual Salary",attributes:{"class":"AnnualSalary"},footerTemplate: "<div><b>Sum</b> #= compute('.AnnualSalary')#</div>"},
          {field: "MonthlySalary", title: "Monthly Salary",attributes:{"class":"MonthlySalary"},footerTemplate: "<div><b>Sum</b> #= compute('.MonthlySalary')#</div>"},
          {field: "SlabNo", title: "Tax Slab"},
          {field: "MonthlyTax", title: "Monthly Tax", attributes:{"class":"monthly-tax"},footerTemplate: "<div><b>Sum</b> #= compute('.monthly-tax')#</div>"},
          {field: "TaxAdjustment", title: "Tax Adjustment",template:"#=TaxAdjustment#"},
          {field: "TaxAreas", title: "Tax Arrears"},
          {title: "Tax Payable",template:"#=adjustment_type==1?parseFloat(MonthlyTax)+parseFloat(TaxAdjustment)+parseFloat(TaxAreas):(parseFloat(MonthlyTax)+parseFloat(TaxAreas))-parseFloat(TaxAdjustment)#", attributes:{"class":"TaxPayable"},footerTemplate: "<div><b>Sum</b> #= compute('.TaxPayable')#</div>"},
          {hidden: true, field: "employee_id",attributes:{"class":"employee_id"}},
          {hidden: true, field: "employment_id",attributes:{"class":"employment_id"}},
          ],
      });

首先，我尝试使用 kendo toolbar pdf，但它不起作用，它刷新页面而不是导出为 pdf。然后我将按钮放在网格的顶部。

<button id="grid-pdf">Export to PDF</button>

并定义一个函数

功能:

$("#grid-pdf").kendoButton(
    {
        click:function(){
        var grid = $("#tax_lists").data("kendoGrid").saveAsPDF();
        }
    });

Compute function for calculating sum manually

    function compute(){
    $(cls).each(function() {
        if (cls==".AnnualSalary") {
            AnnualSalary += parseInt($(this).text());
        }else if(cls==".MonthlySalary"){
            MonthlySalary += parseInt($(this).text());
        }else if(cls==".monthly-tax"){
            monthlyTax += parseInt($(this).text());
        }else{
            TaxPayable +=parseInt($(this).text());
        }
    });
    if (cls==".AnnualSalary") {
        return AnnualSalary;
    }else if(cls==".MonthlySalary"){
        return MonthlySalary;
    }else if(cls=".monthly-tax"){
        return monthlyTax;
    }else{
        return TaxPayable;
    }
}

再次失败它说:

Uncaught TypeError: $(...).data(...).saveAsPDF is not a function*

我使用的资源:

<script type="text/javascript" src="<?=base_url('assets/plugins/kendo/jszip.min.js')?>"></script>
<script type="text/javascript" src="<?=base_url('assets/plugins/kendo/kendo.all.min.js')?>"></script>
<script type="text/javascript" src="<?=base_url('assets/plugins/kendo/pako_deflate.min.js')?>"></script>

知道这里出了什么问题......

Answer 1

如果您提供一个可以显示该问题的有效 jsfiddle 会更好。

无论如何，我使用您的代码和一些任意数据创建了一个 jsfiddle。你可以找到它here .一旦您提供了更多详细信息，我就可以根据需要调整代码。

这是您修改的代码:

 $("#tax_lists").kendoGrid({
     toolbar: ["excel", "pdf"],
  excel: {
    allPages: true,
    fileName: "Products.xlsx"
  },
  pdf: {
    allPages: true,
    avoidLinks: true,
    paperSize: "A4",
    margin: {
      top: "2cm",
      left: "1cm",
      right: "1cm",
      bottom: "1cm"
    },
    landscape: true,
    repeatHeaders: true,
    template: $("#page-template").html(),
    scale: 0.8
  },
  dataSource: {
    data: [{
      "Month": 1,
      "AnnualSalary": 9.2,
      "MonthlySalary": 1994,
      "MonthlyTax": "The Shawshank Redemption"
    }]
  },
  sortable: true,
  resizable: true,
  columns: [{
    hidden: true,
    field: "TaxStatementID",
    attributes: {
      "class": "tax_statement_id"
    }
  }, {
    field: "Month",
    title: "Month"
  }, {
    field: "AnnualSalary",
    title: "Annual Salary",
    attributes: {
      "class": "AnnualSalary"
    }
  }, {
    field: "MonthlySalary",
    title: "Monthly Salary",
    attributes: {
      "class": "MonthlySalary"
    }
  }, {
    field: "SlabNo",
    title: "Tax Slab"
  }, {
    field: "MonthlyTax",
    title: "Monthly Tax",
    attributes: {
      "class": "monthly-tax"
    }
  }],
});