Question

我正在使用Kendo UI网格并使用自定义模板进行弹出式添加/编辑表单。这是我的DEMO。

仅在编辑记录时，我想在弹出窗体中隐藏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: "&nbsp;",
                width: "200px"
            }
        ]
    });
});

Answer 1

最后，这就是我实现它的方式。这是更新的DEMO。

我在弹出式编辑表单中需要隐藏的所有元素上添加了一个类hide-on-edit。然后在网格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>  <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(); } },

Kendo ui网格弹出编辑器表单模板 - 如何在编辑时隐藏某些字段而不是添加

1 个答案: