index.html
<!DOCTYPE html>
<html lang="en" ng-app="owlTableDemo">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Owl Table Example</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/bootstrap-datepicker/css/datepicker3.css">
<link rel="stylesheet" href="bower_components/ladda/dist/ladda-themeless.min.css">
<link rel="stylesheet" href="lib/swift-box.css">
<link rel="stylesheet" href="dist/owl-table.min.css">
<style>
html, body {
height: 100%;
}
.content {
height: 500px;
}
.demo-navbar-label {
margin-right: 0.5em;
}
</style>
</head>
<body ng-controller="demoController as demoCtrl">
<div class="container-fluid content">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Owl Table Demo</a>
</div>
<ul class="nav navbar-nav">
<li class="navbar-form">
<button class="btn btn-sm btn-default" ng-class="{'active': demoCtrl.tacky.top === true}" ng-click="demoCtrl.options.tacky.top = !demoCtrl.options.tacky.top">Tacky Top</button>
</li>
<li class="navbar-form">
<div class="form-group cell-locking">
<input type="text" class="form-control" placeholder="Record ID" ng-model="cellToChange.row" />
<select class="form-control lock-column-select" ng-model="cellToChange.column" ng-options="column as column.title for column in demoCtrl.columns">
<option>Select column</option>
</select>
<button class="btn btn-sm btn-default" ng-click="demoCtrl.lockCell()">Lock</button>
<button class="btn btn-sm btn-default" ng-click="demoCtrl.unlockCell()">Unlock</button>
</div>
</li>
<li class="navbar-form">
<div class="form-group">
Sort
<select class="form-control" ng-change="demoCtrl.owlTable.sort()" ng-model="demoCtrl.owlTable.predicate" ng-options="column.field as column.title for column in demoCtrl.columns">
<option>Select column</option>
</select>
</div>
</li>
</ul>
</div>
</nav>
<owl-table id="demoTable" options="demoCtrl.options" columns="demoCtrl.columns" data="demoCtrl.data" child-columns="demoCtrl.childColumns"></owl-table>
</div>
<script src="dist/vendor.min.js"></script>
<script src="lib/swift-box.js"></script>
<script src="lib/swift-search.js"></script>
<script src="bower_components/angular-mocks/angular-mocks.js"></script>
<script src="dist/owl-table.js"></script>
<script>
angular.module('owlTableDemo', ['owlTable'])
.controller('demoController', function ($scope, $http, $timeout, $filter, owlTable) {
var self = this;
this.columns = [];
this.data = [];
this.childColumns = [];
this.owlTable = owlTable;
$scope.demoCtrl = this;
$scope.cellToChange = {
row: null,
column: null
};
var mySuccessCallback = function (response) {
console.log('Ajax Success!');
console.log(response);
};
var myErrorCallback = function (response) {
console.error('Ajax Error!');
console.log(response);
}
this.options = {
saveIndividualRows: false,
customizeColumns: true,
saveUrl: 'https://young-oasis-9005.herokuapp.com/api/students/save',
saveCallbacks: {
success: mySuccessCallback,
error: myErrorCallback
},
massUpdate: true,
ajaxParams: {
post: {
csrfToken: '5043292'
},
get: {}
},
tacky: {
top: true
}
};
// You can call the owlTable.lockCell directly from ng-click etc,
// this is just to illustrate its use or if you need to do more before/after
// calling it.
this.lockCell = function () {
owlTable.lockCell($scope.cellToChange.row, $scope.cellToChange.column.field);
};
this.unlockCell = function () {
owlTable.unlockCell($scope.cellToChange.row, $scope.cellToChange.column.field);
}
var demoSelectOptions = [
{
value: '1',
text: 'Test Value',
}, {
value: '2',
text: '<b>Bold</b>'
}, {
value: '3',
text: 'Foo'
}, {
value: '4',
text: 'Bar'
}
];
this.columns = [{
field: 'custom_2000000',
title: 'text',
type: 'text',
tacky: {
'left': true
}
}, {
field: 'custom_2000001',
title: 'select',
type: 'select',
options: demoSelectOptions
}, {
field: 'custom_2000002',
title: 'select_multiple',
type: 'select_multiple',
options: [{
value: 'M',
text: 'M'
}, {
value: 'T',
text: 'T'
}, {
value: 'W',
text: 'W'
}, {
value: 'H',
text: 'H'
}, {
value: 'F',
text: 'F'
}]
}, {
field: 'custom_2000003',
title: 'radio',
type: 'radio',
options: demoSelectOptions
}, {
field: 'custom_2000004',
title: 'checkbox',
type: 'checkbox'
}, {
field: 'custom_2000005',
title: 'date',
type: 'date'
}, {
field: 'custom_2000006',
title: 'time',
type: 'time'
}, {
field: 'custom_2000006',
title: 'your field here',
type: 'number'
}];
for (var i = 7; i < 100; i++) {
var col = {
field: 'custom_200000' + i,
title: 'Custom 200000' + i,
type: 'text',
filters: [{
term: '',
condition: 'contains'
}],
editable: true, // defaults to true
options: [{
value: '21323',
text: '<b>Test Value</b>'
}, {
value: '32432',
text: 'No'
}, {
value: '1',
text: 'Zzz'
}, {
value: '99999',
text: 'Aaa'
}],
tacky: {
left: false
}
}
$scope.demoCtrl.columns.push(col);
}
this.childColumns = [{
field: 'custom_3000000',
title: 'Child Column 1',
type: 'text',
}, {
field: 'custom_3000001',
title: 'Child Column 2',
type: 'text'
}, {
field: 'custom_3000002',
title: 'Child Column 3',
type: 'select',
options: demoSelectOptions
}];
$scope.$on('owlTableColumnsCustomized', function (event, columns) {
// do whatever you want here with the new column set
});
$http.get('https://young-oasis-9005.herokuapp.com/api/students?nopage=true')
.success(function (response) {
_.forEach(response.data, function (datum) {
if (Math.random() >= 0.5) {
datum['custom_2000000'] = 'N';
} else {
if (Math.random() >= 0.5) {
datum['custom_2000000'] = '';
} else {
datum['custom_2000000'] = '1';
}
}
datum['custom_2000004'] = true;
datum['custom_2000002'] = '';
});
response.data[1].children = [{
id: 1,
'custom_2000000': 'foo',
'custom_3000001': 'child record',
'custom_3000002': 'works just like regular record'
}, {
id: 2,
'custom_2000000': 'bar',
'custom_3000001': 'such text',
'custom_3000002': 'wow'
}];
$scope.demoCtrl.data = response.data;
})
.error(function (data) {
console.log('ajax error while loading');
owlTable.ajaxError('Oops, something went wrong!');
});
});
angular.module('owlTableDemoDev', ['owlTableDemo', 'ngMockE2E'])
.run(function ($httpBackend) {
var data = [];
for (var i = 0; i < 100; i++) {
data.push({
id: 0,
'custom_2000000': '12345',
'custom_2000001': '23456'
});
}
$httpBackend.whenGET('https://young-oasis-9005.herokuapp.com/api/students?nopage=true').respond({data: data});
});
</script>
</body>
</html>