Datatables - добавлять и удалять подменю в ячейке - PullRequest
Новая
       20

Datatables - добавлять и удалять подменю в ячейке

0 голосов
/ 30 марта 2019

Я пытаюсь отобразить подменю редактирования | просмотра | удаления при наведении курсора на столбцы 1, 2 и 3. Подменю должно включать идентификатор_пользователя, который является столбцом 0. Меню будет иметь гиперссылки сидентификатор пользователя и прямой к моему соответствующему контроллеруЧасть, с которой я сталкиваюсь, - это (1) заставить меню появляться и исчезать и (2) показывать только при наведении курсора на столбцы 1, 2 и 3. Это то, что у меня есть, но это далеко от работы.

 $('#table-list-users tbody').on('mouseenter', 'tr', function(){
    // get all the data in the row
    var data = table.row( this ).data();
    console.log(data[0]);
    // build my submenu
    var subMenu = '<div> <a href=/MH_auth_admin/edit_user/' + data[0] +'>edit</a> | view | delete </div>';
    console.log(subMenu);       
    // how do I stick it to just columns 1, 2, and 3???
    $(this).append(subMenu);
});
// remove the submenu but it doesn't work right.
$('#table-list-users tbody').on('mouseleave', this, function(){
   $(this).children("div").remove();
});

1 Ответ

1 голос
/ 01 апреля 2019

Я бы порекомендовал бросать контекстное меню при щелчке, а не при наведении, как в демо ниже: 

//sample source data for DataTable
const srcData = [
  {id: 1, name: 'apple', category: 'fruit', qty: 5},
  {id: 2, name: 'pear', category: 'fruit', qty: 7},
  {id: 3, name: 'carrot', category: 'vegie', qty: 9}
];
//initialize DataTable
const dataTable = $('#mytable').DataTable({
  dom: 't',
  data: srcData,
  columns: [
    {title: 'id', data: 'id', className: 'menu'},
    {title: 'name', data: 'name', className: 'menu'},
    {title: 'category', data: 'category', className: 'menu'},
    {title: 'qty', data: 'qty'}
  ]
});
//show context menu
$('#mytable').on('click', '.menu', function(event){
  //get row data and populate 'id' menu item
  const rowData = dataTable.row($(this).closest('tr')).data();
  $('#rowId').text('row '+rowData.id);
  //display the menu
  $('#contextMenu').css({'top':(event.pageY+10)+'px','left':(event.pageX+10)+'px'});
  $('#contextMenu').show();
});
//hide context menu
$('#contextMenu').on('mouseleave', function(){
	$(this).hide();
});
#contextMenu {
  display: none;
  z-index: 100;
  position: absolute;
  background: #fff;
  box-shadow: 3px 3px 10px #5a5a5a;
  padding: 5px;
}

.menu {
  cursor: pointer;
}

#contextMenu div {
  display: block;
}

#contextMenu div:hover {
  background: lightgray;
  cursor: pointer;
}
<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="mytable"></table>
<div id="contextMenu">
  <div id="rowId"></div>
  <div id="delete">delete</div>
  <div id="edit">edit</div>
  <div id="properties">properties</div>
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...