Question

我遇到了剑道问题。

我想仅为一个字段制作内联可编辑网格。

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/grid/editing-inline">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.material.min.css" />

    <script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
</head>
<body>
        <div id="example">
            <div id="grid"></div>

            <script>
                $(document).ready(function () {
                    var crudServiceBaseUrl = "http://localhost/final",
                        dataSource = new kendo.data.DataSource({
                            transport: {
                                read:  {
                                    url: crudServiceBaseUrl + "/home/get",
                                    dataType: "json",
                                    method: 'POST'
                                },
                                update: {
                                    url: crudServiceBaseUrl + "/home/Update",
                                    dataType: "json"
                                },
                                parameterMap: function(options) {
                                    var query = {project: ' AAA ', type: 'search?query='};
                                    query.startAt       = options.skip;
                                    query.maxResults    = options.pageSize;
                                    return query;
                                }
                            },
                            batch: true,
                            pageSize: 10,
                            schema: {
                                data: 'issues',
                                total: 'total',
                                model: {
                                    fields: {
                                        'key': { type: 'string' },
                                        'fields.issuetype.iconUrl': { editable: false},
                                        'fields.summary': { editable: false},
                                        'fields.priority.iconUrl': { editable: false},
                                        'fields.status.name': { editable: false},
                                        'fields.reporter.displayName': { editable: false},
                                        'fields.created': { editable: false },
                                        'fields.updated': { editable: false },
                                        'fields.duedate': { editable: false }
                                    }
                                }
                            }
                        });

                    $("#grid").kendoGrid({
                        dataSource: dataSource,
                        pageable: true,
                        height: 550,
                        columns: [{
                                        field: "key",
                                        title: "Key"
                                    }, {
                                        field: "fields.issuetype.iconUrl",
                                        title: "Type"
                                    }, {
                                        field: "fields.summary",
                                        title: "Summary"
                                    },{
                                        field: "fields.priority.iconUrl",
                                        title: "Priority"
                                    }, {
                                        field: "fields.status.name",
                                        title: "Status"
                                    }, {
                                        field: "fields.reporter.displayName",
                                        title: "Reporter"
                                    }, {
                                        field: "fields.created",
                                        title: "Created"
                                    }, {
                                        field: "fields.updated",
                                        title: "Updated"
                                    }, {
                                        field: "fields.duedate",
                                        title: "Due Date"
                                    }],
                    editable: true
                    });
                });
            </script>
        </div>


</body>
</html>

这是我的代码。问题是每个字段都是可编辑的。我想制作可编辑的关键字段。

这是kendo可编辑的网格演示，我使用了相同的代码，但是kendo的代码可以运行，但我的代码并没有。演示：http://dojo.telerik.com/eWOxo/2

Answer 1

我认为这里有两个问题。

首先，您需要在数据源中指定ID列：

model: {
    id: "WhateverYourIDColumnIs",
    fields: {
        'key': { type: 'string' },
        'fields.issuetype.iconUrl': { editable: false},
        'fields.summary': { editable: false},
        'fields.priority.iconUrl': { editable: false},
        'fields.status.name': { editable: false},
        'fields.reporter.displayName': { editable: false},
        'fields.created': { editable: false },
        'fields.updated': { editable: false },
        'fields.duedate': { editable: false }
    }
}

其次，在您的网格定义中，您指定了editable: true这应该是editable: "inline"

剑道内联可编辑

1 个答案: