个人中心
gpt4 book ai didi

kendo-ui - 剑道 Ui 格锁柱

转载 作者：行者123 更新时间：2023-12-04 18:02:38 28 4
gpt4 key购买 nike

有没有可能将剑道 ui 网格的最后一列锁定到最右边？我想让用户始终看到行操作按钮，将它锁定在左侧感觉有点奇怪

最佳答案

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

<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;”。

关于kendo-ui - 剑道 Ui 格锁柱，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32376704/

28 4 0
文章推荐： javascript - EmberJS : toggleProperty set all properties of a Component to a default value
文章推荐： amazon - DynamoDBOperationConfig 和 QueryOperationConfig
文章推荐： git - SourceTree 不尊重 .gitattributes 文件
文章推荐： Rsync 什么都不做？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com