javascript - 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" }
                        ]
                    }
                ]
            });
        });

Answer 1

有一个解决方法。让您的列可编辑，只需绑定(bind)从网格抛出的编辑事件，找到该列的编辑器并隐藏它或将其替换为单元格的值。

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