Question

我在明细行中有一个可编辑的网格，当我编辑单元格并将其保留时，没有脏标志。我以为可能是隐藏的，所以我添加了一个按钮来获取所有脏单元，并且没有返回。

我查看了kendo论坛，找到了一种添加脏标志的解决方案，但我无法使其正常运行，并且不确定问题出在哪里，我必须忽略某些事情，但不确定它可能是什么，我有一件事情注意到更改事件没有触发。

我可以用新鲜的眼睛指出我所缺少的东西

true

//#region Data

var dropdownData = [{
    "CatalogID": 1,
    "NameVersion": "Catalog1"
  },
  {
    "CatalogID": 2,
    "NameVersion": "Catalog2"
  },
  {
    "CatalogID": 3,
    "NameVersion": "Catalog3"
  },
  {
    "CatalogID": 4,
    "NameVersion": "Catalog4"
  },
];

var gridData = [{
    "RoomID": 1,
    "RoomName": "Room 1",
    "Areas": [{
      "id": 1,
      "AreaName": "Area 1"
    }, {
      "id": 10,
      "AreaName": "Area 10"
    }]
  },
  {
    "RoomID": 2,
    "RoomName": "Room 2",
    "Areas": [{
      "id": 2,
      "AreaName": "Area 2"
    }, {
      "id": 20,
      "AreaName": "Area 20"
    }]
  },
  {
    "RoomID": 3,
    "RoomName": "Room 3",
    "Areas": [{
      "id": 3,
      "AreaName": "Area 3"
    }, {
      "id": 30,
      "AreaName": "Area 30"
    }, {
      "id": 35,
      "AreaName": "Area 35"
    }]
  },
  {
    "RoomID": 4,
    "RoomName": "Room 4",
    "Areas": [{
      "id": 4,
      "AreaName": "Area 4"
    }, {
      "id": 40,
      "AreaName": "Area 40"
    }]
  }
];

//#endregion

(function() {
  $('#btn').on('click', () => {
    var grid = $('.eagClass').data("kendoGrid");
    var data = grid.dataSource.data();
    var dirty = $.grep(data, function(item) {
      return item.dirty
    });

    console.log("dirty", dirty);
  });

  ShowTabEditor(gridData);
})();

function ShowTabEditor(data) {
  $('#TabEditor').kendoGrid({
    dataSource: {
      data: data
    },
    schema: {
      model: "RoomID",
      fields: {
        RoomID: {
          editable: false,
          hidden: true
        },
        RoomName: {
          editable: false,
          type: "string",
          hidden: false
        },
        AreaCount: {
          editable: false,
          type: "number",
          hidden: false
        }
      }
    },
    columns: [{
        field: "RoomID",
        title: "RoomID",
        hidden: true
      },
      {
        field: "RoomName",
        title: "RoomName",
        hidden: false
      },
      {
        field: "AreaCount",
        title: "AreaCount",
        hidden: false
      }
    ],
    selectable: "row",
    detailInit: TabEditorDetailInit,
    detailExpand: function(e) {
      this.select(e.detailRow.prev());
      this.collapseRow(this.tbody.find('> tr.k-master-row').not(e.masterRow));
    }
  }).data("kendoGrid");
}

function TabEditorDetailInit(e) {
  $("<div class='eagClass' />").appendTo(e.detailCell).kendoGrid({
    scrollable: true,
    sortable: true,
    selectable: "row",
    filterable: false,
    toolbar: kendo.template($("#EditAreaGridToolbarTemplate").html()),
    schema: {
      model: {
        fields: {
          id: {
            nullable: true
          },
          AreaName: {
            nullable: true,
            editable: true
          },
          Catalog: {
            editable: false
          }
        }
      }
    },
    columns: [{
        title: "id",
        field: "id",
        hidden: true
      },
      {
        template: "<input type='checkbox' class='checkbox' id='#=id #' />",
        width: "10px"
      }, {
        field: "AreaName",
        title: "Area Name",
        width: "20px",
        template: "#=dirtyField(data,AreaName) # #:AreaName#"
      }, {
        title: "Catalog",
        field: "Catalog",
        template: "<input class='edit-area-catalog-dropdown' type='text' />",
        width: "40px",
        editable: false
      }
    ],
    editable: {
      mode: "incell",
      confirmation: false
    },
    dataSource: {
      data: e.data.Areas
    },
    batch: true,
    pageSize: 100,

    dataBound: function(w) {
      abindCatalogDropDownInCellProcess(e.detailCell);
    },
    change: onChange(e)
  });

  StopCollapsing("#TabEditor");
}

function onChange(e) {
  if (e.action == "itemchange") {
    console.log("in change");
    e.items[0].dirtyFields = e.items[0].dirtyFields || {};
    e.items[0].dirtyFields[e.field] = true;
  }
}

function StopCollapsing(grid) {
  var parentGrid = $(grid).data("kendoGrid");
  var expanded = $.map(parentGrid.tbody.children(":has(> .k-hierarchy-cell .k-i-collapse)"), function(row) {
    return $(row).data("uid");
  });

  parentGrid.one("dataBound", function() {
    parentGrid.expandRow(parentGrid.tbody.children().filter(function(idx, row) {
      return $.inArray($(row).data("uid"), expanded) >= 0;
    }));
  });
}

function dirtyField(data, fieldName) {
  var hasClass = $("[data-uid=" + data.uid + "]").find(".k-dirty-cell").length < 1;
  if (data.dirty && data.dirtyFields[fieldName] && hasClass) {
    return "<span class='k-dirty'></span>"
  } else {
    return "";
  }
}

function abindCatalogDropDownInCellProcess(cell) {
  cell.find("td input.edit-area-catalog-dropdown").each(function() {
    $(this).kendoDropDownList({
      dataTextField: "NameVersion",
      dataValueField: "CatalogID",
      optionLabel: "Select Catalog...",
      dataSource: {
        transport: {
          read: function(options) {
            if (dropdownData.length > 0) {
              options.success(dropdownData);
              return;
            }
            options.success(dropdownData);
          }
        }
      },
      select: function(e) {
        var grid = $("#TabEditor").data("kendoGrid");
        var dataItem = grid.dataItem(grid.select());
        var drpDataItem = this.dataItem(e.item);
      }
    });
  });
}

Answer 1

我发现了您遇到的两个问题，并将其修复。您的自定义获取按钮仍然无法正常工作，因为它不确定为什么。但是，这是另外两个修复程序。

您的更改事件在错误的位置，只需将其移动到数据源，就像这样：

dataSource: {
  data: e.data.Areas,
  change: function(event)
         { onChange(event);}
},

也请使用其他名称（而不是'e'），因为e是从其他函数传递过来的。就我而言，我使用事件，因此它将是针对数据源和数据网格的上下文的事件。这将触发更改事件。

您的班级if语句错误也应该是这样的：

function dirtyField(data, fieldName) {
  //var hasClass = $("[data-uid=" + data.uid + "]").find(".k-dirty-cell").length < 1;
  if (data.dirtyFields && data.dirtyFields[fieldName]) {
    return "<span class='k-dirty'></span>"
  } else {
    return "";
  }
}

我不确定您要使用hasClass实现什么。所以我只是将其从if块中切出。但是，如果需要，请弄清楚为什么它总是错误的，并且永远不会添加脏类。此外，没有data.dirty仅需要检查的data.dirtyFields。

也是有效的Dojo：https://dojo.telerik.com/adOSogix

干杯

编辑incell模式时，剑道网格中未显示脏标志

1 个答案: