带有下拉菜单的剑道网格行

Question

我是 Kendo 网格的新手，使用 Kendo for JQuery 作为 C# MVC 项目的一部分。目前，我有一个网格，允许用户通过输入数字/文本来编辑它。

新要求是添加“是/否”或“真/假”下拉行。

这怎么办？

我希望每个字段都是一个显示“是”或“否”的下拉列表，或者可能是真/假复选框可以吗？

现有代码：

$("#MyGrid").kendoGrid({
    dataSource: myDataSource,
    columns: columns,
    editable: ('@hasEditRights' === 'True') ? { mode: "incell", confirmation: false } : false,
    autoBind: false,
    noRecords: true,
    columnMenu: false,
    groupable: true,
    navigatable: true,
    reorderable: true,
    resizable: true,
    scrollable: true,
    sortable: {
        initialDirection: "asc",
        mode: "multiple"
    },
    selectable: "multiple, cell",
    allowCopy: {
        delimeter: "\t"
    },
    toolbar: kendo.template($("#MyToolBar").html()),
    search: {
        fields: ["Name"]
    }
    ...

为了增加我的问题，列和行是根据数据库获取提供的内容动态构建的。我有兴趣在所有列中添加是/否或真/假的行。

columns: columns

所以我不想在前端代码中指定列或行名称，就好像它们向数据库中添加新条目一样，它也需要添加到前端中。

我认为答案可能是使用列模板？但是，这意味着在模板中指定数据库表中的每个字段。所以如果后端更新了，前端也需要更新。

任何帮助表示赞赏！

Answer 1

您需要指定后端返回的数据中的列类型，才能知道哪些列是前端有选项的列。然后，您可以迭代列并根据需要调整每种类型。如果您想在行单元格内使用输入，请使用

column.editor

设置。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.2.1/default/default-ocean-blue.css"/>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2024.1.319/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="grid"></div>
<script>
  let columnsFromBackend = [{
    field: 'name',
    title: 'Name'
  },{
    title: 'Send Notification',
    field: 'notify',
    backendType: 'yesno',
  }, {
    title: 'Active',
    field: 'active',
    backendType: 'checkbox',
  }];
  
  const dataFromBackend = [
    { name: "Jane Doe", active: true, notify: 'Y' }, 
    { name: "John Doe", active: false, notify: 'N' }
  ];
  
  columnsFromBackend.forEach(column => {
    if (column.backendType) {
      if (column.backendType === 'yesno') {
        column.template = "#= data['" + column.field + "'] === 'Y' ? 'Yes' : 'No' #";
        column.editor = function(container, options) {
          const $input = $('<input data-field="' + column.field + '">').appendTo(container);
          
          $input.kendoDropDownList({
            value: options.model[column.field],
            dataSource: [{ text: 'Yes', value: 'Y' }, { text: 'No', value: 'N' }],
            dataTextField: 'text',
            dataValueField: 'value',
            change: function(model, event) {
              const widget = event.sender;
              const fieldName = widget.element.data('field');
              const value = widget.value();
              model.set(fieldName, value);
            }.bind(null, options.model)
          });
        };
      }
      else if (column.backendType === 'checkbox') {
        column.template = "#= data['" + column.field + "'] ? '✅' : '⛔️' #";
      }
    }
  });
  
$("#grid").kendoGrid({
  columns: columnsFromBackend,
  editable: true,
  dataSource: dataFromBackend
});
</script>
</body>
</html>

道场

带有下拉菜单的剑道网格行

问题描述投票：0回答：1

1个回答

最新问题

带有下拉菜单的剑道网格行

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1