я использую ng-grid, который загружает данные из файла json, я хочу сделать кнопки редактирования и удаления, чтобы редактировать и удалять мои данные, используя угловой js?

0

я уже создал кнопку редактирования, но когда я нажимаю на кнопку и редактирую свои данные, она не находит отражение в строке, в которой она скрывает предыдущие данные, я хочу реализовать функциональность, которая позволяет мне редактировать данные, которые ранее были сохранены в строка и показать и отразить изменения, сделанные мной в строке, нажав кнопку редактирования снова

вот мой код main.js

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope, $http) {

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

    $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();
        }
    };
    $scope.getPagedDataAsync = function (pageSize, page, searchText) {
        setTimeout(function () {
            var data;
            if (searchText) {
                var ft = searchText.toLowerCase();
                $http.get('largeLoad.json').success(function (largeLoad) {
                    data = largeLoad.filter(function(item) {
                        return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                    });
                    $scope.setPagingData(data,page,pageSize);
                });
            } else {
                $http.get('largeLoad.json').success(function (largeLoad) {
                    $scope.setPagingData(largeLoad,page,pageSize);
                });
            }
        }, 100);
    };

    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);

    $scope.$watch('pagingOptions', function (newVal, oldVal) {
        if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
            $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
        }
    }, true);
    $scope.$watch('filterOptions', function (newVal, oldVal) {
        if (newVal !== oldVal) {
            $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
        }
    }, true);

    $scope.edit = function (row) {
        row.entity.edit = !row.entity.edit;
    };

    $scope.gridOptions = {
        data: 'myData',
        enableRowSelection: false,
        enablePaging: true,
        showFooter: true,
        totalServerItems:'totalServerItems',
        pagingOptions: $scope.pagingOptions,
        filterOptions: $scope.filterOptions,
        columnDefs: [{
            field: 'nm',
            displayName: 'Name',
            cellTemplate: '<div class="ngCellText"><div ng-show="!row.entity.edit">{{row.getProperty(col.field)}}</div>' +
            '<div ng-show="row.entity.edit" class="ngCellText"><input type="text" ng-model="row.entity.name"/></div></div>'
        },
            {
            field: 'cty',
            displayName: 'city',
            cellTemplate: '<div class="ngCellText"><div ng-show="!row.entity.edit">{{row.getProperty(col.field)}}</div>' +
            '<div ng-show="row.entity.edit" class="ngCellText"><input type="text" ng-model="row.entity.city"/></div></div>'
        },
            {
            field: 'hse',
            displayName: 'Address',
            cellTemplate: '<div class="ngCellText"><div ng-show="!row.entity.edit">{{row.getProperty(col.field)}}</div>' +
            '<div ng-show="row.entity.edit" class="ngCellText"><input type="text" ng-model="row.entity.Address"/></div></div>'
            },

            {
                field: 'yrs',
                displayName: 'PinCode',
                cellTemplate: '<div class="ngCellText"><div ng-show="!row.entity.edit">{{row.getProperty(col.field)}}</div>' +
                '<div ng-show="row.entity.edit" class="ngCellText"><input type="text" ng-model="row.entity.PinCode"/></div></div>'
            },
         {
            displayName: 'Edit',
            cellTemplate: '<button id="editBtn" type="button" class="btn btn-primary" ng-click="edit(row)" >Modify</button> '

        }]
    };

});

вы можете увидеть его на плункере ниже, это ссылка

http://plnkr.co/edit/QbsQ6uDgNxts9TUMERj2?p=preview

2 ответа

0

в вашей скрипке измените свой main.js на follownig (я изменил ng-модель)

определение сетки

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope, $http) {

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

    $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();
        }
    };
    $scope.getPagedDataAsync = function (pageSize, page, searchText) {
        setTimeout(function () {
            var data;
            if (searchText) {
                var ft = searchText.toLowerCase();
                $http.get('largeLoad.json').success(function (largeLoad) {
                    data = largeLoad.filter(function(item) {
                        return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                    });
                    $scope.setPagingData(data,page,pageSize);
                });
            } else {
                $http.get('largeLoad.json').success(function (largeLoad) {
                    $scope.setPagingData(largeLoad,page,pageSize);
                });
            }
        }, 100);
    };

    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);

    $scope.$watch('pagingOptions', function (newVal, oldVal) {
        if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
            $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
        }
    }, true);
    $scope.$watch('filterOptions', function (newVal, oldVal) {
        if (newVal !== oldVal) {
            $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
        }
    }, true);

    $scope.edit = function (row) {
        row.entity.edit = !row.entity.edit;
    };

    $scope.gridOptions = {
        data: 'myData',
        enableRowSelection: false,
        enablePaging: true,
        showFooter: true,
        totalServerItems:'totalServerItems',
        pagingOptions: $scope.pagingOptions,
        filterOptions: $scope.filterOptions,
        columnDefs: [{
            field: 'nm',
            displayName: 'Name',
            cellTemplate: '<div class="ngCellText"><div ng-show="!row.entity.edit">{{row.entity.nm}}</div>' +
            '<div ng-show="row.entity.edit" class="ngCellText"><input type="text" ng-model="row.entity.nm"/></div></div>'
        },
            {
            field: 'cty',
            displayName: 'city',
            cellTemplate: '<div class="ngCellText"><div ng-show="!row.entity.edit">{{row.entity.cty}}</div>' +
            '<div ng-show="row.entity.edit" class="ngCellText"><input type="text" ng-model="row.entity.cty"/></div></div>'
        },
            {
            field: 'hse',
            displayName: 'Address',
            cellTemplate: '<div class="ngCellText"><div ng-show="!row.entity.edit">{{row.entity.hse}}</div>' +
            '<div ng-show="row.entity.edit" class="ngCellText"><input type="text" ng-model="row.entity.hse"/></div></div>'
            },

            {
                field: 'yrs',
                displayName: 'PinCode',
                cellTemplate: '<div class="ngCellText"><div ng-show="!row.entity.edit">{{row.entity.yrs}}</div>' +
                '<div ng-show="row.entity.edit" class="ngCellText"><input type="text" ng-model="row.entity.yrs"/></div></div>'
            },
         {
            displayName: 'Edit',
            cellTemplate: '<button id="editBtn" type="button" class="btn btn-primary" ng-click="edit(row)" >Modify</button> '

        }]
    };

});
  • 0
    спасибо, это работает так, как я хотел, так как я очень новичок, я не понимаю, что именно вы сделали в моем коде, и где я ошибался, тем не менее, спасибо за исправление.
  • 0
    Пожалуйста, примите ответ, но изменение в вашем коде меняет cellTemplate в определении ng-grid на cellTemplate: '<div class = "ngCellText"> <div ng-show = "! row.entity.edit"> {{ row.entity.yrs}} </ div> '+' <div ng-show = "row.entity.edit" class = "ngCellText"> <input type = "text" ng-model = "row.entity.yrs «/> </ DIV> </ DIV>»
Показать ещё 3 комментария
0

Вы не сохраняете данные нигде, то, что я вижу в вашем файле js, заключается в том, что вы просто создаете строку Редактируемая и не редактируемая на клике вашей кнопки

row.entity.edit = !row.entity.edit;

добавить код для сохранения данных в сущности или попробовать

http://brianhann.com/create-a-modal-row-editor-for-ui-grid-in-minutes/

который решит вашу проблему

  • 0
    я должен просто сделать его редактируемым и недоступным для редактирования только одним нажатием кнопки, поскольку я играю с фиктивными данными, проблема, с которой я сталкиваюсь, заключается в том, что когда моя строка становится редактируемой, она становится пустой, я просто хочу, чтобы она отображалась мои данные, так что я могу отредактировать их, и они должны показать мои отраженные изменения также за это среднее время

Ещё вопросы

Сообщество Overcoder
Наверх
Меню