Question

我想使用html表作为kendo-ui jquery的数据源。并且还使用下拉列表编辑内联。为此，我写下了代码

我的问题是当用户双击表格行并编辑状态表而不是网格中的StatusName时，会记录StatusID。

HTML：

 <table id="grid">
                            <thead>
                            <tr>
                                <th>Tag Number</th>
                                <th>Status</th>
                            </tr>
                            </thead>
                            <tbody>
                                 <tr><td>P-502</td><td>Running</td></tr>
                                 <tr><td>P-504</td><td>Running</td></tr>
                             </tbody>
                             </table>

JS代码：

 $('#grid').kendoGrid({

                pageable: true,
                editable: true,
                dataSource: {
                    pageSize: 8
                },
                columns: [
                    {field:"tagNumber", title:"Tag Number", editable:false},
                    {field:"status", title:"Status", editor: statusDropDownEditor}
                ]
            });
            function statusDropDownEditor(container, options) {
                $('<input required name="' + options.field + '"/>')
                    .appendTo(container)
                    .kendoDropDownList({
                        dataTextField: "StatusName",
                        dataValueField: "StatusID",
                        index:0,
                        dataSource: [
                            {StatusID:1, StatusName:"Running"},
                            {StatusID:2, StatusName:"Stop"},
                            {StatusID:3, StatusName:"N/A"}
                        ]
                    });
            }

        });

感谢

Answer 1

您可以使用列选项的values属性指定该字段的外键值列表。

使用示例： https://demos.telerik.com/kendo-ui/grid/foreignkeycolumn

这是一个道场，向您展示它在您的情况下是如何工作的 https://dojo.telerik.com/esicuwIw

和代码：

<script>

    let statuses = [
        {StatusID:1, StatusName:"Running"},
        {StatusID:2, StatusName:"Stop"},
        {StatusID:3, StatusName:"N/A"}
   ];

  let statusForColumnOptions = statuses.map(function(s) {
        return {
        value: s.StatusID,
        text: s.StatusName
      };
  });

  function statusDropDownEditor(container, options) {
    $('<input required name="' + options.field + '"/>')
      .appendTo(container)
      .kendoDropDownList({
      dataTextField: "StatusName",
      dataValueField: "StatusID",
      index:0,
      dataSource: statuses
    });
  }

  $('#grid').kendoGrid({
    pageable: true,
    editable: true,
    dataSource: {
      pageSize: 8,
      data: [
        { tagNumber: 'P-502', status: 1 },
        { tagNumber: 'P-504', status: 1 }
      ]
    },
    columns: [
      {field:"tagNumber", title:"Tag Number", editable:false},
      {field:"status", title:"Status", values: statusForColumnOptions, editor: statusDropDownEditor}
    ]
  });

来自html表和下拉列表的可编辑的kendo ui

1 个答案: