Вывод таблицы с чек-боксами

Данная Razor-форма упрощает работу с переменными типа Да/нет в блоках: для того, чтобы присвоить значение, не требуется открытие строки блока на редактирование.

Для корректной работы Razor-формы необходимо:

  • наличие блока в контексте. В блоке должно быть свойство типа Строка, в которое записывается Id текущей записи блока. Пример: 

Рис. 1. Свойства типа "Строка" в блоке

  • строчная контекстная переменная (ProductString), которая заполняется по определенному шаблону.

После того, как блок был заполнен вручную, необходимо выполнение следующего сценария:

foreach(var tmpProduct in context.BuyProducts)
{
        tmpProduct.IdRec = tmpProduct.Id.ToString(); // записываем Id строки 
        context.ProductString    += "#" + tmpProduct.Id.ToString() + "~0"; // # - разделитель между записями блока, ~0 – запись не выбрана, ~1 – запись выбрана
 }

Для того, чтобы добавить Razor на форму, переходим в конструктор форм.

Чтобы создать форму процессной задачи через конструктор форм, необходимо сделать следующее:

  • открываем настройки задачи, переходим на вкладку Форма (контекст);
  • выбираем тип формы Конструктор форм и нажимаем Создать новую форму.

Рис. 2. Вкладка "Форма (контекст)" настроек задачи. Кнопка "Создать новую форму"

В конструкторе форм добавляем на форму элемент формы Панель, размещаем в том месте, где должна быть отображена таблица.

Рис. 3. Вкладка Дизайнера "Формы". Панель инструментов. Кнопка "Панель"

В настройках панели переходим на вкладку Системные и нажимаем кнопку Редактировать.

Рис. 4. Окно настройки панели. Вкладка "Системные". Кнопка "Редактировать"

В открывшемся окне можно поменять название представления (не обязательно) и нажать кнопку ОК.

Рис. 5. Диалоговое окно выбора представления

В открывшемся окне нажимаем кнопку Изменить.

Рис. 6. Кнопка "Изменить"

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

Пример Razor-формы:

@model  EleWise.ELMA.Workflow.Web.Models.WorkflowTaskInfo
@using System.Web.Mvc.Html
@using System.Collections

@System.Web.Mvc.Html.InputExtensions.Hidden(Html, "Entity.ProductString", ((dynamic)Model.Entity).ProductString)
@{
	var ProductList = ((IEnumerable)((dynamic)Model.Entity).BuyProducts).Cast<dynamic>().ToArray();	
 }

<div style="overflow:hidden;">
	<div style="width: 961px;" id="_7cad3d1d54444bf1bcbcc26f52478e72_10130_container">
		<div class="t-widget t-grid" id="_7cad3d1d54444bf1bcbcc26f52478e72_10130" provider="00000000-0000-0000-0000-000000000000">
			<div class="t-grid-header">
				<div class="t-grid-header-wrap">
					<div class="JCLRgrips" style="width: 371px;"> @* общая ширина таблицы + 1*@
						<div class="JCLRgrip" style="left: 201px; height: 28px;"> @* 201 - ширина первого столбца + 1*@
							<div class="JCLRgripInner"></div>
							<div class="JColResizer" style="cursor:e-resize"></div>
						</div>
						<div class="JCLRgrip" style="left: 301px; height: 28px;"> @* 301 - ширина первых друх столбцов + 1*@
							<div class="JCLRgripInner"></div>
							<div class="JColResizer" style="cursor:e-resize"></div>
						</div>
						<div class="JCLRgrip" style="left: 371px; height: 28px;"> @* 371 - суммарная ширина столбцов*@
							<div class="JCLRgripInner"></div>
							<div class="JColResizer" style="cursor:e-resize"></div>
						</div>
					</div>
					<table cellspacing="0" class="resize-mode-gui locked-mode JColResizer" id="_7cad3d1d54444bf1bcbcc26f52478e72_10130_table" style="width: 0px;">
						<colgroup>
							<col style="width:200px"> @* ширина первого столбца*@
							<col style="width:100px"> @* ширина второго столбца*@
							<col style="width:70px"> @* ширина третьего столбца*@
						</colgroup>
							<tbody>
								<tr>									
									<th class="t-header t-first-header" scope="col" style="width: 200px;"> @*200 - ширина первого столбца*@
										<span class="t-header-content"  ALIGN="center">Наименование</span> @* наименование первого столбца*@
									</th>
									<th class="t-header t-header" scope="col" style="width: 100px;"> @* 100 - ширина второго столбца*@
										<span class="t-header-content"  ALIGN="center">Количество</span> @* наименование второго столбца*@
									</th>
									<th class="t-header t-last-header" scope="col" style="width: 70px;"> @* 70 - ширина последнего столбца*@
										<span class="t-header-content"  ALIGN="center">Куплено</span> @* наименование последнего столбца*@
									</th>
								</tr>
							</tbody>
					</table>
				</div>
			</div>
			<div class="t-grid-content" style="height:100%;padding-bottom:1px">
				<table cellspacing="0" class="resize-mode-gui locked-mode" style="width: 371px;">
					<colgroup>
						<col style="width:200px">
						<col style="width:100px">
						<col style="width:70px">
					</colgroup>					
					<tbody>						
						@for(var i=0; i<ProductList.Length; i++) 
						{
							var b = ProductList[i];	@* получаем i-ую запись блока*@								
							<tr class="t-last-row">																													
								<td class="t-first" ALIGN="center" valign = "middle">@(b.ProductName)</td> @* получаем значение свойства ProductName записи блока*@	
								<td ALIGN="center">@(b.Amount)</td>	@* получаем значение свойства Amount записи блока*@							
								<td class="t-last" align ="center"><input id="check_@(b.IdRec)" onclick="BL_Click(@(b.IdRec))" type="checkbox"></td> @* выводим чек-бокс, который будет работать со свойством IDRec записи блока*@	
							</tr>
						}
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
		
 <script type="text/javascript">
	$(document).ready(function () {		
		$(’#TaskCustomFieldsPanel_title’).hide();
		$(’#TaskCustomFieldsPanel’).hide();
		
		var ArrIDProducts	 = ’@(Html.ViewData.TemplateInfo.GetFullHtmlFieldId("Entity.ProductString"))’; 	@*получаем Id 	ProductString*@
		var prodId = $( "input[name=’__DynamicFormSettings.DynamicFormsProviderData’]" ).val();	
		var StListProd  = $(’#’+ArrIDProducts).val(); @*плучаем значение ProductString*@
		var prodlist = $.cookie("prodList"+prodId); @* получаем из cookie предыдущее значение (чтобы при обновлении не исчезали галочки)*@
		
         if(prodlist == null) {
		   prodlist = StListProd; @*если значения в cookie нет, берем то, что получили из контекста*@
		}
		else{
		   $(’#’+ArrIDProducts).val(prodlist);  @*если есть значение, сохраняем из cookie*@
		}
         				
			var StPort = window.location.port;
			var StHost = window.location.host;
			
			@*получаем значение true/false по каждому элементу *@
			var list = prodlist.split(’#’);
			$.each(list, function(index, value) {
			   var item = value.split(’~’);
				
				var id = item[0];
				var checked = item[1];
				var inputElement = $(’#check_’+id);
				if(checked == ’1’){
				   inputElement.prop(’checked’, true);
				}
				else{
				   inputElement.prop(’checked’, false);
				}
			})
	});	
	
	function BL_Click(StCancel)
	{
		var StEntityProd = ’@(Html.ViewData.TemplateInfo.GetFullHtmlFieldId("Entity.ProductString"))’; @*получаем Id 	ProductString*@
		var StListProd  = $(’#’ + StEntityProd).val(); @*плучаем значение ProductString*@
         	
		var PozSubstr  = StListProd.indexOf("#" + StCancel); @*получаем Id выбранного элемента*@		
		var TmpIdTask  = "" + StCancel;
		var SizeSubstr = TmpIdTask.length;	
		
		var taskId = $( "input[name=’__DynamicFormSettings.DynamicFormsProviderData’]" ).val();@*получаем Id задачи*@
		
		if(PozSubstr>(-1))
		{ 
			var StSubstrTask = StListProd.substr(PozSubstr+1, SizeSubstr); @*получаем Id*@
			var StSubstr_2	 = StListProd.substr(PozSubstr + SizeSubstr +2, 1); @*получаем значение - 0 или 1*@
			
			@*присваиваем новое значение признака*@
			if(StSubstr_2=="0")
			{
				StListProd = StListProd.replace("#" +StCancel+ "~0", "#" +StCancel+ "~1");
				$(’#’+StEntityProd).val(StListProd);
			}
			if(StSubstr_2=="1") 
			{
				StListProd = StListProd.replace("#" +StCancel+ "~1", "#" +StCancel+ "~0");
				$(’#’+StEntityProd).val(StListProd); 
			}
			
		}
		$.cookie("prodList"+taskId, StListProd);
	}
</script>

 Пример отображения:

 Рис. 7. Пример блока с чек-боксами

Внимание!
При копировании из браузера может возникнуть проблема, связанная с неправильным отображением апострофов. На рисунке ниже приведен пример того, как должны выглядеть апострофы.
Если в razor-форме использованы некорректные апострофы, форма работать не будет, необходимо заменить их на корректные (это можно сделать при помощи сочетания клавиш ctrl+F, Заменить).