我正在使用 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/