我上载了发生错误的页面。它显示在控制台中(请在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;可以用更优雅的风格编写,但是在这里我只想说明为什么出现问题以及如何应用基本解决方案。

10-06 11:08