剑道UI电网弹出编辑表单模板 - 如何隐藏编辑某些字段,而不是添加
问题描述:
我使用的剑道UI网格和使用弹出添加/编辑表单一个自定义模板。这是我的DEMO。剑道UI电网弹出编辑表单模板 - 如何隐藏编辑某些字段,而不是添加
只有在编辑记录,在弹出的形式我想隐藏FirstName
和LastName
输入字段,而不是添加。
有谁知道这怎么办?谢谢。
下面是我的代码:
HTML:
<!-- grid element -->
<div id="grid" style="width: 700px; margin: 0 auto;"></div>
<!-- popup editor template -->
<script id="popup_editor" type="text/x-kendo-template">
<p>Custom editor template</p>
<div class="k-edit-label">
<label for="FirstName">First Name</label>
</div>
<!-- autoComplete editor for field: "FirstName" -->
<input type="text" class="k-input k-textbox" data-bind="value:FirstName"/>
<div class="k-edit-label">
<label for="LastName" style="color: red;">Last Name</label>
</div>
<input type="text" class="k-input k-textbox" name="LastName" data-bind="value:LastName">
<div class="k-edit-label">
<label for="BirthDate">Birth Date</label>
</div>
<!-- datepicker editor for field: "BirthDate" -->
<input type="text"
name="BirthDate"
data-type="date"
data-bind="value:BirthDate"
data-role="datepicker" />
<div class="k-edit-label">
<label for="Age">Age</label>
</div>
<!-- numeric textbox editor for field: "Age" -->
<input type="text" name="Age" data-type="number" data-bind="value:Age" data-role="numerictextbox" />
</script>
JS:
var data = createRandomData(50);
//console.log(data);
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: data,
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number", editable:false, nullable: true},
FirstName: { type: "string" },
LastName: { type: "string" },
City: { type: "string" },
Title: { type: "string" },
BirthDate: { type: "date" },
Age: { type: "number" }
}
}
},
pageSize: 10
},
height: 450,
scrollable: true,
sortable: true,
pageable: true,
editable: {
mode: "popup",
template: kendo.template($("#popup_editor").html())
},
toolbar: ["create"],
columns: [
{
field: "FirstName",
title: "First Name",
width: 100
},
{
field: "BirthDate",
title: "Birth Date",
template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #'
},
{
field: "Age",
width: 100
},
{
command: ["edit", "destroy"],
title: " ",
width: "200px"
}
]
});
});
答
最后,我这是怎么实现它。这里是更新的DEMO。
我在需要隐藏在弹出编辑窗体中的所有元素上添加了一个类hide-on-edit
。然后在grid edit
事件中,我附加了一个函数,并检查该行是否正在被编辑添加,如果该行正在编辑,我添加了一行代码以隐藏所有类为hide-on-edit
的元素。
以下是我的DEMO代码片段。
HTML:
对于场FirstName
和LastName
增加了新的类hide-on-edit
<p>Custom editor template</p>
<div class="k-edit-label hide-on-edit">
<label for="FirstName">First Name</label>
</div>
<!-- autoComplete editor for field: "FirstName" -->
<input type="text" class="k-input k-textbox hide-on-edit" data-bind="value:FirstName"/>
<div class="k-edit-label hide-on-edit">
<label for="LastName" style="color: red;">Last Name</label>
</div>
<input type="text" class="k-input k-textbox hide-on-edit" name="LastName" data-bind="value:LastName">
JS:
附加到网格的edit
事件的功能。
$("#grid").kendoGrid({
......
........
//On click Add/Edit button
edit: function(e) {
//Change window title
if (e.model.isNew())// If the new record is being added
{
$(".k-window-title").text("Add New Record");
}
else// If the record is being edited
{
$(".k-window-title").text("Edit Record");
//hide all the elements with class "hide-on-edit" on edit
e.container.find('.hide-on-edit').hide();
}
},