Question

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

这一行错了：“kendo.stringify（ grid .getOptions（））”

我的问题：如何更改此代码以便我可以存储更改的表格设置？

我也在这里插入html代码，Thx以获得答案！

    <!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>

Answer 1

编辑：

你的var grid = $("#grid_one").data("kendoGrid");只定义了一次，它可能没有定义的数据，也可能是你的kendogrid之后插入的。
Domready部分也需要引用它，您可以将其放在原点位置或将其移至function
从您和dfsq的回复中，问题是json无法存储函数，因此您必须在从localstorage
在您当前的代码中，{set}之前将始终调用saveState，这意味着您的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;可能会以更优雅的方式书写，但在这里我只是想说明问题出来的原因以及如何应用基本解决方案。

Answer 2

我不知道kendo，但问题必须是在声明网格之前调用saveState函数。

JSFiddle： http://jsfiddle.net/8x7v7mga/1/

因此，在构建kendo对象的某个地方，会调用其中一个saveState处理程序。

您可以先通过声明网格变量来避免这种情况，然后在saveState中检查是否定义了网格：

var grid = null;

$("#grid_one").kendoGrid({ ... });

grid = $("#grid_one").data("kendoGrid");

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

Answer 3

问题是在saveState被初始化之前调用了grid函数。自网格上下文中调用grid以来，您不需要saveState引用，因此您只需使用this代替：

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

TypeError：网格未定义

3 个答案: