[ELMA3] Использование в отчетах раскрывающихся блоков (катов)

Удобное представление большого объема информации – важная задача проектирования интерфейса. В этой статье будет описано использование раскрывающихся блоков (катов) с помощью .NET Razor. Более подробно о создании отчетов можно узнать здесь.

Для начала работы, на странице Вашего отчета Настройки отображения, в разделе Макет отчета, необходимо выбрать .NET Razor и перейти к вкладке. Откроется пустой лист для разметки. Нет необходимости все делать вручную, на верхней панели находится Мастер шаблона (подробней о использовании мастера можно узнать в справке), с помощью которого будет сгенерирован базовый код макета, который будет выглядеть примерно следующим образом:

Раскрывающиеся блоки (каты)

Скроем некоторую информацию в раскрывающийся блок (кат).

Сперва необходимо подключить пространство имен:

@using EleWise.ELMA.Web.Mvc.Models.Panels

А затем конструкцию:

@using (Html.CollapsiblePanel(new CollapsiblePanel
				{
					Header = "Подробнее",
					Expanded = false,
					Id = "CommentsFromCollapsiblePanel" + i.ToString(),
					PlusMinus = true,					
					SaveState = false
				}))
				{
					using (Html.ElmaForm())
					{
					}
				}

Между {} будет находиться то, что необходимо скрыть. Внутри можно использовать стандартные html теги, например, <p></p> или <div></div>. В строке Header = "Подробнее" – название раскрывающегося блока. Конструкцию необходимо вставлять внутри цикла @foreach.

Для того, чтобы раскрывающийся блок был у каждой записи необходим счетчик. Нужно объявить переменную непосредственно перед циклом @foreach:

@{int i=0;}

Внутри цикла необходимо увеличивать счетчик: i++;

Целиком код будет выглядеть следующим образом:

@using EleWise.ELMA.BPM.Web.Reports.Extensions
@using System.Data
@using EleWise.ELMA.Web.Mvc.Html
@model EleWise.ELMA.BPM.Web.Reports.Models.ReportParametersInfo
@using EleWise.ELMA.Web.Mvc.Models.Panels

@{
    //Получение источника данных по имени
    var data = Model.DataSources["Данные"];
    //Выполнение HQL или SQL запроса, содержащегося внутри источника данных, и получение результата
    DataTable items = data.Get();
}




<style>
.list th {
    background: none repeat scroll 0 0 #666666;
    color: #FFFFFF;
    padding: 5px;
    text-align: left;
}
.list td {
    border-bottom: 1px solid #CCCCCC;
    padding: 3px 5px;
    vertical-align: middle;
}
</style>

  
<div>
<p style="font-size:20px; text-align:center;"></p>

@* Включает постраничное отображение источника данных *@
@(Html.Pager(Model, data))
@* Заголовки колонок отчета. Название колонок берутся из названий столбцов таблицы, содержащей результат выполнение источника данных *@

<table class="list" width="100%" style="margin-top: 10px; font-size: 11px;">
    <tr>
        
        <th scope="col">Наименование</th>
        
    </tr>
@{int i=0;}
    @* Результат выполнения источника данных представляет собой таблицу. Пробегаемся по строкам таблицы и отображаем значение столбцов *@
    @foreach (DataRow row in items.Rows)
    { 
	i++;
        <tr valign="top">
           
            <td >
				@row["Name"]				
				@using (Html.CollapsiblePanel(new CollapsiblePanel
				{
					Header = "Подробнее",
					Expanded = false,
					Id = "CommentsFromCollapsiblePanel" + i.ToString(),
					PlusMinus = true,					
					SaveState = false
				}))
				{
					using (Html.ElmaForm())
					{
						<p>Автор: @Url.EntityLink(row,typeof(EleWise.ELMA.Security.Models.IUser),"AuthorID","UsFullName",true)</p>
						<p>Исполнитель: @Url.EntityLink(row,typeof(EleWise.ELMA.Security.Models.IUser),"Executor","FullName",true)</p>
						<p>Дата завершения: @row["EDate"]</p>
						<p><a href="/Tasks/Task/Execute/@row["Id"].ToString()">Перейти к задаче</a></p>
					}
				}
            </td>
           

        </tr>
	
	
    }
</table>


</div>

А отчет будет выглядеть так:

Для более четкого выделения раскрывающегося блока, его можно поместить в теги <div></div> с указанием необходимых параметров.

В качестве примера был добавлен новый стиль для тега <div> в стилях <style></style>:

.brd {
    border: 1px solid #CCCCCC;
    background: #D6E5F3;
    color: black; 
    font-size: 9px;
   }

В итоге код выглядит примерно следующим образом:

<div class="brd">
@using (Html.CollapsiblePanel(new CollapsiblePanel
				{
					Header = "Подробнее",
					Expanded = false,
					Id = "CommentsFromCollapsiblePanel" + i.ToString(),
					PlusMinus = true,					
					SaveState = false
				}))
				{
					using (Html.ElmaForm())
					{
						<p>Автор: @Url.EntityLink(row,typeof(EleWise.ELMA.Security.Models.IUser),"AuthorID","UsFullName",true)</p>
						<p>Исполнитель: @Url.EntityLink(row,typeof(EleWise.ELMA.Security.Models.IUser),"Executor","FullName",true)</p>
						<p>Дата завершения: @row["EDate"]</p>
						<p><a href="/Tasks/Task/Execute/@row["Id"].ToString()">Перейти к задаче</a></p>
					}
				}
</div>

Итоговый вариант отчета с раскрывающимся блоком выглядит следующим образом: