Viv*_*ekh 4 drag-and-drop kendo-ui kendo-grid
我正在使用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之前删除列？
Ona*_*Bai 10
你应该分两步完成:
对于创建网格后的第一部分,您可以执行以下操作:
$("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/