UI-Grid 排序

距离上次写博客已经有一个月时间了，今天记录哈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();
    }]);

大家可以看到商品价格后面的 enableSorting: true就是是否排序。

当直接查询的时候是没有排序的，当点击商品价格的时候，会自动带参数向后台发送请求。如下图所示：

上面是直接查询的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  问题就解决了。如下图所示：