Как отобразить список кликабельных элементов из нескольких столбцов? - PullRequest
Новая
       5

Как отобразить список кликабельных элементов из нескольких столбцов?

0 голосов
/ 16 января 2019

Я работаю над проектом, в котором пытаюсь отобразить список сообщений. Я хочу, чтобы в каждой строке было несколько полей («Отправлено», «Сообщение», «Дата») и чтобы можно было нажимать на них (что затем показывает поток, частью которого является сообщение).

Это то, что я имею до сих пор. https://imgur.com/a/uU1sm64

У меня проблемы с выравниванием данных в строках. Пока у меня есть их как три компонента ListItemText под одним ListItem для каждой строки. Я пытался использовать таблицы, но у меня не работает функция OnClick.

Какой лучший способ получить выровненный интерактивный список из нескольких столбцов? Аналогичен веб-интерфейсу gmail.

Спасибо.

1 Ответ

0 голосов
/ 16 января 2019

Это решение, которое вы ищете? Я использовал загрузочный стол. При нажатии на строку таблицы, я получаю содержимое первой ячейки. Возможно, вам следует попытаться получить идентификатор сообщения или что-то связанное с выбранной строкой таблицы. 

$("#display-table tr").click(function(){
   $(this).addClass('selected').siblings().removeClass('selected'); 
   var value=$(this).find('td:first').html();
   alert(value);    
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<table id="display-table" class="table table-hover">
    <thead>
        <th>Sent By</th>
        <th>Message</th>
    </thead>
    <tbody>
        <tr>
            <td>ABC User</td>
            <td>how-do-i-display-list-of-multi-column-clickable-items</td>
        </tr>
        <tr>
            <td>ADC User</td>
            <td>how-do-i-display-list-of-multi-column-clickable-items</td>
        </tr>
        <tr>
            <td>ADE User</td>
            <td>how-do-i-display-list-of-multi-column-clickable-items</td>
        </tr>
    </tbody>
</table>
...