距離上次寫部落格已經有一個月時間了，今天記錄哈angularJS中排序問題。

要求是點選商品價格可以進行升序或降序進行排序。

先上一段程式碼：

app.controller('newProductController', [
    '$scope','newProductService', 'gridDecorator','subject','datePickerDecorator', 'modalDecorator','selectDecorator','forwardDecorator', '$state','$window','$timeout', function($scope,newProductService, gridDecorator,subject,datePickerDecorator, modalDecorator,selectDecorator,forwardDecorator, $state,$window,$timeout) {
        var 
 
gridOptions = {
            columnDefs: [
                { name: 'id',displayName:'編號' },
                { name: 'onlineProductId',displayName:'商品ID' },
                { name: 'name',displayName:'商品名稱'},
                { name: 'showPosition',displayName:'全部位置',cellFilter: 'newProductShowPositionTypeFormat'
 
,minWidth:120,minWidth:120},//,cellFilter: 'newProductCatalogTypeFormat',minWidth:70,maxWidth:70
{ name: 'fromFirst',displayName:'商品來源',cellFilter: 'newProductfromFirstTypeFormat'},
                { name: 'status',displayName:'狀態',cellFilter: 'newProductStatusTypeFormat'},
                { name: 'coinPrice'
 
,displayName:'商品價格',minWidth:90,enableSorting: true},//useExternalSorting是否自定義排序
{ name: 'startDate',displayName:'開始時間',minWidth:140 ,enableSorting: true},//enableSorting是否排序
{ name: 'endDate',displayName:'結束時間',minWidth:140 ,enableSorting: true},
                { name: 'classifyFirst',displayName:'商品分類',minWidth:100 },
                { name: 'operation',displayName:'操作', enableSorting: false,minWidth:240,
                    cellTemplate:'<div align="left" style="margin-left: 10px;">' +
                    '<button class="btn btn-info" type="button" ng-click="grid.appScope.edit(row.entity.id)" >編輯</button> '+
                    '<button type="button"  class="btn btn-danger"  ng-click="grid.appScope.delete(row.entity.id)">刪除</button> </div>'}
            ],
            simple:false
};
        //在這裡進行商品價格排序
        //orderBy:sortFlag;
var id = !subject.authenticationInfo.credentials.customerId? -1 : subject.authenticationInfo.credentials.customerId;
        var searchOption = {customerId:id};
        var gridDecorator = gridDecorator.getInstance(newProductService,searchOption,gridOptions,$scope,"newProduct");
        gridDecorator.autoDecorate();

        //填充商品來源下拉框
selectDecorator.getInstance(null, platformConstants.fromFirst, $scope, "fromFirst").autoDecorate();
        ////填充商品狀態下拉框
selectDecorator.getInstance(null, platformConstants.status, $scope, "status").autoDecorate();
        ////填充全部分類下拉框
        //selectDecorator.getInstance(null, platformConstants.expireFlag, $scope, "expireFlag").autoDecorate();
        //刪除的預覽初始化裝飾器 ,將gridDecorator傳入做回撥,新建和編輯交給forward裝飾器做處理(這是刪除的新增)
modalDecorator.getInitInstance(newProductService,{},$scope,"newProduct",gridDecorator).autoDecorate();

        //將覆蓋modal裝飾器渲染的新建和編輯行為（會自行跳轉到編輯頁面）
forwardDecorator.getInitInstance(newProductService, {templateCuUrl: 'tvpublish.newproduct.edit'}, $scope, "newProduct").autoDecorate();
    }]);

當直接查詢的時候是沒有排序的，當點選商品價格的時候，會自動帶引數向後臺傳送請求。如下圖所示：

上面是直接查詢的url,下面是點選商品價格時的url。

大家可以看到此處的引數就是name: 'coinPrice'，而這個coinPrice就是後臺商品價格的屬性名稱，而最後去查詢的時候sql語句會變成

SELECT tnp.new_product_id, tnp.online_product_id, tnp.coin_price , tnp.intergration_price, tnp.name, tnp.start_date AS startDate, tnp.end_date AS endDate, tnp.create_date, tnp.create_by, tnp.update_date, tnp.update_by, tnp.status, tnp.classify_first, tnp.classify_second, tnp.from_first, tnp.from_second, tnp.show_position, u.name AS createNameBy, u1.name AS updateNameBy FROM tv_new_product tnp LEFT JOIN sys_t_user u ON tnp.create_by = u.id LEFT JOIN sys_t_user u1 ON tnp.update_by = u1.id WHERE 1 = 1 order by coinPrice asc limit ?,?

此時要注意最後的order by coinPrice asc  而這個引數就是前臺帶過來的  但是我的表中並沒有coinPrice這個欄位，此時報一個錯誤：

這個意思是說沒有coinPrice這個欄位。

解決方法：剛開始我的想法是在前臺進行轉換，但是我並沒有找到一個屬性可以把coinPrice轉換成coin_price帶過來，後來我直接把sql中的tnp.coin_price起個別名，換成tnp.coin_price as coinPrice  問題就解決了。如下圖所示：