使用服务器端处理的 AngularJS 数据表的计算列事件

Question

我正在尝试连接分页数据table。它将显示所有可用选项，我希望每一行都有一个复选框，当更改时使用与模型关联的选项更新服务器。

我已经使用非服务器端处理数据测试了对服务器的更新调用table，并且更新工作正常。但是我不确定如何将运行时生成的列连接到我的组件中的函数。

当我尝试使用 HTML 标记来利用 ng-repeat 时，我收到错误消息：“您不能将服务器端处理与 Angular 渲染器一起使用！" 所以我发现服务器端处理需要DTColumnBuilder。

我需要帮助的是：

当复选框的值发生变化时，使用 _update 中的逻辑更新服务器上的值。

html 组件中的文件：

<table datatable="" dt-options="satc.dtOptions" dt-columns="satc.dtColumns" 
    class="table table-bordered table-hover"> </table>

数据table 控制器中组件的配置：

(function() {
    'use strict';

    angular.module(APPNAME).controller('SecurityActionTableController',
        SecurityActionTableController);

    SecurityActionTableController.$inject = ['$scope', '$baseController', '$claimsService', 'DTOptionsBuilder', 'DTColumnBuilder'];

    function SecurityActionTableController($scope, $baseController, $claimsService, DTOptionsBuilder, DTColumnBuilder) {
        var satc = this;
        $baseController.merge(satc, $baseController);
        satc.$claimsService = $claimsService;
        satc.update = _update;
        satc.isClaimActive = _isClaimActive
        satc.dtInstance = {};
        render();

        function render() {
            satc.dtOptions = DTOptionsBuilder.newOptions()
                .withFnServerData(get)
                .withDataProp('data')
                .withOption('processing', true)
                .withOption('serverSide', true)
                .withPaginationType('full_numbers');

            satc.dtColumns = [
                DTColumnBuilder.newColumn('selected').renderWith(function (data, type, full) {
                    return '<input type="checkbox" id=' + full.id + ' onChange="satc.update(full.id)" />';
                    // how does one hook up an onChange event for generated checkbox column?
                    // this might be the wrong approach but it's the closest thing i've found
                }).withTitle('Active'),
                DTColumnBuilder.newColumn('id').withTitle('Claim ID'),
                DTColumnBuilder.newColumn('claimValue').withTitle('Value'),
                DTColumnBuilder.newColumn('claimType').withTitle('Type'),
                DTColumnBuilder.newColumn('issuer').withTitle('Issuer'),
                DTColumnBuilder.newColumn('originalIssuer').withTitle('OriginalIssuer')
            ];
        };

        function get(sSource, aoData, fnCallback, oSettings) {
            var draw = aoData[0].value;
            var columns = aoData[1].value;
            var order = aoData[2].value;
            var start = aoData[3].value;
            var length = aoData[4].value;
            var search = aoData[5].value;
            var params = {
                start: start,
                length: length,
                draw: draw,
                order: order,
                search: search,
                columns: columns
            }
            satc.$claimsService.getDataTableClaims(params).then(function (response) {
                if (!response.data) {
                    console.log('error in datatable response');
                    return
                }
                fnCallback(response);
            });
        }

        function _update() {
            // this is being set by parent component and is working properly
            satc.onUpdate();
        }
        function _isClaimActive(claimId) {
            // satc.activeClaims is being set by parent component propertly
            if (satc.activeClaims && satc.activeClaims.length > 0) {
                return satc.activeClaims.filter(c => c.id == claimId).length > 0;
            } else {
                return false;
            }
        }
    }
}) ();

正在从服务器返回 json：

{
    "draw": 1,
    "recordsTotal": 1000,
    "recordsFiltered": 100,
    "data": [{
        "id": "1",
        "claimType": "http://www.somedomain.com/security/action",
        "claimValue": "AdditionalCompany",
        "claimValueType": "string",
        "issuer": "http://www.somedomain.com/",
        "originalIssuer": "http://www.somedomain.com/",
        "departments": [],
        "aspNetRoles": [],
        "aspNetUsers": []
    }, {
        "id": "10",
        "claimType": "http://www.somedomain.com/security/action",
        "claimValue": "AdditionalCompanyProduct.Create",
        "claimValueType": "string",
        "issuer": "http://www.somedomain.com/",
        "originalIssuer": "http://www.somedomain.com/",
        "departments": [],
        "aspNetRoles": [],
        "aspNetUsers": []
    }, {
        "id": "100",
        "claimType": "http://www.somedomain.com/security/action",
        "claimValue": "AspNetRoleClient.List",
        "claimValueType": "string",
        "issuer": "http://www.somedomain.com/",
        "originalIssuer": "http://www.somedomain.com/",
        "departments": [],
        "aspNetRoles": [],
        "aspNetUsers": []
    }, {
        "id": "101",
        "claimType": "http://www.somedomain.com/security/action",
        "claimValue": "AspNetRoleClient.Create",
        "claimValueType": "string",
        "issuer": "http://www.somedomain.com/",
        "originalIssuer": "http://www.somedomain.com/",
        "departments": [],
        "aspNetRoles": [],
        "aspNetUsers": []
    }, {
        "id": "102",
        "claimType": "http://www.somedomain.com/security/action",
        "claimValue": "AspNetRoleClient.Read",
        "claimValueType": "string",
        "issuer": "http://www.somedomain.com/",
        "originalIssuer": "http://www.somedomain.com/",
        "departments": [],
        "aspNetRoles": [],
        "aspNetUsers": []
    }, {
        "id": "103",
        "claimType": "http://www.somedomain.com/security/action",
        "claimValue": "AspNetRoleClient.Update",
        "claimValueType": "string",
        "issuer": "http://www.somedomain.com/",
        "originalIssuer": "http://www.somedomain.com/",
        "departments": [],
        "aspNetRoles": [],
        "aspNetUsers": []
    }, {
        "id": "104",
        "claimType": "http://www.somedomain.com/security/action",
        "claimValue": "AspNetRoleClient.Delete",
        "claimValueType": "string",
        "issuer": "http://www.somedomain.com/",
        "originalIssuer": "http://www.somedomain.com/",
        "departments": [],
        "aspNetRoles": [],
        "aspNetUsers": []
    }, {
        "id": "105",
        "claimType": "http://www.somedomain.com/security/action",
        "claimValue": "AspNetRoleClient.Admin",
        "claimValueType": "string",
        "issuer": "http://www.somedomain.com/",
        "originalIssuer": "http://www.somedomain.com/",
        "departments": [],
        "aspNetRoles": [],
        "aspNetUsers": []
    }, {
        "id": "106",
        "claimType": "http://www.somedomain.com/security/action",
        "claimValue": "AspNetUser",
        "claimValueType": "string",
        "issuer": "http://www.somedomain.com/",
        "originalIssuer": "http://www.somedomain.com/",
        "departments": [],
        "aspNetRoles": [],
        "aspNetUsers": []
    }, {
        "id": "107",
        "claimType": "http://www.somedomain.com/security/action",
        "claimValue": "AspNetUser.List",
        "claimValueType": "string",
        "issuer": "http://www.somedomain.com/",
        "originalIssuer": "http://www.somedomain.com/",
        "departments": [],
        "aspNetRoles": [],
        "aspNetUsers": []
    }],
    "error": null
}

安全操作tablecomponent.js

angular.
    module(APPNAME).
    component('securityActionTable', {  // This name is what AngularJS uses to match to the `<security-action-table>` element.
        templateUrl: '../Scripts/components/security-action-table/security-action-table.html',
        controller: 'SecurityActionTableController',
        controllerAs: 'satc',
        bindings: {
            activeClaims: '=',
            onUpdate: '&'
        }
    });

Answer 1

我决定改用行点击事件。这最终成为我效仿的例子。 https://l-lin.github.io/angular-datatables/archives/#!/rowClickEvent

使用服务器端处理的 AngularJS 数据表的计算列事件

Events for Computed Columns for AngularJS Datatables using Server-Side Processing

javascript

server-side

angularjs

angular-datatables