在ng-grid中编辑单元格无法正常工作

时间:2014-12-18 05:25:52

标签: angularjs ng-grid

我在ng-grid编辑单元格中遇到问题。当我双击单元格并开始输入...我不能输入多个字符或数字! 这是链接http://plnkr.co/edit/P3iujTWmQCwEDolcaPwC?p=preview

有什么建议吗? http://plnkr.co/edit/P3iujTWmQCwEDolcaPwC?p=preview var app = angular.module('myApp',['ngGrid']);         应用                 .controller(                         'MyCtrl',                         函数($ scope){

                        var name;
                        var age;
                        var birthday;
                        var salary;
                        var x;
                        $scope.submit = function() {
                            name = $scope.name;
                            age = $scope.age;
                            birthday = $scope.birthday;
                            salary = $scope.salary;

                            $scope.myData.push({
                                name : name,
                                age : age,
                                birthday : birthday,
                                salary : salary
                            });

                            // $scope.myData   = $scope.myData +x;
                        };

                        $scope.myData = [ {
                            name : "Moroni",
                            age : 50,
                            birthday : "Oct 28, 1970",
                            salary : "60,000"
                        }, {
                            name : "Tiancum",
                            age : 43,
                            birthday : "Feb 12, 1985",
                            salary : "70,000"
                        }, {
                            name : "Jacob",
                            age : 27,
                            birthday : "Aug 23, 1983",
                            salary : "50,000"
                        }, {
                            name : "Nephi",
                            age : 29,
                            birthday : "May 31, 2010",
                            salary : "40,000"
                        }, {
                            name : "Enos",
                            age : 34,
                            birthday : "Aug 3, 2008",
                            salary : "30,000"
                        }, {
                            name : "Moroni",
                            age : 50,
                            birthday : "Oct 28, 1970",
                            salary : "60,000"
                        }, {
                            name : "Tiancum",
                            age : 43,
                            birthday : "Feb 12, 1985",
                            salary : "70,000"
                        }, {
                            name : "Jacob",
                            age : 27,
                            birthday : "Aug 23, 1983",
                            salary : "40,000"
                        }, {
                            name : "Nephi",
                            age : 29,
                            birthday : "May 31, 2010",
                            salary : "50,000"
                        }, {
                            name : "Enos",
                            age : 34,
                            birthday : "Aug 3, 2008",
                            salary : "30,000"
                        }, {
                            name : "Moroni",
                            age : 50,
                            birthday : "Oct 28, 1970",
                            salary : "60,000"
                        }, {
                            name : "Tiancum",
                            age : 43,
                            birthday : "Feb 12, 1985",
                            salary : "70,000"
                        }, {
                            name : "Jacob",
                            age : 27,
                            birthday : "Aug 23, 1983",
                            salary : "40,000"
                        }, {
                            name : "Nephi",
                            age : 29,
                            birthday : "May 31, 2010",
                            salary : "50,000"
                        }, {
                            name : "Enos",
                            age : 34,
                            birthday : "Aug 3, 2008",
                            salary : "30,000"
                        } ];
                        $scope.gridOptions = {

                            data : 'myData',
                            pagingOptions : $scope.pagingOptions,
                            enablePinning : true,
                            enablePaging : true,
                            columnDefs : [
                                    {
                                        field : "name",
                                        width : 220,
                                        pinned : true,
                                        enableCellEdit : true
                                    },
                                    {
                                        field : "age",
                                        width : 200,
                                        enableCellEdit : true
                                    },
                                    {
                                        field : "birthday",
                                        width : 200,
                                        enableCellEdit : true
                                    },
                                    {
                                        field : "salary",
                                        width : 220,
                                        enableCellEdit : true, 
                                        cellTemplate :basicCellTemplate
                                    },
                                    {
                                        field : "Action",
                                        width : 200,
                                        enableCellEdit : false,
                                        cellTemplate : '<button id="editBtn" type="button" class="btn btn-xs btn-info"  ng-click="saveItem(row.entity.name, row.entity.surname,row.entity.address)" >Save</button>'
                                    } ]

                        };

                            $scope.selectedCell;
                            $scope.selectedRow;
                            $scope.selectedColumn;

                            $scope.editCell = function (row, cell, column){
                                $scope.selectedCell = cell;
                                $scope.selectedRow = row;
                                $scope.selectedColumn = column;
                              };

                              $scope.updateCell = function(){
                                  $scope.selectedRow[$scope.selectedColumn] = $scope.selectedCell;
                              };

                          var basicCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()" ng-click="editCell(row.entity, row.getProperty(col.field), col.field)"><span class="ui-disableSelection hover">{{row.getProperty(col.field)}}</span></div>';

                        $scope.filterOptions = {
                            filterText : "",
                            useExternalFilter : true
                        };

                        $scope.gridOptions.sortInfo = {
                            fields : [ 'name', 'age' ],
                            directions : [ 'asc' ],
                            columns : [ 0, 1 ]
                        };

                        $scope.totalServerItems = 0;

                        $scope.pagingOptions = {
                            pageSizes : [ 5, 10, 20 ],
                            pageSize : 5,
                            currentPage : 1
                        };
                        $scope.setPagingData = function(data, page,
                                pageSize) {
                            var pagedData = data.slice((page - 1)
                                    * pageSize, page * pageSize);
                            $scope.myData = pagedData;
                            $scope.totalServerItems = data.length;
                            if (!$scope.$$phase) {
                                $scope.$apply();
                            }
                        };

                    });`

1 个答案:

答案 0 :(得分:0)

gridOptionsenableCellSelectiontrue

$scope.gridOptions = {

                            data : 'myData',
                            pagingOptions : $scope.pagingOptions,
                            enablePinning : true,
                            enablePaging : true,
                            enableCellSelection:true,
                            columnDefs : [...

这是您的分叉Plunker