05.11.2020, 05:20
|
Кандидат Javascript-наук
|
|
Регистрация: 20.09.2020
Сообщений: 130
|
|
selectionrange для нескольких строк
Добрый день,
запутался с выделением, пожалуйста посоветуйте, в какую сторону копать.
Имею <div> в который я регулярно записываю большой (1000-10000) список достаточно длинных строк (название и спецификация эксперимента). Юзер может захотеть пометить одну или несколько строк, выбрав мышкой. После выбора я хотел как-то эти строки покрасить цветом, чтобы юзер мог бы выбрать не один блок строк, а несколько, и можно было отменить выбор, ну то есть как в винде при выборе файлов.
Строки генеряться из массива, который я получаю по JSON из сервера. Я могу к каждой строке что-то приписать, но хочу, чтобы производительность не пострадала.
По окончании мне нужен просто список номеров всех строк, что юзер решил выделить.
Скажите, пожалуйста, стоит ли мне на каждую строку поместить свой <div> со своим номером, или можно сделать как-то проще?
Если делать через onselectionchange то во-первых постоянно вызывается функция пока юзер меняет выделение, а хочется вызвать только когда он закончил, а также выделение происходит не по строкам, а по символам.
Может надо совсем в другую сторону посмотреть, пожалуйста, посоветуйте!
Спасибо!
|
|
05.11.2020, 07:22
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
<style>
.check {
background-color: #D7F9FA;
}
</style>
<div id="list">
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
</div>
<script>
document.getElementById('list').addEventListener('click', function(e) {
e.target.localName=='p' && e.target.classList.toggle('check')
}, true);
</script>
А когда необходимо, получить все элементы с классом check, это и будет выбор пользователя. Элементы, как и их контейнер могут быть любыми.
|
|
05.11.2020, 07:34
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,744
|
|
Сообщение от Was-Ja
|
записываю большой (1000-10000) список достаточно длинных строк (название и спецификация эксперимента). Юзер может захотеть пометить одну или несколько строк,
|
1000 длинных строк это больше 20 страниц текста (а 10 000 больше 200)
Юзер реально будет все это читать?
Может как то группировать их?
|
|
05.11.2020, 10:19
|
Кандидат Javascript-наук
|
|
Регистрация: 20.09.2020
Сообщений: 130
|
|
Спасибо большое, laimas за классный пример!
Почти то, что хочу! Но вот дополнительно очень хотелось бы, чтобы было еще так. Пусть у меня таких Text много, скажем сто, если юзер хочет с 20 по 50 пометить, то ему надо 31 раз кликнуть. Может тут надо как-то еще что-то забиндть, mouseup/mousedown, чтобы не 31 раз кликать, а разом их пометить.
Спасибо большое, voraa!
Я сам колеблюсь как тут правильно поступить. Я хочу реализовать поиск по базе данных сделанных экспериментов. Юзер их снимает примерно раз в 10 секунд и за год-два может набежать пару миллионов таких записей. Я планировал перед отрисовкой этого списка спрашивать юзера дату от и до когда он снял эксперименты, название эксперимента и еще несколько параметров. Далее по этому фильтру я ищу в базе данных список экспериментов и выплевываю на клиента только по одной строчке на каждый эксперимент, чтобы юзер далее пометил то, что он действительно хочет посмотреть. Поиск на сервере на С++, ибо сама база на пару терабайт может быть, эту часть уже реализовал, ищет быстро, около секунды, ибо там я полную индексацию всего что можно сделал.
Я планировал, что в случае если юзер слишком широко запрос организует, ограничить число строк и отрисовывать например только не больше 1000 строк, и это максимальное число юзер сам должен ввести в настройках, но юзер может таки решить посмотреть на большой набор в 10К экспериментов, но это он сам будет злобным чебурашкой, другое дело, что хочется дать ему в этом случае пометить список того, что ему надо.
|
|
05.11.2020, 19:03
|
Кандидат Javascript-наук
|
|
Регистрация: 20.09.2020
Сообщений: 130
|
|
Огромное спасибо всем, что помогали,
получилось, так как мне хочется!!!
Сейчас по ссылке
http://www.elegant-nmr.com/iii/ii.html
можно отмаркировать строчки, вида MyTest ... aaa ... ccc
и маркировка в точности по Вашим советам, и как мне хотелось можно отмаркировать несколько блоков.
Есть один вопрос вдогонку, пожалуйста, подскажите, в какую сторону посмотреть.
Когда мышкой я маркирую например с 3 по 9 строчку, эти строчки после маркировки становяться голубенькими (как мне и хотелось), но появляется дополнительная встроенная маркировка как если маркируешь текст, на скриншоте я маркировал с 3-ей по 9-ую строку.
Скажите, пожалуйста, как от сделать так, чтобы голубенькая моя маркировка была, а вот рыжая родная браузерная маркировка не видна была?
Спасибо!
|
|
05.11.2020, 19:09
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
|
|
05.11.2020, 19:28
|
Кандидат Javascript-наук
|
|
Регистрация: 20.09.2020
Сообщений: 130
|
|
Супер, спасибо большое, laimas, все сразу заработало!!!
|
|
05.11.2020, 19:30
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Вообще их больше с префиксами, если все учитывать:
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
|
|
05.11.2020, 19:43
|
Кандидат Javascript-наук
|
|
Регистрация: 20.09.2020
Сообщений: 130
|
|
Верно, спасибо Вам огромное, что помогаете!!!
|
|
|
|