代码之家 › 专栏 › 技术社区 › Aric Peters

从angular ui网格更新数据库

angular-ui-grid postgresql database node.js angularjs

Aric Peters · 技术社区 · 6 年前

当用户单击角度ui网格中的删除按钮时,我正在尝试更改数据库中的一行。单击按钮时,应将该行从网格中删除,并使用值更新数据库中的表,以便该行不再显示在网格中,但仍将显示在数据库中(软删除)。我的表名为“应聘者”,其中有行id、firstname、lastname、email、position、resume和deleted。Deleted是默认为false的布尔列,如果为true,则该行不应出现在我的ui网格中。我已经完成了这一部分,但是当按下网格上的按钮时,我无法获得更新数据库中已删除列的代码。这是网格的控制器(从数据库中获取申请人):

angular.module('myApp')
.controller('gridController',['$scope','$http','$log',function ($scope, $http,$log){

    $scope.deleteRow = function(row) {
        var index = $scope.gridOptions.data.indexOf(row.entity);
        $scope.gridOptions.data.splice(index, 1);


        $http({
            method:'POST',
            url:'/directives/updateApplicant'
        })
    }

    $scope.gridOptions = {
        enableFiltering:true,
        columnDefs: [
            {name: 'id', field:'id'},
            {name:'firstName',field:'firstName'},
            {name:'lastName',field:'lastName'},
            {name:'email',field:'email'},
            {name:'position',field:'position'},
            {name:'resume', field:'resumeFileName', cellTemplate:'<div class="ui-grid-cell-contents"><a href="/directives/resume/{{COL_FIELD}}" target="_self">{{ COL_FIELD }}</a></div>'},
            {name:'delete',cellTemplate: '<button class="btn primary" ng-click="grid.appScope.deleteRow(row)">Delete</button>', enableFiltering:false}
        ]
    }

    $scope.data = []
    $http({
        method:'GET',
        url:'/directives/applicants'
    }).then(function(success){
        $scope.gridOptions.data = success.data;
    },function(reason){
        $scope.error = reason.data;
        $log.info(reason);
    })
}])

当它到达邮局路线时,此代码将运行:

module.exports.updateApplicant = function(req,res){
    applicant.forge({id: '31'})
    .fetch({require:true})
    .then(function(applicant){
        applicant.save({
            deleted:'true'
        })

    .then(function(){
        res.json({error:false,data:{message:'applicant details updated'}})
    })
    .catch(function(err){
        res.status(500).json({error:true, data:{message: err.message}})
    });
    })
    .catch(function(err){
        res.status(500).json({error:true,data:{message:err.message}})
    })
}

这很好。唯一的问题是我把身份证硬编码了。是否有办法将ID从网格中的选定行传递给此变量?

1 回复 | 直到 6 年前

SunriseM 6 年前

单击按钮时发送http请求

    $scope.deleteRow = function(row) {
      var index = $scope.gridOptions.data.indexOf(row.entity);
      $scope.gridOptions.data.splice(index, 1);


      $http({
        method:'POST',
        url:'/directives/updateApplicant',
        data: $scope.gridOptions.data[index],
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
      }).success(function (data, status, headers, config) {
            console.log("success");
      }).error(function (data, status, headers, config) {
           console.log(status);
      })
  }

您需要安装body解析器并将其用作中间件( app.use(bodyParser.urlencoded({ extended: false }) )获取立柱主体。

module.exports.updateApplicant = function(req,res){

    var bid = req.body.id;         

    applicant.forge({id: bid})
    .fetch({require:true})
    .then(function(applicant){
        applicant.save({
            deleted:'true'
        })

    .then(function(){
        res.json({error:false,data:{message:'applicant details updated'}})
    })
    .catch(function(err){
        res.status(500).json({error:true, data:{message: err.message}})
    });
    })
    .catch(function(err){
        res.status(500).json({error:true,data:{message:err.message}})
    })
}