Question

我有一个Angular.js智能表，其中数据源是使用$ resource的Ajax调用。我已经使用st-pipe来指定ajax函数，并且我使用了st-safe-src。

在init上，智能表完成ajax请求并加载表。

到目前为止很好但是......

我有两个问题......

1 - 我的默认排序列未在初始加载时应用。

2 - 我发现每次尝试通过单击列标题对数据进行排序时，智能表会触发新的Ajax调用以再次检索源数据。

我希望智能表能够对客户端进行排序，因此无需进行排序的ajax调用。我相信这就是st-safe-src的用途。我错了吗？

感谢有人可以帮我一把。

由于

这是我的控制器...

eposWebAngularStrutsApp.controller('StoreHealthCheckController', ['StoreServerHealth', function (StoreServerHealth) {
    var ctrl = this;
    this.rowCollection = []; // base collection
    this.displayedCollection = [];  // displayed collection

    this.callServer = function callServer(tableState) { 
        ctrl.isLoading = true;
        StoreServerHealth.query(function(result) {          
            ctrl.rowCollection = result;
            ctrl.displayedCollection = [].concat(ctrl.rowCollection);
            ctrl.isLoading = false;
          })
          .error(function () {
              ctrl.errorMsg = "An Error has occured while loading posts!";

         });
    };  
}]);

这是我的模板......

<div class="table-container" ng-controller="StoreHealthCheckController as mc">
<table st-table="mc.displayedCollection" st-safe-src="mc.rowCollection" st-pipe="mc.callServer" class="table table-striped ng-isolate-scope">
    <thead>
    <tr>
        <th st-sort-default="true" st-sort="locationId">Store</th>
        <th>Server</th>
        <th>Conn Status</th>
        <th>Last Updated</th>
        <th>MDI</th>
        <th>Last Synched (MDI)</th>
        <th>DSM</th>
        <th>Last Synched (DSM)</th>
        <th>Trading Status</th>
        <th>Build</th>
    </tr>
    </thead>
    <tbody ng-show="mc.isLoading">
    <tr>
        <td colspan="10" class="text-center">Loading ... </td>
    </tr>   
    </tbody>    
    <tbody ng-show="!mc.isLoading">
    <tr ng-repeat="row in mc.displayedCollection">
        <td>{{row.locationId}}</td>
        <td>{{row.clientId | clientIdToStoreServerType}}</td>
        <td>
            <img ng-src="img/{{row.status | statusToTrafficLightImage}}.png" alt="{{row.status}}"/>
        </td>
        <td>{{row.lastUpdateTime | date:'dd-MM-yyyy hh:mm:ss'}}</td>
        <td><img ng-src="img/{{row.replicationStatus | statusToTrafficLightImage}}.png" alt="{{row.replicationStatus}}"/></td>
        <td>{{row.lastReplicationSyncTime | date:'dd-MM-yyyy hh:mm:ss'}}</td>
        <td><img ng-src="img/{{row.dsmReplicationStatus | statusToTrafficLightImage}}.png" alt="{{row.dsmReplicationStatus}}"/></td>
        <td>{{row.dsmLastSynchTime | date:'dd-MM-yyyy hh:mm:ss' }}</td>
        <td>{{row.storeTradingStatus | tradingStatusCodeToTradingStatus}}</td>
        <td>{{row.buildVersion}}</td>
        <td>
            <button type="button" ng-click="removeRow(row)" class="btn btn-sm btn-primary">
                <i class="fa fa-bolt"></i>              
            </button>
            <button type="button" ng-click="removeRow(row)" class="btn btn-sm btn-primary">
                <i class="fa fa-desktop"></i>
            </button>
            <button type="button" ng-click="removeRow(row)" class="btn btn-sm btn-primary">
                <i class="fa fa-server"></i>
            </button>
            <button type="button" ng-click="removeRow(row)" class="btn btn-sm btn-primary">
                <i class="fa fa-info-circle"></i>               
            </button>                                   
        </td>           
    </tr>
    </tbody>
</table>
</div>

感谢

Answer 1

我通过从表定义中取出st-pipe并按照以下方式更改控制器来解决这个问题......

eposWebAngularStrutsApp.controller('StoreHealthCheckController', ['StoreServerHealth', function (StoreServerHealth) {

    var ctrl = this;
    ctrl.rows = [];
    ctrl.displayedRows = [];

    ctrl.isLoading = true;
    StoreServerHealth.query(function(result) {          
        console.log(result);
        ctrl.rows = result;
        ctrl.displayedRows = [].concat(ctrl.rows);
        ctrl.isLoading = false;
    });  


}]);

总而言之，我不知道st-pipe的用途。

尝试对智能表进行排序时会触发新的ajax调用

1 个答案: