Question

正如您在下面的代码中看到的，我有一个带可编辑单元格的网格。在名为“szin”的专栏中，我厌倦了实施一个剑道颜色选择器，它运行得很好。我的问题是，只有在您尝试编辑其中一个单元格时才会显示颜色。我可以以某种方式永久显示它吗？如果单元格的bg颜色发生变化或者下拉框始终可见或者使用任何其他方法，我都不在乎。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <link href="../styles/kendo.metro.min.css" rel="stylesheet">
    <link href="../styles/kendo.common.min.css" rel="stylesheet">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/kendo.all.min.js"></script>
</head>
<body>
    <div id="grid" style="width:1024px; height:400px; margin-left:auto; margin-right:auto;"></div>
    <script>
        $(document).ready(function() {
            $("#grid").kendoGrid({
                dataSource: {
                    transport: {
                        read: "load.php",
                        update: {
                            url: "load.php",
                            type: "POST"

                        }/*,
                        destroy: {
                            url: "load.php",
                            type: "DELETE"
                        }*/

                    },
                    error: function(e) {
                        alert(e.responseText);
                    }
                },
                columns: [  { field: "termekid", width:"70px" },
                            /*
                            ...
                            */
                            { field: "szin", width:"74px",
                                editor: szinColorPickerEditor
                            }
                            /*
                            ...
                            */

                        ],
                sortable: true,
                editable: true,
                navigatable: true,
                toolbar: ["save", "cancel"/*, "create"*/],
                pageable: {
                        previousNext: true,
                        numeric: true,
                        buttonCount: 5,
                        input: false,
                        pageSizes: [0, 10, 20, 50, 100],
                        refresh: true,
                        info: true


                    }

            });

            function szinColorPickerEditor(container, options) {
                $("<input type='color' data-bind='value:" + options.field + "' />")
                    .appendTo(container)
                    .kendoColorPicker({
                        buttons: true

                    });

            }


        });

    </script>
</body>
</html>

Answer 1

您可以使用列模板，例如，您可以将字段定义更改为：

{
    field: "szin",
    width: "74px",
    editor: szinColorPickerEditor,
    template: "<span style='display: inline-block; width: 100%; height: 100%; background-color: #= szin #'></span>"
}

请参阅demo

kendo ui网格上的可编辑颜色输入字段

1 个答案: