Last active
November 28, 2016 09:49
-
-
Save japharr/1640640135621b984d962d3a87156ee9 to your computer and use it in GitHub Desktop.
How to use checkbox on jhipster table and delete selected rows.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function() { | |
'use strict'; | |
angular | |
.module('schoolApp') | |
.controller('BookSelDeleteController',BookSelDeleteController); | |
BookDeleteController.$inject = ['$uibModalInstance', '$stateParams', 'Book']; | |
function BookSelDeleteController($uibModalInstance, $stateParams, Book) { | |
var vm = this; | |
vm.selectedItems = $stateParams.selectedItems; | |
vm.clear = clear; | |
vm.confirmDelete = confirmDelete; | |
function clear () { | |
$uibModalInstance.dismiss('cancel'); | |
} | |
function confirmDelete (id) { | |
Book.deleteSel({}, vm.selectedItems, | |
function () { | |
$uibModalInstance.close(true); | |
}, | |
function () { | |
console.log("An error occurred"); | |
}); | |
} | |
} | |
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function() { | |
'use strict'; | |
angular | |
.module('schoolApp') | |
.factory('Book', Book); | |
Book.$inject = ['$resource', 'DateUtils']; | |
function Book ($resource, DateUtils) { | |
var resourceUrl = 'api/books/:id'; | |
return $resource(resourceUrl, {}, { | |
'query': { method: 'GET', isArray: true}, | |
'deleteSel': { method: 'POST', isArray: true, params:{'delete-sel':''}}, | |
... | |
}); | |
} | |
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
... | |
.state('book.delete-sel', { | |
parent: 'book', | |
url: '/delete-sel', | |
data: { | |
authorities: ['ROLE_USER'] | |
}, | |
params: { | |
selectedItems: null | |
}, | |
onEnter: ['$stateParams', '$state', '$uibModal', function($stateParams, $state, $uibModal) { | |
$uibModal.open({ | |
templateUrl: 'app/entity/book/book-delete-sel-dialog.html', | |
controller: 'BookSelDeleteController', | |
controllerAs: 'vm', | |
size: 'md' | |
}).result.then(function() { | |
$state.go('books', null, { reload: true }); | |
}, function() { | |
$state.go('^'); | |
}); | |
}] | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
... | |
@Inject | |
BookRepository bookRepository; | |
/** | |
* DELETE /books/:id : delete the "id" book. | |
* | |
* @param books the id of the book to delete | |
* @return the ResponseEntity with status 200 (OK) | |
*/ | |
//@DeleteMapping("/books") | |
@RequestMapping(value = "/books", | |
params = "delete-sel", | |
method = RequestMethod.POST, | |
produces = MediaType.APPLICATION_JSON_VALUE) | |
@Timed | |
public ResponseEntity<Void> deleteBooks(@RequestBody List<Book> books) { | |
log.debug("REST request to delete Books : {}", books.size()); | |
bookRepository.delete(books); | |
return ResponseEntity.ok().headers(HeaderUtil.createEntityDeletionAlert("book", null)).build(); | |
} | |
... |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
vm.checkAll = []; | |
var map = {}; | |
vm.checkboxes = []; | |
vm.selectedItems = []; | |
vm.selectAll = selectAll; | |
vm.select = select; | |
function selectAll () { | |
var value = vm.checkAll[vm.page]; | |
angular.forEach(vm.books, function(item) { | |
if (angular.isDefined(item.id)) { | |
if(vm.checkboxes[item.id] != value) { | |
vm.checkboxes[item.id] = value; | |
vm.select(item); | |
} | |
} | |
}); | |
}; | |
function select (item) { | |
var value = vm.checkboxes[item.id]; | |
if(value) { | |
vm.selectedItems.push(item); | |
if(map[vm.page] == null) map[vm.page] = 1; | |
else map[vm.page] = map[vm.page] + 1; | |
if(map[vm.page] == vm.books.length) { | |
vm.checkAll[vm.page] = true; | |
} | |
} else { | |
vm.selectedItems.splice(item, 1); | |
if(map[vm.page] == null) map[vm.page] = 0; | |
else map[vm.page] = map[vm.page] - 1; | |
if(map[vm.page] < vm.books.length) { | |
vm.checkAll[vm.page] = false; | |
} | |
} | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<button ng-if="vm.selectedItems.length > 0" type="submit" | |
tooltip-placement="top" uib-tooltip="{{'entity.action.delete' | translate}}" | |
ui-sref="book.delete-sel({selectedItems: vm.selectedItems})" | |
class="btn btn-success"> | |
<i class="fa fa-trash-o"></i> | |
</button> | |
<table> | |
<thead> | |
<tr jh-sort="vm.predicate" ascending="vm.reverse" callback="vm.transition()"> | |
<th><input type="checkbox" icheck ng-change="vm.selectAll()" ng-model="vm.checkAll[vm.page]"></th> | |
<th jh-sort-by="id"><span data-translate="global.field.id">ID</span></th> | |
--- | |
</tr> | |
</thead> | |
<tbody> | |
<tr ng-repeat="book in vm.books track by book.id"> | |
<td><input type="checkbox" icheck ng-model="vm.checkboxes[book.id]" ng-change="vm.select(book)"/></td> | |
<td>{{($index + 1) + (vm.page - 1) * vm.itemsPerPage}}</td> | |
... | |
</tr> | |
</tbody> | |
</table> |
Check the book.state.js
change the "books.delete-sel" to "book.delete-sel"
Check the delete all button in the html and confirm the ui-sref to be book.delete-sel
No
@japharr it is giving same error in developer console
@japharr Can I send you all files in book entities?
@Atul21
yes, you can
@japharr I sent you
@japharr please check your mail.
@Atul21
no mail from you
@japharr please check your spam folder.
Check your mail for update.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@japharr did you get my mail? in which I sent you each and every file of book entity