javascript - 类型错误 : grid is undefined

我上传了发生错误的页面。它显示在控制台中(请在 Firefox 或 Chrome 浏览器中使用 F12)。 http://preventdefault.lima-city.de/index.php

这一行是错误的:“kendo.stringify(grid.getOptions())”

我的问题:我必须如何更改此代码才能存储更改后的表设置？

我还在这里插入了html代码，谢谢解答!

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">  
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>       
    <script src="http://cdn.kendostatic.com/2014.3.1411/js/jszip.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>

    <style type="text/css">
        .button-center {
            text-align: center; /* button position in grid */
        }
    </style>
</head>

<body role="document">

    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">WebSiteName</a>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="index.php">one</a></li>
                    <li><a href="next.php">two</a></li>
                </ul>
            </div>
        </div>
    </nav>  

    <div class="container theme-showcase" id="main" role="main">

        <div class="container">
            <h1>Page<small> one</small></h1> 
        </div>

        <div class="row-fluid">
            <div id="grid_one"></div>   
        </div> <!-- row -->

        <div class="row-fluid">
            <div id="log"></div>
        </div> <!-- row -->

    </div> <!-- container -->
<script>
<!-- --------------------------------------------------------------------------------- --> 
var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", 
                  "Michael", "Robert", "Laura", "Anne", "Nige"],
    lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", 
                 "Suyama", "King", "Callahan", "Dodsworth", "White"],
    cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", 
              "Philadelphia", "New York", "Seattle", "London", "Boston"],
    titles = ["Accountant", "Vice President, Sales", "Sales Representative", 
              "Technical Support", "Sales Manager", "Web Designer",
              "Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", 
              "Chief Execute Officer"],
    birthDates = [new Date("1948/12/08"), new Date("1952/02/19"), new Date("1963/08/30"), 
                  new Date("1937/09/19"), new Date("1955/03/04"), new Date("1963/07/02"), 
                  new Date("1960/05/29"), new Date("1958/01/09"), new Date("1966/01/27"), 
                  new Date("1966/03/27")];

function createRandomData(count) {
    var data = [], now = new Date();

    for (var i = 0; i < count; i++) {
        var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
            lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
            city = cities[Math.floor(Math.random() * cities.length)],
            title = titles[Math.floor(Math.random() * titles.length)],
            birthDate = birthDates[Math.floor(Math.random() * birthDates.length)],
            age = now.getFullYear() - birthDate.getFullYear();

        data.push({
            Id: i + 1,
            FirstName: firstName,
            LastName: lastName,
            City: city,
            Title: title,
            BirthDate: birthDate,
            Age: age
        });
    }
    return data;
}
<!-- --------------------------------------------------------------------------------- --> 
function onChangeSelection() {
    var selectedItem = this.dataItem(this.select());
    var Text = '<h1><small>row name=</small>' + selectedItem.FirstName + " " + selectedItem.LastName + "</h1>";
    console.log(Text);
    $("#log").html(Text);
    $("#ordernumber").val(selectedItem.ordernumber);
}
<!-- --------------------------------------------------------------------------------- --> 
function startbuttonclick(e) {      
    var data = this.dataItem($(e.currentTarget).closest("tr"));
    var Text = "<h1><small>Button click name=</small> " + data.FirstName + " " + data.LastName + "</h1>";       
    console.log(Text); 
    $("#log").html(Text);
    e.preventDefault();                         
}
<!-- --------------------------------------------------------------------------------- --> 
$(document).ready(function() {
    $("#grid_one").kendoGrid({
        dataSource: {
            data: createRandomData(10),
            schema: {
                model: {
                    fields: {
                        FirstName: { type: "string" },
                        LastName: { type: "string" },
                        City: { type: "string" },
                        Title: { type: "string" },
                        BirthDate: { type: "date" },
                        Age: { type: "number" }
                    }
                }
            },
            pageSize: 10
        },
        height: 500,
        dataBound: saveState,
        columnResize: saveState,
        columnShow: saveState,
        columnHide: saveState,
        columnReorder: saveState,
        columnLock: saveState,
        columnUnlock: saveState,        
        selectable: true,
        resizable: true,
        columnMenu: true,
        scrollable: true,
        sortable: true,
        filterable: true,
        change: onChangeSelection,            
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5,
            pageSizes: [5, 10, 20, 250]
        },
        columns: [
            {
                field: "FirstName",
                title: "First Name",
                width: "150px",
            },
            {
                field: "LastName",
                title: "Last Name",
                width: "150px",
            },
            {
                field: "City",
                hidden: true
            },
            {
                field: "Title",
                hidden: true
            },
            {
                field: "BirthDate",
                title: "Birth Date",
                template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #',
                width: "175px",
            },
            {
                field: "Age",
                width: "150px",
            },
            {
                command: { 
                    text: "Start", 
                    click: startbuttonclick }, 
                        title: "Start", 
                        width: "65px",
                    attributes:{
                        "class":"button-center"}            
            }
        ]
    });
    <!-- ------------------------------------------------------------------------------ -->     
    var grid = $("#grid_one").data("kendoGrid");

    function saveState(e) {
        e.preventDefault();
        localStorage["kendo-grid-one"] = kendo.stringify(grid.getOptions());
    };

    $(function (e) {
        var options = localStorage["kendo-grid-one"];
        if (options) {
            grid.setOptions(JSON.parse(options));
        } else {
          grid.dataSource.read();
        }
    }); 
});
<!-- --------------------------------------------------------------------------------- --> 
</script>
</body>
</html>

最佳答案

编辑:

您的var grid = $("#grid_one").data("kendoGrid");仅定义一次，并且定义时可能没有数据，它可能由您的kendogrid在之后插入。
Domready零件还应该需要引用它，您可以将其放在原始位置或将其移动到 function
从您和 dfsq 的回复来看，问题是 json 无法存储函数，因此您必须在从 localstorage 检索时将其添加回来。
在您当前的代码中，saveState将始终在 setOptions 之前调用，这意味着 saveState 刚刚被您的 saveState 删除。函数，因此您必须向前移动 setoptions 代码。

变化很大

$(document).ready(function() {
  // Get options first
  var options = localStorage["kendo-grid-one"];
  if (options) {
    options = JSON.parse(options);
    // Workaround to addback event
    options.columns[6].command.click = startbuttonclick;
  }

  $("#grid_one").kendoGrid({
        dataSource: {
            data: createRandomData(10),
            schema: {
            .....
    });
  if (options) {
    $("#grid_one").data("kendoGrid").setOptions(options);  
  }
  <!-- ------------------------------------------------------------------------------ -->     

  function saveState(e) {
    var grid = $("#grid_one").data("kendoGrid");
    e.preventDefault();
    localStorage["kendo-grid-one"] = kendo.stringify(grid.getOptions());
  };

参见Demo Here ，现在可以了。

saveState部分使用 dfsq 可能会更好
options.columns[6].command.click = startbuttonclick;也许可以写得更优雅，但这里我只想展示为什么会出现问题以及如何应用基本的解决方案。

关于javascript - 类型错误 : grid is undefined，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31046486/

javascript - 类型错误 : grid is undefined

上一篇：javascript - IHTMLDOMNode::appendChid() 并不总是按预期工作

下一篇：javascript - 我如何在 Jasmine 中测试回调