[英]how can i create an modal dialog in a datatable
i have an angularJS app.controler with a datatable inside. 我有一个angularJS app.controler,里面有一个数据表。 in the last column is a delete-button.
最后一列是一个删除按钮。 if i press this button should appear a modal dialog with a question "Do you realy want to delete this user?"
如果我按此按钮,将出现一个模态对话框,询问“您是否真的要删除此用户?” That is working fine.
很好 But how can i display the username in the modal dialog?
但是如何在模式对话框中显示用户名? and how can i send the userid to the backend-controller?
以及如何将用户ID发送到后端控制器? if i write this
return '<a class="btn btn-danger btn-sm btn-block" href=/deleteUser?userid=' + data + '>' + ($filter('translate')('delete')) + '</a>';
如果我写此
return '<a class="btn btn-danger btn-sm btn-block" href=/deleteUser?userid=' + data + '>' + ($filter('translate')('delete')) + '</a>';
the user will be delete immediately. 用户将被立即删除。 this is my table: usertable
这是我的表: usertable
the modal dialog: the modal dialog in action (without the username) 模态对话框:正在运行的模态对话框(无用户名)
this is a snippet in html 这是html中的代码段
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2>DELETE USER</h2>
</div>
<div class="modal-body">
<p>Do you realy want to delete the user? </p>
<p>username: ??? </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">CANCEL</button>
<button type="button" class="btn btn-danger">DELETE</button>
</div>
</div>
</div>
and this is the app.controller 这是app.controller
app.controller('UsersController',['$translate', '$scope','$filter', '$http', function($translate,$scope, $filter, $http) {
$scope.users = [];
$http.get('/user').then(function(resp) {
$scope.users = resp.data;
});
$scope.tableConfig = {
columns : [
{
data : 'username'
},
{
data : 'lastname'
},
{
data : 'firstname'
},
{
data : 'supplier',
render : function(data, type, row, meta) {
if (!data || !data.name) {
return '';
}
return data.name;
}
},
{
data : 'role'
},
{
//the edit button
data : 'id',
render : function(data, type, row, meta) {
if (!data || !data) {
return '';
}
return '<a class="btn btn-warning btn-sm btn-block" href=/editUser?userid=' + data + '>' + ($filter('translate')('edit')) + '</a>';
}
},
{
//the delete button
data : 'id',
render : function(data, type, row, meta) {
if (!data || !data) {
return '';
}
return '<button type="button" class="btn btn-danger btn-sm btn-block" id="myDELBtn" data-toggle="modal" data-target="#myModal" >DEL</button>'
}
},
]
}
}]);
Usually, on action in controllers you pass the ID of the entity; 通常,在控制器中执行操作时,您传递实体的ID; a good example is you can make your HREF to be /users/delete/5 that calls controller action delete for user #5.
一个很好的例子是,您可以将您的HREF设置为/ users / delete / 5,从而为用户#5调用控制器动作删除。 This way you will have the ID to pass to the controller and retrieve the username from it using AJAX call.
这样,您将拥有ID传递给控制器,并使用AJAX调用从中检索用户名。
/**
* @Function to delete a user.
*/
$scope.deleteConfirmation = function(size) {
var modalInstance = $modal.open({
templateUrl : 'views/userManagement/gxDeleteMessagePopup.html',
controller : ModalInstanceCtrlForDelete,
size : size,
resolve : {
dataSelect : function() {
return $scope;
}
}
});
modalInstance.result.then(function(selectedItem) {
},function() {
});
};
//Added controller for delete message modal pop up
var ModalInstanceCtrlForDelete = function($scope, $modalInstance,dataSelect) {
$scope.dataSelect = dataSelect;
$scope.ok = function() {
Service.deleteUser(dataSelect.gridOptions.user);
$modalInstance.close();
$state.go('home.Manage Users');
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.