Question

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

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

当我尝试使用HTML标记来利用ng-repeat时，出现错误：“ 您无法将服务器端处理与Angular渲染器一起使用！”，因此我发现DTColumnBuilder服务器端处理是必需的。

我需要帮助的是：

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

组件中的html文件：

[New Thread 0x7ffff5f78700 (LWP 16392)]
Fatal Python error: drop_gil: GIL is not locked

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

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

从服务器返回json：

(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;
            }
        }
    }
}) ();

安全措施表component.js

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

Answer 1

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

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

1 个答案: