如何在 angularjs 中使用 ui-grid 为多个表动态创建网格选项
How can I dynamically create grid options for multiple tables using ui-grid in angularjs
我已经为 ui-grid 表编写了一个服务。现在我只能在一个页面中使用它,但是我想在具有不同表数据的多个页面中使用此服务。如何为多个表传递网格选项和 json 数据。我该怎么做?请帮助任何人。
服务:
(function(){
"use strict";
angular.module('nApp').controller('SearchResultsController', ['$scope', '$http', '$timeout', '$interval', 'uiGridConstants', 'uiGridGroupingConstants', function ($scope, $http, $timeout, $interval, uiGridConstants, uiGridGroupingConstants) {
var searchResults = this;
searchResults.loadPOHeaderView = loadPOHeaderView;
//searchResults.loadPOLinesView = loadPOLinesView;
function loadPOHeaderView() {
if(dataFactory.getSelectedPOHeader().length) {
$state.go("^.poheader");
};
}
$scope.gridOptions = {
enableHorizontalScrollbar : uiGridConstants.scrollbars.NEVER,
enableVerticalScrollbar : uiGridConstants.scrollbars.NEVER,
paginationPageSizes: [25, 50, 75],
paginationPageSize: 10,
useExternalPagination: true,
useExternalSorting: true,
enableRowSelection: false,
enableCellSelection: false,
enableFiltering: false,
enableCellEdit: false,
enableColumnResizing: true,
enableColumnMenus: false,
enableGridMenu: false,
showGridFooter: false,
showColumnFooter: false,
fastWatch: true,
enablePaging: true,
showFilter: true,
rowHeight: 45,
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.core.on.sortChanged($scope, function(grid, sortColumns) {
if (sortColumns.length == 0) {
paginationOptions.sort = null;
} else {
paginationOptions.sort = sortColumns[0].sort.direction;
}
getPage();
});
gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
paginationOptions.pageNumber = newPage;
paginationOptions.pageSize = pageSize;
getPage();
});
},
columnDefs : [
{ name:'Test1', displayName:'Test1'},
{ name:'Test2', displayName:'Test2'},
{ name:'Test3', displayName:'Test3'},
{ name:'Test4', displayName:'Test4'},
{ name:'Test5', displayName:'Test5'},
{ name:'Test6', displayName:'Test6'},
{ name:'Test7', displayName:'Test7'}
]
};
var paginationOptions = {
pageNumber: 1,
pageSize: 10,
sort: null
};
var getPage = function() {
var url;
switch(paginationOptions.sort) {
case uiGridConstants.ASC:
url = 'common/service/pogriddata.json';
break;
case uiGridConstants.DESC:
url = 'common/service/pogriddata.json';
break;
default:
url = 'common/service/pogriddata.json?page='+paginationOptions.pageNumber;
break;
}
$http.get(url)
.success(function (data) {
$scope.gridOptions.totalItems = 30;
var firstRow = (paginationOptions.pageNumber - 1) * paginationOptions.pageSize;
$scope.gridOptions.data = data.slice(firstRow, firstRow + paginationOptions.pageSize);
}); }; getPage(); }]);})();
查看页面:
<div ng-controller="SearchResultsController" class="col-md-12">
<div ui-grid="gridOptions" ui-grid-cellNav ui-grid-edit ui-grid-resize-columns ui-grid-pinning ui-grid-move-columns ui-grid-importer ui-grid-exporter ui-grid-pagination class="grid"></div>
</div>
app.directive('gridWrapper', ['$http',function ($http) {
return {
restrict: 'EA',
scope:{
enableFilter:'@',
enableSorting:'@',
enableColResize:'@',
ngModel: '=',
getHeader: '=',
getData: '=',
},
template:'<div ag-grid="gridOptions" class="ag-fresh" id="gridView" ></div>',
controller:function($scope){
$scope.gridOptions = {
columnDefs: $scope.getHeader,
rowSelection: 'single',
rowData: $scope.getData,
enableFilter: $scope.enableFilter,
enableSorting: $scope.enableSorting,
enableColResize: $scope.enableColResize
};
}
};
}]);
<grid-Wrapper enable-Filter="{{true}}" enable-Sorting="{{true}}" enable-Col-Resize={{true}} ng-model="model" get-header="gridheader" get-data="rowData" ></grid-Wrapper>
<grid-Wrapper enable-Filter="{{false}}" enable-Sorting="{{false}}" enable-Col-Resize={{false}} ng-model="model1" get-header="gridheader1" get-data="rowData1" ></grid-Wrapper>
相关文章:
- onkeyup无法动态创建多个文本区域
- 如何使用javascript从主svg对象动态创建svg视图框
- 在动态创建的元素上获取对特定选择器的引用
- JQuery对动态创建的对象进行选择
- 使用jquery动态创建ul-li
- 从动态创建的html选择中选择所选选项
- 如何在动态创建的节点上绑定函数
- 动态创建OnClick事件Javascript
- 谷歌地图动态创建的标记点击事件使用相同的标记
- 在动态创建的标记上添加事件
- 动态创建一个javascript/jquery多级数组
- 如何动态创建许多Jquery颜色选择器(eyecon)
- 如何为动态创建的文本区域中输入的值更新ng模型
- 对动态创建的元素运行jQuery.ech()
- 使用jQuery访问动态创建的项
- 动态创建的iframe中的window.onerror在lne 0处给出脚本错误
- 当用户点击动态创建的链接时,如何调用JS方法.JQuery,ASP.NET MVC
- 我想将链接关联到动态创建的p元素上的相应文章
- AngularJs从列表中动态创建指令
- 使用javascript动态创建html内容/元素