gpt4 book ai didi

javascript - 如何动态地将一行添加到 kendo ui 网格(到它的模式)?

转载 作者:行者123 更新时间:2023-11-30 14:14:35 24 4
gpt4 key购买 nike

是否可以通过单击按钮向 kendo ui 网格添加一列?我试图添加它,但此列未在网格中初始化,我没有任何数据。如何动态地向模式添加列? Mabye 我应该以某种方式重新初始化它吗?

我只想添加带有标题及其名称和column.field name 的空列,而不是在其他行中对其进行编辑。我从来不知道它会是什么专栏以及有多少。它们应该是动态的。在添加 col 之后,新行应该随之而来。

最大的问题是将字段添加到grid.dataSource.schema.model.fields

let gridProducts = $('#gridProducts').kendoGrid({
dataSource: new kendo.data.DataSource({
data: e.event.products,
autoSync: true,
schema: {
model: {
id: "productID",
fields: {
productName: {
defaultValue: productDefault.products[0].productName,
validation: {
required: true
},
type: "string"
},
productCategory: {
defaultValue: productDefault.products[0].productCategory
},
productDiscount: {
defaultValue: productDefault.products[0].productDiscount,
type: "array"
}
}
}
}
}),
dataType: "object",
pageable: false,
toolbar: ["create"],
columns: [{
field: "productID",
title: "id"
},
{
field: "productName",
title: "Name"
},
{
field: "productCategory",
title: "Category",
template: "1",
editor: productCategoryDropDownEditor,
},
{
field: "productDiscount",
title: "Discount"
},
{
command: "destroy",
title: "x",
width: 29
},
],
editable: true,
sortable: true,
resizable: true
});

$("#addPrice").click(function() {
addPriceDialog.data("kendoDialog").open();
});

addPriceDialog.kendoDialog({
width: "450px",
title: "Add price",
closable: true,
modal: true,
actions: [{
text: 'Cancel',
action: function() {
return false;
},
},
{
text: 'Ок',
primary: true,
action: function() {
let name = $("#priceName ").val();
let type = $("#priceType").val();
let val = $("#priceValue").val();
let price = $("#price").val();
let grid = $("#gridProduct").data("kendoGrid");
let columns = grid.columns;
let newCol = {
title: "Price -" + name,
field: "price" + type + [columns.length],
format: "",
};

$("#gridTicket").data("kendoGrid").columns[(columns.length)] = newCol;
return true;
},
}
]
});

最佳答案

您可以使用setOptions 重新定义网格的列。

查看演示片段。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.mobile.all.min.css"/>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>
<body>
<button onclick="addColumn()">Add Column</button>
<div id="grid"></div>

<script>


$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});

var grid = $("#grid").data("kendoGrid");

function addColumn() {
grid.setOptions({
columns: grid.columns.concat([
{ field: "test" }
])
});
}
</script>
</body>
</html>

关于javascript - 如何动态地将一行添加到 kendo ui 网格(到它的模式)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53811570/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com