Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.11.2020, 05:20
Кандидат Javascript-наук
Отправить личное сообщение для Was-Ja Посмотреть профиль Найти все сообщения от Was-Ja
 
Регистрация: 20.09.2020
Сообщений: 130

selectionrange для нескольких строк
Добрый день,

запутался с выделением, пожалуйста посоветуйте, в какую сторону копать.

Имею <div> в который я регулярно записываю большой (1000-10000) список достаточно длинных строк (название и спецификация эксперимента). Юзер может захотеть пометить одну или несколько строк, выбрав мышкой. После выбора я хотел как-то эти строки покрасить цветом, чтобы юзер мог бы выбрать не один блок строк, а несколько, и можно было отменить выбор, ну то есть как в винде при выборе файлов.

Строки генеряться из массива, который я получаю по JSON из сервера. Я могу к каждой строке что-то приписать, но хочу, чтобы производительность не пострадала.

По окончании мне нужен просто список номеров всех строк, что юзер решил выделить.

Скажите, пожалуйста, стоит ли мне на каждую строку поместить свой <div> со своим номером, или можно сделать как-то проще?

Если делать через onselectionchange то во-первых постоянно вызывается функция пока юзер меняет выделение, а хочется вызвать только когда он закончил, а также выделение происходит не по строкам, а по символам.

Может надо совсем в другую сторону посмотреть, пожалуйста, посоветуйте!

Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 05.11.2020, 07:22
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 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, это и будет выбор пользователя. Элементы, как и их контейнер могут быть любыми.
Ответить с цитированием
  #3 (permalink)  
Старый 05.11.2020, 07:34
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

Сообщение от Was-Ja
записываю большой (1000-10000) список достаточно длинных строк (название и спецификация эксперимента). Юзер может захотеть пометить одну или несколько строк,
1000 длинных строк это больше 20 страниц текста (а 10 000 больше 200)
Юзер реально будет все это читать?
Может как то группировать их?
Ответить с цитированием
  #4 (permalink)  
Старый 05.11.2020, 10:19
Кандидат Javascript-наук
Отправить личное сообщение для Was-Ja Посмотреть профиль Найти все сообщения от Was-Ja
 
Регистрация: 20.09.2020
Сообщений: 130

Спасибо большое, laimas за классный пример!

Почти то, что хочу! Но вот дополнительно очень хотелось бы, чтобы было еще так. Пусть у меня таких Text много, скажем сто, если юзер хочет с 20 по 50 пометить, то ему надо 31 раз кликнуть. Может тут надо как-то еще что-то забиндть, mouseup/mousedown, чтобы не 31 раз кликать, а разом их пометить.

Спасибо большое, voraa!

Я сам колеблюсь как тут правильно поступить. Я хочу реализовать поиск по базе данных сделанных экспериментов. Юзер их снимает примерно раз в 10 секунд и за год-два может набежать пару миллионов таких записей. Я планировал перед отрисовкой этого списка спрашивать юзера дату от и до когда он снял эксперименты, название эксперимента и еще несколько параметров. Далее по этому фильтру я ищу в базе данных список экспериментов и выплевываю на клиента только по одной строчке на каждый эксперимент, чтобы юзер далее пометил то, что он действительно хочет посмотреть. Поиск на сервере на С++, ибо сама база на пару терабайт может быть, эту часть уже реализовал, ищет быстро, около секунды, ибо там я полную индексацию всего что можно сделал.

Я планировал, что в случае если юзер слишком широко запрос организует, ограничить число строк и отрисовывать например только не больше 1000 строк, и это максимальное число юзер сам должен ввести в настройках, но юзер может таки решить посмотреть на большой набор в 10К экспериментов, но это он сам будет злобным чебурашкой, другое дело, что хочется дать ему в этом случае пометить список того, что ему надо.
Ответить с цитированием
  #5 (permalink)  
Старый 05.11.2020, 10:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Was-Ja
если юзер хочет с 20 по 50 пометить
https://javascript.ru/forum/dom-wind...tml#post480934
Ответить с цитированием
  #6 (permalink)  
Старый 05.11.2020, 19:03
Кандидат Javascript-наук
Отправить личное сообщение для Was-Ja Посмотреть профиль Найти все сообщения от Was-Ja
 
Регистрация: 20.09.2020
Сообщений: 130

Огромное спасибо всем, что помогали,

получилось, так как мне хочется!!!

Сейчас по ссылке
http://www.elegant-nmr.com/iii/ii.html
можно отмаркировать строчки, вида MyTest ... aaa ... ccc
и маркировка в точности по Вашим советам, и как мне хотелось можно отмаркировать несколько блоков.

Есть один вопрос вдогонку, пожалуйста, подскажите, в какую сторону посмотреть.

Когда мышкой я маркирую например с 3 по 9 строчку, эти строчки после маркировки становяться голубенькими (как мне и хотелось), но появляется дополнительная встроенная маркировка как если маркируешь текст, на скриншоте я маркировал с 3-ей по 9-ую строку.



Скажите, пожалуйста, как от сделать так, чтобы голубенькая моя маркировка была, а вот рыжая родная браузерная маркировка не видна была?

Спасибо!
Ответить с цитированием
  #7 (permalink)  
Старый 05.11.2020, 19:09
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
Ответить с цитированием
  #8 (permalink)  
Старый 05.11.2020, 19:28
Кандидат Javascript-наук
Отправить личное сообщение для Was-Ja Посмотреть профиль Найти все сообщения от Was-Ja
 
Регистрация: 20.09.2020
Сообщений: 130

Супер, спасибо большое, laimas, все сразу заработало!!!
Ответить с цитированием
  #9 (permalink)  
Старый 05.11.2020, 19:30
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 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;
Ответить с цитированием
  #10 (permalink)  
Старый 05.11.2020, 19:43
Кандидат Javascript-наук
Отправить личное сообщение для Was-Ja Посмотреть профиль Найти все сообщения от Was-Ja
 
Регистрация: 20.09.2020
Сообщений: 130

Верно, спасибо Вам огромное, что помогаете!!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Кнопка нажатия/отжатия паузы для нескольких аудио VolKTieR Элементы интерфейса 1 25.12.2019 23:41
Не разобрался с применением js и куки для нескольких select tart Общие вопросы Javascript 24 01.09.2017 10:09
поиск классов внутри тега yozuul jQuery 24 14.06.2013 22:00
аналог двух строк кода создания Range-объкта для ie syegorius Events/DOM/Window 2 13.01.2012 15:14
поменять цвет у нескольких строк в таблице Root Элементы интерфейса 4 21.04.2008 10:30