Question

我是知识分子js的新手，我正在尝试从知识分子的Paged网格示例 http://knockoutjs.com/examples/gridEditor.html 这是我的代码：给出错误TypeError：ko.simpleGrid未定义请帮助我在这个thanx中帮助我。

<html>
    <head>       

        <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type="text/javascript"></script>
        <script  src='http://knockoutjs.com/examples/resources/knockout.simpleGrid.js'></script>
        <script src="http://knockoutjs.com/downloads/knockout-3.0.0.debug.js" type="text/javascript"></script>



        <script>
            var initialData = [
                {name: "Well-Travelled Kitten", sales: 352, price: 75.95},
                {name: "Speedy Coyote", sales: 89, price: 190.00},
                {name: "Furious Lizard", sales: 152, price: 25.00},
                {name: "Indifferent Monkey", sales: 1, price: 99.95},
                {name: "Brooding Dragon", sales: 0, price: 6350},
                {name: "Ingenious Tadpole", sales: 39450, price: 0.35},
                {name: "Optimistic Snail", sales: 420, price: 1.50}
            ];

            var PagedGridModel = function (items) {
                this.items = ko.observableArray(items);

                this.addItem = function () {
                    this.items.push({name: "New item", sales: 0, price: 100});
                };

                this.sortByName = function () {
                    this.items.sort(function (a, b) {
                        return a.name < b.name ? -1 : 1;
                    });
                };

                this.jumpToFirstPage = function () {
                    this.gridViewModel.currentPageIndex(0);
                };

                this.gridViewModel = new ko.simpleGrid.viewModel({
                    data: this.items,
                    columns: [
                        {headerText: "Item Name", rowText: "name"},
                        {headerText: "Sales Count", rowText: "sales"},
                        {headerText: "Price", rowText: function (item) {
                                return "$" + item.price.toFixed(2)
                            }}
                    ],
                    pageSize: 4
                });
            };

            ko.applyBindings(new PagedGridModel(initialData));
        </script>
        <style>
            body { font-family: arial; font-size: 14px; }
            .liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
            .liveExample input { font-family: Arial; }
            .liveExample b { font-weight: bold; }
            .liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
            .liveExample select[multiple] { width: 100%; height: 8em; }
            .liveExample h2 { margin-top: 0.4em; }

            .ko-grid { margin-bottom: 1em; width: 25em; border: 1px solid silver; background-color:White; }
            .ko-grid th { text-align:left; background-color: Black; color:White; }
            .ko-grid td, th { padding: 0.4em; }
            .ko-grid tr:nth-child(odd) { background-color: #DDD; }
            .ko-grid-pageLinks { margin-bottom: 1em; }
            .ko-grid-pageLinks a { padding: 0.5em; }
            .ko-grid-pageLinks a.selected { background-color: Black; color: White; }
            .liveExample { height:20em; overflow:auto } /* Mobile Safari reflows pages slowly, so fix the height to avoid the need for reflows */

            li { list-style-type: disc; margin-left: 20px; }

        </style>
    </head>
    <body>

        <div data-bind='simpleGrid: gridViewModel'> </div>

        <button data-bind='click: addItem'>
            Add item
        </button>

        <button data-bind='click: sortByName'>
            Sort by name
        </button>

        <button data-bind='click: jumpToFirstPage, enable: gridViewModel.currentPageIndex'>
            Jump to first page
        </button> 

    </body>
</html>

knowkout js网格示例无法正常工作

0 个答案: