AngularJS ui-grid enableCellEdit 未编辑

Question

我正在努力学习AngularJS。

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

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

ProductTitle（下面第二列）是我使用的例子。

我在 Chrome 中没有收到任何错误。没有遗漏 libraries.

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

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

module:

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.

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

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

Answer 2

您需要在 html (ui-grid-edit ui-grid-row-edit)

上添加网格编辑

<div id="grid-create-profile" ui-grid="$ctrl.gridOptions" ui-grid-pagination ui-grid-cellNav ui-grid-edit ui-grid-row-edit ui-grid-resize-columns  ui-grid-selection class="grid"></div>

AngularJS ui-grid enableCellEdit 未编辑

AngularJS ui-grid enableCellEdit NOT editing

javascript

angularjs

ui-grid