我有以下代码片段，当单击网格中的编辑按钮并弹出窗口时会调用该代码片段
edit: function(e) {
$('input[name="prods"]').each(function()
{
var textarea = $(document.createElement('textarea'));
textarea.text($(this).val());
$(this).after(textarea).remove();
});
}
文本框输入类型转换为文本区域，效果很好。
转换为textarea后，如何将textarea的值赋给$('input[name="prods"]')
当单击弹出窗口的保存按钮时？
最佳答案
请尝试使用以下代码片段。 我们必须从 textArea 检索值并将其值分配给模型属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/jszip.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div id="grid"></div>
</div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1 } },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
{ field: "ProductName", title: "Product Name" },
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "120px" },
{ field: "Discontinued", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "popup",
edit: function (e) {
$('input[name="ProductName"]').each(function () {
var textarea = $(document.createElement('textarea'));
textarea.attr("id", "txtProductName");
textarea.text($(this).val());
$(this).after(textarea).remove();
});
},
save: function (e) {
e.model.ProductName = $('#txtProductName').val();
}
});
});
</script>
</body>
</html>
如果有任何疑问，请告诉我。
关于javascript - 将输入类型文本转换为文本区域并将值赋回输入类型文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31806005/