javascript - AngularJS ui-grid enableCellEdit 不编辑

Question

我正在尝试学习 AngularJS。

网格显示正确。它正确加载页面。

• 它不会进入编辑模式。
• 双击不会进入编辑模式。
• F2 不进入编辑模式。

ProductTitle(下方第二列)是我正在使用的示例。

我在 Chrome 中没有收到任何错误。没有丢失的库。

我花了几个小时研究这个(并学到了很多)但是我无法让它进入编辑模式。

有人知道我做错了什么吗？

模块:

app = angular.module('UIGrid_App', [
    'ngAnimate', // support for CSS-based animations
    'ngTouch', //for touch-enabled devices
    'ui.grid', //data grid for AngularJS
    'ui.grid.pagination', //data grid Pagination
    'ui.grid.resizeColumns', //data grid Resize column
    'ui.grid.moveColumns', //data grid Move column
    'ui.grid.pinning', //data grid Pin column Left/Right
    'ui.grid.selection', //data grid Select Rows
    'ui.grid.autoResize', //data grid Enabled auto column Size
    'ui.grid.exporter', //data grid Export Data
    'ui.grid.edit'
  ]);
})();

Controller :

app.controller('ProductsCtrl', ['$scope', 'CRUDService', 'uiGridConstants',
function ($scope, CRUDService, uiGridConstants) {
$scope.gridOptions = [];

//ui-Grid Call
$scope.GetProducts = function () {
$scope.gridOptions = {
enableCellSelection: true, // jenny changed to editable
enableCellEdit: false, // jenny changed to editable - to be set below ( setting to true doesnt work)
enableCellEditOnFocus: true, // jenny changed to editable
useExternalPagination: true,
useExternalSorting: true,
enableFiltering: true,
enableSorting: true,
enableRowSelection: true,
enableSelectAll: true,
enableGridMenu: true,

columnDefs: [
{
name: "ProductID",
displayName: "Product ID",
width: '10%',
headerCellClass: $scope.highlightFilteredHeader
},
{
name: "ProductTitle",
title: "Product Title",
width: '40%',
enableCellEdit: true, // jenny change to editable
headerCellClass: $scope.highlightFilteredHeader
},

更多列

Answer 1

根据文档，我们需要模块、标志和属性。

The ui.grid.edit feature allows inline editing of grid data. To enable, you must include the 'ui.grid.edit' module and you must include the ui-grid-edit directive on your grid element.

对于要启用/禁用的单个单元格，如果您不想启用所有列可编辑，请在列定义中使用如下内容:

{ name: 'address.city', enableCellEdit: true, }