Press "Enter" to skip to content

Выделение нескольких элементов в ListView

0
В смартформах пока что еще не предусмотрен функционал выделения нескольких элементов в представлении списка. Особенно очень часто полезным бывает именно использование чек-боксов. Я покажу, как можно с помощью javascript и jquery получить требуемый функционал.


Предположим, что у нас есть представление списка сотрудников:


Задача следующая – отметить несколько сотрудников c помощью чек-боксов и показать во всплывающем сообщении их учетные записи. Для этого нам необходимо сделать следующее:

1. В настройках представления списка отметьте параметр Enable List Editing и снимите отметку с Enable Add New Row Link:

2. В дизайнере К2 добавьте столбец слева и вставьте туда элемент управления Data Label:
3. Теперь давайте добавим выражение, которое превратит данный контрол в чек-бокс. Для этого выделите DataLabel, кликните Expressions и добавьте выражение CheckBox Template со следующим содержанием:
<input type=”checkbox” class=”item” id=”{0}”>

4. Но самому контролу мы присвоим другое выражение, которое будет заменять ‘{0}’ на ИД или в нашем случае – имя пользователя. Назовем мы это выражение – ReplaceTemplate:
5. Теперь, если мы посмотрим, что у нас получилось, то вот, что увидим:

6. Теперь добавим таблицу и вставим в нее еще несколько элементов управления:
– DataLabel (AllUserNames) – для хранения всех отмеченных пользователей, сделаем невидимым;
– Toolbar Button – к этой кнопке мы потом можем привязать все правила формы, сделаем тоже невидимым; 
– DataLabel (ButtonLabelFunction) – контрол будет хранить скрипт функции, которая будет получать все отмеченные элементы и потом запускать все правила Toolbar Button, делаем контрол невидимым;
– DataLabel (ButtonLabel) – промежуточная кастомная кнопка, которая будет по клику запускать функцию ButtonLabelFunction;


7. Добавим выражение со следующим скриптом в ButtonLabel:
<a name=”ShowMessageButton” class=”SFC SourceCode-Forms-Controls-Web-Button” href=”#” style=”margin-top: 3px; margin-right: 3px; margin-bottom: 3px; margin-left: 3px;” onclick=”buttonclicked()”>Show Message</a>
8. Теперь определим функцию buttonclicked(), добавив выражение в контрол ButtonLabelFunction:
<script>
function buttonclicked()
{
var idstring = ”;
var checkboxes = $(“input:checkbox.item”);
for (var i=0; i<checkboxes.length; i++)
{
if (checkboxes[i].checked && checkboxes[i].id !== “”)
{
idstring += checkboxes[i].id +’;’;
}
}
$(“span[name=’AllUserNames’]”).SFCLabel(“option”, “text”, idstring);
$(‘.toolbar-button-inline.generic’)[0].click();
}
</script>

9. Теперь можно добавить правило в Toolbar Button, которое будет показывать сообщение с содержанием контрола AllUserNames:
10. И теперь можно проверить, что у нас получилось:

Надеюсь, описанный метод поможет вам решить другие ваши задачи.
А в следующей публикации я постараюсь показать, как можно сделать вокрлист с кастомными полями, а также завершать несколько задач одновременно.

Leave a Reply

Your email address will not be published. Required fields are marked *

4 × four =