Question

在我的Kendo网格弹出编辑器中，需要两个有一个下拉列表，它混合了（不知何故）网格中的两个字段，所以我怎么能有？在下面我想要一个下拉列表显示（模型和制作人）在我的弹出编辑器中，但在保存时，每个部分都应该在其领域中占有一席之地

$("#turbingrid").kendoGrid({
    //   debugger;

    dataSource: dataSource,
    scrollable: false,

    columns: [
              { field: 'DeviceIP', title: 'DeviceIP', width: '100px', id: 'DeviceIP' },
              { field: 'Producer', title: 'Producer', width: '80px', editor: ProductNameDropDownEditor, },
              { field: 'Model', title: 'Model', width: '220px' },
              { field: 'DeviceType', title: 'DeviceType', width: '100px',editor: deviceTypesList  },
              { field: 'Description', title: 'Description', width: '220px' },
              { field: 'Username', title: 'Username', width: '120px' },
              { field: 'Password', title: 'Password', width: '100px' },
              { field: 'PublicIP', title: 'PublicIP', width: '120px' },
              { field: 'device_id', title: 'device_id', width: '120px',hidden:true },
              { command: ["edit"], title: "&nbsp;" }],

    editable: "popup",
    //edit:
    //    function () {
    //        document.getElementsByName("DeviceIP")[0].disabled = true;

    //    },

        edit: function(e) {
            e.container.find("label[for='device_id']").parent().hide();
            e.container.find("div[data-container-for='device_id']").hide();
        }                                                                            
});

Answer 1

查看以下代码。我使用了一个文本框而不是下拉列表，并使用split制作了一个粗略的演示，但重点更重要。

您可以使用beforeEdit事件为编辑弹出窗口准备数据，并将其放在模型的新字段中，然后在模板中使用此新字段，最后使用save事件将对自定义字段所做的更改应用于原始字段。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/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.2.621/js/kendo.all.min.js"></script>
</head>
<body>
  
<script id="popup-editor" type="text/x-kendo-template">
  <h3>Edit Person</h3>
  <p>
    <label>Name:<input name="name" /></label>
  </p>
  <p>
    <label>Age: <input type="text" name="test" /></label>
  </p>
</script>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
    { command: "edit" }
  ],
  dataSource: {
    data: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33 }
    ],
    schema: {
      model: { id: "id" }
    }
  },
  editable: {
    mode: "popup",
    template: kendo.template($("#popup-editor").html())
  },
  beforeEdit: function(e) {
    e.model.test = e.model.name + ", " + e.model.age.toFixed();
  },
  save: (e) => {
    let values = e.model.test.split(", ");
    e.model.name = values[0];
    e.model.age = parseInt(values[1]);
  }
});
</script>
</body>
</html>

如何两个在我的弹出编辑器中有一个字段，而不是我的网格

1 个答案: