为什么 KendoUI 网格在网格的开头添加一行，而不是使用 rowindex 为用户提供选择?

我现在到处都在使用KendoUI网格，需要一些帮助..

当我的剑道网格第一次加载时，我希望用户在底部而不是顶部有行和空行，以指示他们可以添加数据。我不想使用内置的"添加行按钮"。我有以下

尝试1

$(document).ready(function () 
{
var grid = $("#grid").data("kendoGrid");
grid.addRow();
$(".k-grid-edit-row").appendTo("#grid tbody");  
}

这应该将行移动到网格的底部，但它没有，它会在顶部重新制作？

尝试2 我也尝试做类似的事情

var newRow = { field: "FirstName", Value: "" };
var grid = $("#grid").data("kendoGrid");
grid.dataSource.add(newRow);

这也行不通。

尝试 3

但是通过这次尝试，我不确定Kendoui网格是否有"负载"，我知道有一个键控等

grid.tbody.on('load', function (e) 
{               
if ($(e.target).closest('tr').is(':last-child')) 
{
setTimeout(function () 
{                      
var totalrows = grid.dataSource.total();
var data = grid.dataSource.data();
var lastItem = data[data.length - 1];
if (typeof lastItem !== 'undefined') 
{
if (lastItem.FirstName.trim() != "")
grid.addRow();
}               
})
}
}

任何帮助都会很棒。

完整的实施细节如下：

首先我添加数据源，这是一个简单的实现。

var data = $scope.userdetails;
var dataSource = new kendo.data.DataSource({            
transport: {
read: function (e) {
e.success(data);
},
update: function (e) {
e.success();
},
create: function (e) {
var item = e.data;
item.Id = data.length + 1;
e.success(item);
}
},
schema: {
model: {
id: "Id",
fields: {
FirstName: { type: "string" }
}
}
}
});

然后我定义网格

let grid = $("#grid").kendoGrid({
dataSource: dataSource,
scrollable: false,
navigatable: true,
editable: {
createAt: "bottom"
},
dataBound: function (e) {
e.sender.tbody.find(".k-grid-Delete").each(function (idx, 
element) {
$(element).removeClass("k-button");
});
},
columns: [
{
field: "FirstName", title: "First Name"
},
{
command: [{ name: "Delete", text: "", click: $scope.delete, 
className: "far fa-trash-alt fa-fw" }],
title: " ",
width: "100px",
attributes: { class: "k-grid-column-text-centre" }
}
]
}).data("kendoGrid");

我执行以下过程，仅在用户单击最后一行的最后一个单元格上的选项卡时才添加空白行，但也希望在页面首次加载网格时添加空白。

grid.tbody.on('keydown', function (e) {
i`enter code here`f (e.keyCode == 9) {                
if ($(e.target).closest('tr').is(':last-child')) {
setTimeout(function () {                        
var totalrows = grid.dataSource.total();
var data = grid.dataSource.data();
var lastItem = data[data.length - 1];
if (typeof lastItem !== 'undefined') {
if (lastItem.FirstName.trim() == "")
return;
}
grid.addRow();
})
}
}
});

此代码仍将行添加到网格的顶部而不是底部。

$(document).ready(function () {
var newRow = { field: "FirstName", Value: "" };       
grid.dataSource.add(newRow);
grid.editRow($("#grid tr").last());
}

没有其他地方可以添加一行

你尝试#2是正确的方法。它可能在底部添加了一行，对吧？所以你只需要以编程方式编辑它：

var newRow = { field: "FirstName", Value: "" };
var grid = $("#grid").data("kendoGrid");
grid.dataSource.add(newRow);
grid.editRow($("#grid tr").last());

演示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.513/js/kendo.all.min.js"></script>
</head>
<body>

<div id="grid"></div>
<script>
let grid = $("#grid").kendoGrid({
toolbar: ["save"],
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
],
schema:{
model: {
id: "id",
fields: {
age: { type: "number"}
}
}
}
},
editable: true
}).data('kendoGrid');

grid.dataSource.add({});
	grid.editRow($("#grid tr").last());
</script>
</body>
</html>

道场

如果有人使用内置方法，只需使用editable.createAt参数。

相关内容

最新更新

热门标签：