2

angular ディレクティブを使用してKendo スプレッドシート ウィジェットを実装しようとしましたが、表示されません。

これが私のコードです：

HTML:

<div kendo-spreadsheet style="height:580px;" k-options="spreadsheetOptions"></div>

コントローラ：

$scope.spreadsheetOptions = {
            sheets: [{
                name: "Food Order",
                mergedCells: [
                    "A1:G1"
                ],
                rows: [{
                    height: 70,
                    cells: [{
                        value: "My Company", fontSize: 32, textAlign: "center"
                    }]
                }],
            }],
            excel: {
                fileName: "Order.xlsx"
            }
        };

コンソールにもエラーは表示されません。何か案は？

4

1 に答える 1

2

Kendo Angular Spreadsheet ディレクティブが機能します。以下の例を参照してください。以下の例を html ファイルに貼り付けることもできます。

    <!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/grid/angular">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-bootstrap.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.bootstrap.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.226/js/angular.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
    <div ng-controller="MyCtrl">
        <div  kendo-spreadsheet style="width:100%" k-options="spreadsheetOptions"></div>
    </div>
</div>

<script>
    angular.module("KendoDemos", [ "kendo.directives" ])
        .controller("MyCtrl", function($scope){
           $scope.spreadsheetOptions = {
            sheets: [{
                name: "Food Order",
                mergedCells: [
                    "A1:G1"
                ],
                rows: [{
                    height: 70,
                    cells: [{
                        value: "My Company", fontSize: 32, textAlign: "center"
                    }]
                }],
            }],
            excel: {
                fileName: "Order.xlsx"
            }
        };
        })
</script>


</body>
</html>
于 2016-03-10T05:27:18.450 に答える