Question

我有一个订单行网格，我需要能够以预先填充的编辑表单字段（使用AngularJs）以编程方式打开弹出编辑器表单。

在HTML中，我有一个lineGrid和一个addButton，它在ticketEntryController上调用addRow（）：

<div id="wrapper" class="container-fluid" ng-controller="ticketEntryController">
  <div ng-controller="ticketLineController">
      <div kendo-grid="ticketLineGrid" k-options="getTicketLineGridOptions()"></div>
  </div>
  <button id="addButton" ng-click="addRow()" class="btn btn-primary btn-sm">Add Row</button>
</div>

这是ticketEntryController：

(function () {
    'use strict';
    angular.module('app').controller('ticketEntryController', ticketEntryController);

    function ticketEntryController($scope) {
        $scope.lineGrid = {};
        $scope.addRow = function () {
          var item = { itemNo: 'TEST123', itemDescr: 'Some description' };
          $scope.$broadcast('AddRow', item);
        }
    }
})();

以下是ticketLineController的一部分：

function ticketLineController($scope) {
    $scope.$on('AddRow', function(event, item) {
        console.log("ticketLineController, AddRow: " + item.itemNo);
        $scope.itemNo = item.itemNo;
        $scope.itemDescr = item.itemDescr;
        $scope.ticketLineGrid.addRow();
    });

Plunker：http://plnkr.co/edit/VG39UlTpyjeTThpTi4Gf?p=preview

单击“添加行”按钮时，将打开编辑器弹出窗体，但所有字段均为空。如何填充字段（例如，当您单击现有行的“编辑”按钮时）？

Answer 1

我想出了如何为你预先填充一行，虽然我不确定这是否必然是最好的方式，但它确实完成了这项工作 - 我对AngularJs更熟悉，而不是Kendo UI。

Kendo API允许您更改/设置要添加的新项目的唯一位置是edit event，但我无法看到将您自己的对象发送到事件时的方法调用addRow，所以你需要在控制器中引用一个名为itemForAdd的共享对象。在控制器中调用addRow()之前，需要将itemForAdd对象设置为要用表格预先填充表单的实际对象。

    var itemForAdd = {};
    $scope.$on('AddRow', function(event, item) {
        // save reference to item to use for pre-population
        itemForAdd = item;
        $scope.ticketLineGrid.addRow();
    });

现在，在Kendo API发出的edit事件中，您可以填充模型项中所选项目中的项目。这不是真的需要，但我也想清除我使用的对象，所以在保存和取消事件中，我清除了共享的itemForAdd对象。

            edit: function (e) {
                if (e.model.isNew()) {
                  e.model.set("itemNo", itemForAdd.itemNo);
                  e.model.set("itemDescr", itemForAdd.itemDescr);
                }

                var popupWindow = e.container.getKendoWindow();
                e.container.find(".k-edit-form-container").width("auto");
                popupWindow.setOptions({
                    width: 640
                });
            },
            save: function(e) {
              if (e.model.isNew()) {
                // clear out the shared object 
                itemForAdd = {};
              }
            },
            cancel: function(e) {
              if (e.model.isNew()) {
                // clear out the shared object 
                itemForAdd = {};
              }
            }

使用以前的更改，您所需的功能大部分都在工作，但编辑弹出窗口中的表中的数据不会显示更新的值。这是因为Kendo数据绑定显然不知道他们必须更新。我无法弄清楚如何使这项工作，所以我只使用该表的AngularJs样式绑定（你有+=itemNo=+），以便表中的值将根据模型中的更改进行更新对象：

              <tbody>
                  <tr>
                      <td>{{dataItem.itemNo}}</td>
                      <td>{{dataItem.itemDescr}}</td>
                      <td>{{dataItem.cat}}</td>
                      <td>{{dataItem.mfg}}</td>
                      <td>{{dataItem.mfgPartNo}}</td>
                  </tr>
              </tbody>

但此时还有一个问题，只有itemNo正在更新，而不是itemDescr，这是因为itemDescr被设置为editable: false网格配置，所以我不得不将其更改为editable: true

                        fields: {
                            id: { type: "string", editable: false },
                            itemDescr: { type: "string", editable: true },
                            ...
                        },

最后，这是一个更新的plunker，其中包含我的更改：http://plnkr.co/edit/rWavvMh4dRFAsJjuygQX?p=preview

如何以编程方式为Kendo UI网格填充添加行表单（AngularJS）

1 个答案: