Question

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

Answer 1

请在页面中添加以下代码段。

<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>

如果以上解决方案不起作用请更换＆＃34; 浮动：正确; ＆＃34;与＆＃34; 浮动：正确！重要; ＆＃34;。

Kendo Ui网格锁柱

1 个答案: