<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script src="service.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div ng-app="myApp">
<div style="margin-left:5px;margin-top:10px" ng-controller="myCtrl">
<ang-table conf="config"></ang-table>
</div>
</div>
<button id="saveColumnButton" class="primaryButton" ng-click="saveColumn()" >Apply</button>
</body>
</html>
var myApp = angular.module('myApp');
myApp.controller('myCtrl', function($scope, candidates) {
candidates.then(function(data) {
$scope.config.myData = [];
angular.forEach(data, function(value, key) {
value.DealDate = new Date(value.DealDate);
$scope.config.myData.push(value);
});
});
$scope.config = {
heads: ['DealDate', 'BankRef', 'CCY1', 'Company'],
blockSort: ['BankRef', 'Company']
};
$scope.saveColumn=function(){
};
});
myApp.directive('droppable', ['$parse',
function($parse) {
return {
link: function(scope, element, attr) {
function onDragOver(e) {
if (e.preventDefault) {
e.preventDefault();
}
if (e.stopPropagation) {
e.stopPropagation();
}
e.dataTransfer.dropEffect = 'move';
return false;
}
function onDrop(e) {
console.log("dropped");
if (e.preventDefault) {
e.preventDefault();
}
if (e.stopPropagation) {
e.stopPropagation();
}
var data = e.dataTransfer.getData("Text");
data = angular.fromJson(data);
var dropfn = attr.drop;
var fn = $parse(attr.drop);
var headerElem = e.target.closest('th');
var textOfHeader = angular.element(headerElem).find("a");
scope.$apply(function() {
scope[dropfn](data, textOfHeader[0]);
});
}
element.bind("dragover", onDragOver);
element.bind("drop", onDrop);
}
};
}
]);
myApp.directive('draggable', function() {
return {
link: function(scope, elem, attr) {
elem.attr("draggable", true);
var dragDataVal = '';
var draggedGhostImgElemId = '';
attr.$observe('dragdata', function(newVal) {
dragDataVal = newVal;
});
elem.bind("dragstart", function(e) {
var sendData = angular.toJson(dragDataVal);
e.dataTransfer.setData("Text", sendData);
if (attr.dragimage !== 'undefined') {
e.dataTransfer.setDragImage(
document.getElementById(draggedGhostImgElemId), 0, 0
);
}
var dragFn = attr.drag;
if (dragFn !== 'undefined') {
scope.$apply(function() {
scope[dragFn](sendData);
})
}
});
}
};
});
myApp.directive('angTable', ['$compile',
function($compile) {
return {
restrict: 'E',
templateUrl: 'tabletemplate.html',
replace: true,
scope: {
conf: "="
},
controller: function($scope) {
$scope.predicate = 'age';
$scope.order = function(predicate) {
if ($scope.conf.blockSort.indexOf(predicate) === -1) {
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
$scope.predicate = predicate;
}
};
$scope.dragHead = '';
$scope.dragImageId = "dragtable";
$scope.handleDrop = function(draggedData,
targetElem) {
var swapArrayElements = function(array_object, index_a, index_b) {
var temp = array_object[index_a];
array_object[index_a] = array_object[index_b];
array_object[index_b] = temp;
};
var srcInd = $scope.conf.heads.indexOf(draggedData);
var destInd = $scope.conf.heads.indexOf(targetElem.textContent);
swapArrayElements($scope.conf.heads, srcInd, destInd);
};
$scope.handleDrag = function(columnName) {
$scope.dragHead = columnName.replace(/["']/g, "");
};
},
compile: function(elem) {
return function(ielem, $scope) {
$compile(ielem)($scope);
};
}
};
}
]);
.hidtable {
/*position: absolute;*/
top: 0;
left: 0;
cursor:move;
background:white;
border-style:dotted;
z-index:4;
}
.coverhidtable {
/*position: absolute;*/
top: 0;
left: 0;
cursor:move;
background:white;
color:white;
z-index:4;
}
.acttable {
/*position: absolute;*/
top: 0;
left: 0;
cursor:move;
z-index:5;
background:white;
}
.acttable th{
padding:10px;
}
.drag {
background:orange;
color:white;
cursor:move;
}
.over {
background: red;
color:white;
}
.sortorder:after {
content: '\25b2';
}
.sortorder.reverse:after {
content: '\25bc';
}
This is a simple example of reordering of columns in a table using angular directives.
Basically this application uses 3 directives, myTable, draggable and droppable.
The diective angTable is an element directive, where it has an attribute named conf
The attribute 'conf'may contain an object consisting of head where we specify the table headers and one array of objects.
Directive named draggable has 3 attributes:
drag:which specify a function defined which get fired when the dragging starts
dragData:which specify the text to be transfered as the content of dragged element
dragImage:the id of the element which ghost image should appear as the drag feedback
Directive named droppable has 1 attributes:
drop:which specify a function defined which get fired when the drop occurs
<div style="position:relative">
<table class="table table-bordered acttable" >
<thead>
<th style="cursor:move" draggable drag="handleDrag" dragData="{{hd}}" dragImage="{{dragImageId}}" droppable drop="handleDrop" ng-repeat="hd in conf.heads">
<a href="" ng-click="order(hd)">{{hd}}</a>
<span class="sortorder" ng-show="predicate === hd" ng-class="{reverse:reverse}"></span>
</th>
</thead>
<tbody>
<tr ng-repeat="data in conf.myData | orderBy:predicate:reverse | limitTo:numLimit:start">
<td ng-repeat="d in conf.heads"><span>{{ d == "DealDate" ? (data[d]|date:"dd MMM yyyy") : data[d]}}</span>
</td>
</tr>
</tbody>
</table>
</div>
{
"myData": [{
"DealDate": "12 Jan 2015",
"BankRef": 27,
"CCY1": "ABC",
"Company": "Js"
}, {
"DealDate": "12 Aug 2014",
"BankRef": 30,
"CCY1": "NBC",
"Company": ".net"
}, {
"DealDate": "13 Sep 2016",
"BankRef": 29,
"CCY1": "Amazon",
"Company": "Java"
}, {
"DealDate": "04 May 1989",
"BankRef": 29,
"CCY1": "Amazon",
"Company": "Java"
},
{
"DealDate": "07 Jun 1987",
"BankRef": 40,
"CCY1": "E-bay",
"Company": "C"
},
{
"DealDate": "09 Dec 1976",
"BankRef": 32,
"CCY1": "Google",
"Company": "Python"
}]
}
var mainModule = angular.module('myApp',[]);
mainModule.factory("candidates",function($http,$q){
this.candidates=[];
var self=this;
var defer=$q.defer();
$http.get("./data.json").success(function(data){
var candidates=data.myData;
defer.resolve(candidates);
})
return defer.promise;
});