我正在使用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/
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句