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  问题就解决了。如下图所示：