剑道 Ui 网格锁列答案

【问题标题】：Kendo Ui Grid Lock Column剑道 Ui 网格锁列
【发布时间】：2015-09-03 13:14:25
【问题描述】：

是否有可能将剑道 ui 网格的最后一列锁定到最右边？我想让行操作按钮始终保持在用户的视野中，将其锁定在左侧感觉有点奇怪

【问题讨论】：

我认为这取决于您决定在哪里定义此列，能否提供一些代码示例，好吗？

【解决方案1】：

请在您的页面中添加以下代码sn-p。

<style>
    .k-grid-content-locked {
        float: right;
    }

    .k-grid-header-locked {
        float: right;
    }
</style>

完整演示：

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

    <script src="https://kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="example">
        <div id="grid"></div>

        <script>
            $(document).ready(function () {
                $("#grid").kendoGrid({
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                        },
                        schema: {
                            model: {
                                fields: {
                                    OrderID: { type: "number" },
                                    ShipCountry: { type: "string" },
                                    ShipName: { type: "string" },
                                    ShipCity: { type: "string" },
                                    ShipAddress: { type: "string" }
                                }
                            }
                        },
                        pageSize: 30
                    },
                    height: 540,
                    sortable: true,
                    reorderable: true,
                    groupable: true,
                    resizable: true,
                    filterable: true,
                    columnMenu: true,
                    pageable: true,
                    columns: [{
                        field: "OrderID",
                        title: "Order ID",
                        width: 150
                    }, {
                        field: "ShipCountry",
                        title: "Ship Country",
                        width: 300
                    }, {
                        field: "ShipCity",
                        title: "Ship City",
                        width: 300
                    }, {
                        field: "ShipName",
                        title: "Ship Name",

                        width: 300
                    }, {
                        field: "ShipAddress",
                        locked: true,
                        width: 400
                    }
                    ]
                });
            });
        </script>
    </div>
    <style>
        .k-grid-content-locked {
            float: right;
        }

        .k-grid-header-locked {
            float: right;
        }
    </style>

</body>
</html>

如果上述解决方案无效，请将“float: right;”替换为“float: right !important;”。

【讨论】：

这不适用于分组，分组标题也会在右侧