ng-grid单元格编辑甚至可以从代码中禁用

我有一个带有一些动态列的ng-grid。网格的数据绑定和其他功能运行良好。我在我的模板中有条件语句根据条件显示标签或文本框。ng-grid单元格编辑甚至可以从代码中禁用

问题是

在chorme .. 的标签正确显示如下图所示

但是当我双击它进入到单元格编辑模式作为细胞低于

在IE 11中

同样的事情发生在标签和文本框，当我输入的东西它进入单元格编辑模式和有界的事件不会触发这些文本框。我的验证指令只允许数字等。这些东西也不起作用。

但在铬，如果我不要双击一个文本框的细胞也不会去细胞编辑模式，一切正常。

这是我的动态定义网格列的代码。

function prepareGridColumns() { 

       var dtLength = $scope.dateList.length; 
       $scope.columnDefinitions.length = 0; 
       $scope.columnDefinitions = [ 
        { 
         field: 'Item', 
         displayName: 'Item', 
         width: '25%' 
        }, 
        { 
         field: 'SupplierName', 
         displayName: 'Supplier', 
         width: '15%' 
        }, 
        { 
         field: 'Total', 
         displayName: 'Total', 
         width: '6%' 
        }, 
         { 
          field: 'Variance', 
          displayName: 'Variance', 
          width: '6%' 
         } 


       ]; 

       var colWidth = 0; 
       if (dtLength > 0) 
        colWidth = 50/dtLength; 
       //var cWidth = colWidth.toString() + "%"; 

       for (var i = 0; i < dtLength; i++) { 

        var newcol = { 
         field: $scope.dateList[i].field, 
         displayName: $scope.dateList[i].displayName, 
         cellTemplate: 
          '<div class="ngCellText" > <input type="text" ng-if="!controlGridCol(row.entity)" only-number decimal-upto="4" data-ng-model="row.entity.' + 
           $scope.dateList[i].field + 
           '" class="form-control input-lg" ng-keyup="calculateForward(row.entity,col.field,row.entity.' + 
           $scope.dateList[i].field + 
           ')" ng-disabled="controlGridCol(row.entity)" ng-readonly="controlGridCol(row.entity)">' + 
           '<label ng-if="controlGridCol(row.entity)" data-ng-bind="row.entity.' + 
           $scope.dateList[i].field + 
           '"></label></div>', 
         width: '60px', 
         enableCellEdit: true 

        }; // '<div class="ngCellText">{{row.getProperty(col.field)}}</div>' 
        $scope.columnDefinitions.push(newcol); 

       } 

       if (!$scope.$$phase) 
        $scope.$apply(); 

      };

这里是电网

$scope.tGrid = { 
       data: 'gridDataList', 
       multiSelect: false, 

       enableCellEdit: false, 
       enableColumnResize: true, 
       enableCellSelection: true, 


       plugins: [new ngGridFlexibleHeightPlugin()], 

       rowTemplate: '<div style="height: 100%" ng-class="colorRow(row.getProperty(\'Variance\'))"><div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell ">' + 
        '<div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }"> </div>' + 
        '<div ng-cell></div>' + 
        '</div></div>', 
       columnDefs: 'columnDefinitions', 
       //enablePaging: true, 
       showFooter: true, 
       rowHeight: 40, 

       footerTemplate: "<div ng-show=\"showFooter\" class=\"ngFooterPanel\" ng-class=\"{'ui-widget-content': jqueryUITheme, 'ui-corner-bottom': jqueryUITheme}\" ng-style=\"footerStyle()\">" + 
        " <div class=\"ngTotalSelectContainer\" >" + 
        "  <div class=\"ngFooterTotalItems\" ng-class=\"{'ngNoMultiSelect': !multiSelect}\" >" + 
        "   <span class=\"ngLabel\">{{i18n.ngTotalItemsLabel}} {{maxRows()}}</span><span ng-show=\"filterText.length > 0\" class=\"ngLabel\">({{i18n.ngShowingItemsLabel}} {{totalFilteredItemsLength()}})</span>" + 
        "  </div>" + 
        "  <div class=\"ngFooterSelectedItems\" ng-show=\"multiSelect\">" + 
        "   <span class=\"ngLabel\">{{i18n.ngSelectedItemsLabel}} {{selectedItems.length}}</span>" + 
        "  </div>" + 
        " </div>" + 
        "</div>" 
      };

来源

2017-09-12 tarzanbappa

与您的问题plunker请张贴演示。谢谢 –

的问题是.. 即使我已经在我的网声明提到enableCellEdit: false的代码，我在我的动态列生成其设置为true。

var newcol = { 
         field: $scope.dateList[i].field, 
         displayName: $scope.dateList[i].displayName, 
         cellTemplate: 
          '<div class="ngCellText" > <input type="text" ng-if="!controlGridCol(row.entity)" only-number decimal-upto="4" data-ng-model="row.entity.' + 
           $scope.dateList[i].field + 
           '" class="form-control input-lg" ng-keyup="calculateForward(row.entity,col.field,row.entity.' + 
           $scope.dateList[i].field + 
           ')" ng-disabled="controlGridCol(row.entity)" ng-readonly="controlGridCol(row.entity)">' + 
           '<label ng-if="controlGridCol(row.entity)" data-ng-bind="row.entity.' + 
           $scope.dateList[i].field + 
           '"></label></div>', 
         width: '60px', 
         enableCellEdit: true // I've declared column with 
               // Cell Edit enabled 

        };

其实这是我的错误..

来源

2017-09-13 10:48:24 tarzanbappa

ng-grid单元格编辑甚至可以从代码中禁用

回答

相关问题