События для вычисляемых столбцов для таблиц AngularJS с использованием обработки на стороне сервера - PullRequest
Новая
       24

События для вычисляемых столбцов для таблиц AngularJS с использованием обработки на стороне сервера

0 голосов
/ 29 декабря 2018

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

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

Когда я пытался использовать HTML-разметку для использования ng-repeat, я получаю сообщение об ошибке: " Вы не можете использовать обработку на стороне сервера вместе с рендерингом Angular! " Так что я обнаружил, что DTColumnBuilder необходим для обработки на стороне сервера.

Мне нужна помощь:

  • Обновите значение на сервере, используя логику в _update, когда значение флажка изменяется.

HTML-файл в компоненте: 

<table datatable="" dt-options="satc.dtOptions" dt-columns="satc.dtColumns" 
    class="table table-bordered table-hover"> </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
}

таблица действий безопасности component.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: '&'
        }
    });

1 Ответ

0 голосов
/ 31 декабря 2018

Я решил вместо этого использовать событие щелчка строки.это закончилось тем примером, которому я следовал.https://l -lin.github.io / angular-datatables / архивы / #! / RowClickEvent

...