数据源控件

配置参数

数据源一共分为两种,一种是普通数据源,一种是分页数据源,通过在标签上

    <g-data-source page="true"></g-data-source>

配置page来进行区分。

普通数据源

普通数据源需要配置以下参数:

参数名 含义 是否必须 备注
url 数据源请求地址 Y
source-name 数据源名称 Y
page 是否是分页数据源,默认为false N 值:true,false
params 请求参数 N params在进行修改后,会自动刷新后台数据源,可为一个函数
records-prop 绑定的数据字段名称 N 在http请求响应后,绑定到响应数据上的一个属性值
allow-auto-load 是否自动加载 N 默认为:false,若设置为true,则分页或其他参数改变时,会自动加载数据,若为false,则需要自己手动调用doRequestData方法进行加载

分页数据源

参数名 含义 是否必须 备注
url 数据源请求地址 Y
source-name 数据源名称 Y
page 是否是分页数据源,默认为false N 值:true,false,true为分页数据源
params 请求参数 N params在进行修改后,会自动刷新后台数据源,当前页面自动修改为1,可为一个函数
page-size 分页大小 N 默认为10页,修改后,修改后自动更新数据源,当前页面自动修改为1
current-page 当前页 N 默认为1,修改后自动更新数据源
sort-name 排序字段名称 N 修改后自动更新数据源
sort-direction 排序方向 N 值为ASC或DESC,修改后自动更新数据源
total-record-prop 总记录数量字段名称 N 默认为:totalRecord后台响应时,自动根据配置的字段名称,更新总记录数量
records-prop 绑定的数据字段名称,默认为records N 在http请求响应后,绑定到响应数据上的一个属性值
page-size-param 分页大小字段名称 N 默认为:pageSize,在进行请求时,会根据配置的page-size-field发送对应的请求参数
current-page-param 当前页字段名称 N 默认为:currentPage,在进行请求时,会根据配置的current-page-field发送对应的请求参数
sort-name-param 排序字段接收参数名称 N 默认为:sortName,在进行请求时,会根据配置的sort-name-param发送对应的请求参数
sort-direction-param 排序方向接收参数名称 N 默认为:sortDirection,在进行请求时,会根据配置的sort-direction-param发送对应的请求参数
more-attrs-prop 额外数据 N 默认为:moreAttrs,在响应时,会根据配置的more-attrs自动注入数据
allow-auto-load 是否自动加载 N 默认为:false,若设置为true,则分页或其他参数改变时,会自动加载数据,若为false,则需要自己手动调用doRequestData方法进行加载

controller与控件中对数据源的调用方式

在controller中,若要调用数据源,则需要使用以下步骤

  1. 注入$dataSourceManager服务
  2. 使用$dataSourceManager根据不同的数据源名称获取数据源,在promise中进行操作

以下给出一个例子,具体内容如下:

1.HTML中,注册一个数据源

<g-data-source 
    url="/sebusiness/student" 
    page-size="10" 
    current-page="1" 
    data-params="testParams"  
    data-source-name="source1"
    page="true"
    >
    </g-data-source>

2.在controller中使用数据源

TestDataSourceModule.controller("DSController", function($scope, $dataSourceManager) {
      $dataSourceManager.getDataSource("source1").then(function(dataSource) {
        $scope.nextPage = function() {
          dataSource.currentPage = dataSource.currentPage + 1;
        };
        $scope.setParams = function() {
          return dataSource.params = function() {
            return {
              name: "hello "
            };
          };
        };
        return $scope.setPageSize = function() {
          dataSource.pageSize = 20;
        };
      });
    });

在控件中的使用:

TestDataSourceModule.directive("gTestDataSource", function($dataSourceManager, $q) {
      return {
        restrict: "E",
        template: "<div><div>{{dataSource1.source}}</div><div>{{dataSource2.source}}</div></div>",
        scope: {
          sourceRef1: "@",
          sourceRef2: "@"
        },
        replace: true,
        link: function($scope) {
                  $dataSourceManager.getDataSource($scope.sourceRef1).then(function(dataSource) {
              $scope.dataSource1 = dataSource;
          });
          $dataSourceManager.getDataSource($scope.sourceRef2).then(function(dataSource) {
              $scope.dataSource2 = dataSource;
          });
        }
      };
    });

在页面中的使用:

<div ng-repeat="item in dataSources.source1.records" ng-cloak>
        {{item}}
</div>

数据源对象属性

目前默认只有两种数据源,都是从后台进行请求,一种分页,一种非分页。初始化完成后,统计将数据源对象存入到$dataSourceManager中,
其中

$dataSourceManager提供以下方法与属性

名称 类型 备注
dataSources property 存放数据源的集合
defereds property 注册数据源时,使用的defereds集合
registerDataSource method 注册一个数据源,传入数据源名称和数据源对象,进行注册,两个参数。registerDataSource:(name,dataSource)
removeDataSource method 根据数据源名称,移除数据源
getDataSource method 根据数据源名称,获取数据源的promise

简单数据源提供一下属性与方法:

名称 类型 备注
sourceName property 数据源名称
url property 数据源请求的url地址
records property 数据源的数据
params property 数据源的请求参数
doRequestData method 发起一个请求,有二个可选参数(params,callback)

分页数据源提供以下属性与方法:

名称 类型 备注
sourceName property 数据源名称
url property 数据源请求的url地址
records property 数据源的数据
totalRecord property 总记录数
totalPage property 总页数
pageSize property 分页大小
currentPage property 当前分页
params property 请求参数
sortName property 排序字段名称
sortDirection property 排序字段方向
doRequestData method 传入三个参数(page,params,callback),第一个为页码,第二个为请求参数,第三个为回调

也支持自定义数据源,请参考以下方式实现:

/*简单数据源 */
    DataSource = (function() {
      function DataSource($scope1, $dataSourceManager1) {
        this.$scope = $scope1;
        this.$dataSourceManager = $dataSourceManager1;
        this.sourceName = this.$scope.sourceName;
        this.url = this.$scope.url;
        this.source = void 0;
        this.params = this.$scope.params;
      }


      /*请求数据 */

      DataSource.prototype.doRequestData = function(params, callback) {
        var me, requestArg, requestParams, url;
        me = this;
        requestArg = [me.url];
        url = me.url;
        if (!!params) {
          this.params = params;
        }

        /*2.组合分页参数 */
        requestParams = generatorParams.call(me);
        requestArg.push({
          "params": requestParams
        });
        $http.get.apply(window, requestArg).success(function(result) {
          if (angular.isDefined(me.$scope.sourceField)) {
            me.source = me.$scope.sourceFieldGetter(result);
          } else {
            me.source = result;
          }
          if (angular.isFunction(callback)) {
            callback.call(me);
          }

          /*触发sourceManager的promise */
          if (angular.isUndefined(me.$dataSourceManager.defereds[me.sourceName])) {
            me.$dataSourceManager.getDataSource(me.sourceName);
          }
          return me.$dataSourceManager.defereds[me.sourceName].resolve();
        });
      };
      return DataSource;

    })();

自定义数据源注意事项:需要在获取数据完成后,调用$dataSourceManager.defereds[me.sourceName].resolve();否则无法触发dataSource的promise执行。

数据源数据改变监听

数据源使用angular $scope事件传播机制,进行事件监听,若需要监听某个数据源数据的改变,调用以下代码:

$scope.$on("数据源名称", function(event, obj) {
     console.info("obj为数据改变后的数据源");
});