Question

我有一个包含一些动态列的ng-grid。并且数据绑定和网格的其他功能都运行良好。我在模板中有条件语句根据条件显示标签或文本框。

问题是

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

但是，当我双击单元格时，它会进入单元格编辑模式，如下所示

在IE 11中

同样的事情发生在标签和文本框中，当我输入某些内容时，它会转到单元格编辑模式，并且这些文本框不会触发有界事件。我已经指示验证只允许数字等。那些东西也不起作用。

但是在chrome中，如果我没有双击带有文本框的单元格，它将不会进入单元格编辑模式，一切运行良好。

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

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>"
            };

Answer 1

问题是...... 即使我在网格声明中提到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

                    };

其实这是我的错误..

ng-grid cell edit甚至可以禁用代码

1 个答案: