<html ng-app="app">
<head>
<title></title>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="Content/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="Content/bootstrap-theme.css" />
<link type="text/css" rel="stylesheet" href="Content/ng-grid.css" />
<link type="text/css" rel="stylesheet" href="Content/Site.css" />
<script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="Scripts/angular.js"></script>
<script type="text/javascript" src="Scripts/ng-grid.js"></script>
<style type="text/css">
.gd {
border:solid 1px #000000;
height:300px;
width:auto;
}
</style>
</head>
<body>
<div class="container" style="margin-top:20px" ng-controller="Ctrl">
<a href="Scripts/angular.js" download="Chinmaya">Angularjs</a>
<div class="gd" ng-grid="gridOptions" >
</div>
<input type="button" value="Press Me" ng-click="pm()" class="btn btn-primary" />
</div>
<script type="text/javascript">
angular.module("app", ['ngGrid'])
.controller("Ctrl", function ($scope, $http) {
$scope.dt = {};
$http.get('http://localhost:38842/api/Empservices/Emps').then(function (promise) {
$scope.dt = promise.data;
});
function fill() {
$scope.filterOptions = {
filterText: "",
useExternalFilter: false
};
$scope.pagingOptions = {
pageSizes: [5,10,20, 50, 100],
pageSize: 5,
totalServerItems: 0,
currentPage: 1
};
$scope.setPagingData = function (data, page, pageSize) {
var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
$scope.DataSource = pagedData;
$scope.totalServerItems = data.length;
if (!$scope.$$phase) {
$scope.$apply();
}
};
$scope.getPagedDataAsync = function (pageSize, page, searchText) {
setTimeout(function () {
var data;
if (searchText) {
var ft = searchText.toLowerCase();
data =$scope.dt.filter(function (item) {
return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
$scope.setPagingData(data, page, pageSize);
});
} else {
$scope.setPagingData($scope.dt, page, pageSize);
}
}, 100);
};
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
$scope.$watch('pagingOptions', function (newVal, oldVal) {
if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
}
}, true);
$scope.$watch('filterOptions', function (newVal, oldVal) {
if (newVal !== oldVal) {
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
}
}, true);
$scope.gridOptions = {
data: 'DataSource',
multiSelect: false,
enableCellEdit: false,
enableRowSelection: true,
enableColumnResize: false,
enableCellSelection: false,
enablePaging: true,
showFooter: true,
totalServerItems: 'totalServerItems',
pagingOptions: $scope.pagingOptions,
filterOptions: $scope.filterOptions,
showFilter: true,
columnDefs:
[
{ field: 'EID', displayName: 'Eid', width: '250px', resizable: true },
{ field: 'NAME', displayName: 'Name', width: '250px' },
{
displayName: 'Actions', cellTemplate:
'<div class="grid-action-cell">' +
'<a ng-click="Edit(row.entity);" >Edit</a>' + ' | ' +
'<a ng-click="Del(row.entity);" >Delete</a>' +
'</div>'
}
],
};
} fill();
$scope.pm = function ()
{
fill();
};
})
</script>
</body>
</html>
No comments:
Post a Comment