ShieldUI Grid - 仅在插入时显示下拉菜单

Question

我正在使用ShieldUI网格，并希望在网格的新行中显示一个下拉列表。该列不可编辑并显示文本。我希望用户能够从下拉列表中选择一个值，但添加后不能编辑。我已经多次查看了文档，但似乎无法弄清楚如何实现。

$(document).ready(function() {
            $("#propertiesGrid").shieldGrid({
                theme: "light-bootstrap",
                dataSource: {
                    remote: {
                        read: {
                            url: "/api" + window.location.pathname + "/ProductAttributes",
                            dataType: "json"
                        }
                    },
                    modify: {
                        update: function(items, success, error) {
                            $.ajax({
                                type: "PUT",
                                url: "/api" + window.location.pathname + "/ProductAttributes",
                                dataType: "json",
                                contentType: "application/json",
                                data: JSON.stringify(items[0].data)
                            }).then(success, error);
                        }
                    }
                },
                schema: {
                    fields: {
                        "attributeId": { path: "attributeId" },
                        "productAttributeId": { path: "productAttributeId" },
                        "productId": { path: "productId" },
                        "attributeName": { path: "attributeName" },
                        "minimum": { path: "minimum" },
                        "target": { path: "target" },
                        "maximum": { path: "maximum" },
                        "method": { path: "method" }
                    }
                },
                rowHover: false,
                resizing: true,
                scrolling: true,
                events: {
                    insert: function() { AddNewRow() }
                },
                editing: {
                    enabled: true,
                    type: "row",
                    insertNewRowAt: "pagebottom"
                },
                toolbar: [
                    {
                        buttons: [
                            { commandName: "insert", caption: "Add Product" }
                        ],
                        position: "bottom"
                    }
                ],
                paging: {
                    pageSize: 10,
                    pageLinksCount: 12,
                    messages: {
                        infoBarTemplate: "From {0} to {1} items of a total of {2}",
                        firstTooltip: "First page",
                        previousTooltip: "Previous page",
                        nextTooltip: "Next page",
                        lastTooltip: "Last page"
                    }
                },
                columns: [
                    {
                        field: "attributeName",
                        title: "Attribute",
                        editable: false,
                        id: "attributeName"
                    },
                    { field: "minimum", title: "Minimum" },
                    { field: "target", title: "Target" },
                    { field: "maximum", title: "Maximum" },
                    { field: "method", title: "Method" },
                    {
                        width: 150,
                        title: " ",
                        buttons: [
                            { commandName: "edit", caption: "Edit" },
                            { commandName: "delete", caption: "Delete" }
                        ]
                    }
                ]
            });
        });

- Michael Bowman

Answer 1

有一个解决方法。将您的列设置为可编辑，仅绑定来自网格的编辑事件，找到该列的编辑器，然后仅隐藏它或用单元格的值替换它。

events: {
    edit: function(e) {
        var target = $("#column_editor_id");
        target.hide();
    }    
},

- lyub35