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.

对于单个单元格来启用/禁用在列定义中使用类似下面的内容（如果你没有）;我想启用所有可编辑的列：

{ 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 NOT editing

2 个答案: