数据源一共分为两种,一种是普通数据源,一种是分页数据源,通过在标签上
<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中,若要调用数据源,则需要使用以下步骤
以下给出一个例子,具体内容如下:
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为数据改变后的数据源");
});