我正在使用 Kendo Grid UI。下面是一个相同的例子。

<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.common.min.css"   rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.rtl.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.silver.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.dataviz.silver.min.css" rel="stylesheet" />
 <link href="/kendo-ui/content/shared/styles/examples.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>


</head>
<body>

    <div id="main">
<h1 id="exampleTitle">
        <span class="exampleIcon gridIcon"></span>
        <strong>Grid /</strong> Column resizing    </h1>

<div id="theme-list-container"></div>

<div id="exampleWrap">
    <script>preventFOUC()</script>


    <div id="example" class="k-content">
        <div id="grid"></div>

        <script>
            $(document).ready(function() {
            gridDataSource = new kendo.data.DataSource({
            transport: {
                                        read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                                    },
                                });
                $("#grid").kendoGrid({
                    dataSource: gridDataSource,
                    scrollable: true,
                    resizable: true,

                    columns: [
                       {
                            field: "OrderID",
                            title: "ID"

                        }, {
                            field: "OrderDate",
                            title: "Order Date"


                        },
                        {
                            field: "ShipCountry",
                            title: "Ship Country"

                        },
                        {
                            field: "ShipCity",
                            title: "Ship City"

                        },
                        {
                            field: "ShipName",
                            title: "Ship Name"

                        },
                        {
                            field: "ShippedDate",
                            title: "Shipped Date"

                        }

                    ]
                });
            });
        </script>
    </div>
</div>
</div>

我想要对列进行自定义重新排序。我已禁用对 OrderID 的拖放。但是除了 OrderID 之外的列可以重新排序,并且这些列可以放在 OrderID 列之前。

有没有办法可以在 OrderID 之前禁用删除列?

最佳答案

您应该分两步完成:

  • 禁止放入第一列。
  • 禁用拖动第一列。

  • 对于创建网格后的第一部分,您可以执行以下操作:
    $("th:nth(0)", "#grid").data("kendoDropTarget").destroy();
    

    这从标识符为 grid 的网格中获取,第一个单元格 th:nth(0) 为 KendoUI DropTarget 并销毁它(不再是有效的放置目标)。

    对于第二部分,您应该定义一个 dragstart 事件来检查您是否正在拖动第一列,如果是,则不允许拖动它。
    $("#grid").data("kendoDraggable").bind("dragstart", function(e) {
        if (e.currentTarget.text() === "ID") {
            e.preventDefault();
        }
    });
    

    注意:在这里我检测到第一列要求其文本 ( ID ),但您可以更改它以检查其在网格中 th 列表中的位置,如果是,则调用 preventDefault

    检查它在这里运行:http://jsfiddle.net/OnaBai/jzZ4u/1/

    关于drag-and-drop - 剑道网格自定义重新排序,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21495157/

    10-12 00:01
    查看更多