AngularJS Grid system
create a index.html page to include angular.js,angular-touch.js and angular-animate.js and also include css.
Now create a module(techieupgraderapp) this is a module name in angularjs application.then create a controller.like as a controller (techieupgraderMainCtrl) name in this app.
Last include file app.js it’s a main part of angularjs application.means custom js include in index.html page.
Gridview mostly used ui-grid in this angularjs application.
Example of Angular UI Grid (for table)
index.html
————-
<!doctype html>
<!-- Here includes module name -->
<html ng-app="ng4freeapp">
<head>
<title>Angular UI Grid | Example,demo with Gridview in AngularUI</title>
<!-- Include Must be AngularJS lib Javascript -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
</head>
<body>
<!-- Here includes controller -->
<div ng-controller="techieupgraderMainCtrl">
<div ui-grid="{ data: data, columnDefs: columnDefs,enableRowSelection: true,
enableSelectAll: true,
enableFiltering: true, }" class="grid" ui-grid-selection ui-grid-edit ui-grid-cellnav></div>
<button ng-click="addNewItem()" > ADD item</button>
</div>
<!-- custom include Javascript app.js file -->
<script src="app.js"></script>
</body>
</html>
Custom Logic File in include same path – > app.js
app.js
——
// techieupgraderapp its used module name
var app = angular.module('techieupgraderapp', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.grid.edit','ui.grid.cellNav']);
//techieupgraderMainCtrl its used controller name
app.controller('techieupgraderMainCtrl', ['$scope', function ($scope) {
//some records of json using loading time
$scope.data = [
{ name: 'angular ', title: 'demo angularjs',lname: 'gridview' ,address: 'char us road' ,city: 'USA' ,status: 'Active' },
{ name: 'Test add ', title: 'Test add',lname: 'Test add' ,address: 'Test add' ,city: 'Test add' ,status: 'Test add' }
];
//Create a column name
$scope.columnDefs = [
{name: 'name', cellEditableCondition:true},
{name: 'title', cellEditableCondition:true},
{name: 'lname', cellEditableCondition:true},
{name: 'address', cellEditableCondition:true},
{name: 'city', cellEditableCondition:true},
{name: 'status', cellEditableCondition:true}
];
$scope.addNewItem=function()
{
$scope.data.push( { name: 'Test add ', title: 'Test add',lname: 'Test add' ,address: 'Test add' ,city: 'Test add' ,status: 'Test add' });
};
$scope.insertNewItem=function()
{
$scope.data.splice(1, 0, { name: 'Test add ', title: 'Test add',lname: 'Test add' ,address: 'Test add' ,city: 'Test add' ,status: 'Test add' });
};
}]);
————-
——
0 comments: