代码之家 › 专栏 › 技术社区 › indusBull

数据加载异步的BootstrapTable AngularJS扩展无法工作

bootstrap-table angularjs

indusBull · 技术社区 · 7 年前

我使用的是BootstrapTable AangularJS扩展 here

和 this plnkr 显示了与扩展一起使用的示例。但该示例使用了在呈现表之前生成的静态数据。但我正在尝试使其能够处理动态加载的数据(假设ajax请求)。但这不起作用。不呈现数据。

angular.module('app', ['bsTable'])
    .controller('MainController', function ($scope, $timeout) {

function makeRandomRows () {
    var rows = [];
    for (var i = 0; i < 500; i++) {
        rows.push(
          {
            index: i,
            id: 'row ' + i,
            name: 'GOOG' + i,
            flagImage: '4'
        }
        );
    }
    return rows;
}

$timeout(function(){
    console.log("timedout");
      $scope.bsTableControl.data  = makeRandomRows({ workspace: "test"});
}, 2000);

    var rows = makeRandomRows();

    $scope.bsTableControl = {
        options: {
            data: [],
            rowStyle: function (row, index) {
                return { classes: 'none' };
            },
            cache: false,
            height: 400,
            striped: true,
            pagination: true,
            pageSize: 10,
            pageList: [5, 10, 25, 50, 100, 200],
            search: true,
            showColumns: true,
            showRefresh: false,
            minimumCountColumns: 2,
            clickToSelect: false,
            showToggle: true,
            maintainSelected: true,
            columns: [{
                field: 'state',
                checkbox: true
            }, {
                field: 'index',
                title: '#',
                align: 'right',
                valign: 'bottom',
                sortable: true
            }, {
                field: 'id',
                title: 'Item ID',
                align: 'center',
                valign: 'bottom',
                sortable: true
            }, {
                field: 'name',
                title: 'Item Name',
                align: 'center',
                valign: 'middle',
                sortable: true
            }, {
                field: 'flag',
                title: 'Flag',
                align: 'center',
                valign: 'middle'
            }]
        }
    };

 });

<body ng-controller="MainController">
  <h1>Angular bsTable</h1>
  <div>
    <table bs-table-control="bsTableControl"></table>
  </div>

</body>

谢谢你的帮助。

1 回复 | 直到 7 年前

indusBull 7 年前

我想出了解决办法。我只需要在加载数据后执行bsTable初始化代码,而不是在之前初始化。

Updated plnkr

$timeout(function(){
        console.log("timedout");


            $scope.bsTableControl = {
            options: {
                data: makeRandomRows({ workspace: "test"}),
                rowStyle: function (row, index) {
                    return { classes: 'none' };
                },
                cache: false,
                height: 400,
                striped: true,
                pagination: true,
                pageSize: 10,
                pageList: [5, 10, 25, 50, 100, 200],
                search: true,
                showColumns: true,
                showRefresh: false,
                minimumCountColumns: 2,
                clickToSelect: false,
                showToggle: true,
                maintainSelected: true,
                columns: [{
                    field: 'state',
                    checkbox: true
                }, {
                    field: 'index',
                    title: '#',
                    align: 'right',
                    valign: 'bottom',
                    sortable: true
                }, {
                    field: 'id',
                    title: 'Item ID',
                    align: 'center',
                    valign: 'bottom',
                    sortable: true
                }, {
                    field: 'name',
                    title: 'Item Name',
                    align: 'center',
                    valign: 'middle',
                    sortable: true
                }, {
                    field: 'flag',
                    title: 'Flag',
                    align: 'center',
                    valign: 'middle'
                }]
            }
        };


    }, 2000);