none
Ширина столбца у списка SharePoint RRS feed

  • Вопрос

  • Здравствуйте.

    Хочу сделать ширину столбца у списка SharePoint аж 12 пикселей.

    Не спрашивайте почему так мало )) я отображаю там квадратик цветной. 

    Проблема в том, что ширина столбца могла бы быть меньше, если бы не стрелка с выпадашкой сортировки.

    Т.е. на отображение стрелки тоже резервируется место, и в итоге, столбец не такой узкий как хотелось бы.

    Может как то можно причесать через стили?

    На данный момент я реализую отрисовку цветных квадратиков через CSR:

    function iconM1ViewTemplate(ctx) {
    			
    	var Metric = '';		
    	var redMetric = '<a style=";margin-left:-3px;margin-top:1px;" href="' + ctx.CurrentItem.FileRef + '/"><img border="0" src="/projects/SiteAssets/img/metric_red.png"></a>';		
    	var greenMetric = '<a style=";margin-left:-3px;margin-top:1px;" href="' + ctx.CurrentItem.FileRef + '/"><img border="0" src="/projects/SiteAssets/img/metric_green.png"></a>';
    	var blueMetric = '<a style=";margin-left:-3px;margin-top:1px;" href="' + ctx.CurrentItem.FileRef + '/"><img border="0" src="/projects/SiteAssets/img/metric_blue.png"></a>';
    	var yellowMetric = '<a style=";margin-left:-3px;margin-top:1px;" href="' + ctx.CurrentItem.FileRef + '/"><img border="0" src="/projects/SiteAssets/img/metric_yellow.png"></a>';
    	var orangeMetric = '<a style=";margin-left:-3px;margin-top:1px;" href="' + ctx.CurrentItem.FileRef + '/"><img border="0" src="/projects/SiteAssets/img/metric_orange.png"></a>'
    		
    	switch (ctx.CurrentItem.metric1) {		
    		case '1': Metric = redMetric;		
    		break;
    		case '2': Metric = orangeMetric;		
    		break;				
    		case '3': Metric = yellowMetric;		
    		break;		
    		case '4': Metric = greenMetric;		
    		break;		
    		case '5': Metric = blueMetric;		
    		break;				
    	}		    	
    	
    	return Metric;			
    }
    
    
    
    	  Templates: {
    		Fields: {
    		  'metric1': {
    			View: iconM1ViewTemplate
    		  }
                    }
              }
    
    Как бы там указать, что не нужна мне сортировка по этим столбцам?

    21 февраля 2018 г. 13:15

Ответы

  • Нашел решение своей проблемы.
    Возможно оно не очень красивое, но работает так как мне нужно.

    Напомню, что меня не устраивала ширина некоторых столбцов, а именно, мне хотелось, чтобы ширина была не более 12px, но из-за стрелок сортировки сам хэдер был широким, и тем самым делал широким весь столбец с его содержимым.

    Вариант делать в переопределении класса display:none; не устраивал, т.к. не смотря на то, что заголовки исчезали, расстояние между столбцами уменьшить не удавалось. 

    В конечном итоге сработал такой вариант:

    1) Переопределяем стили заголовков столбцов:

    <style type="text/css" > 
    .ms-viewheadertr th:nth-child(2) 
    {  
    	padding:0px;
    }  
    </style>
    

    2) В методе SPClientTemplates.TemplateManager.RegisterTemplateOverrides в разделе Templates.Header вызываем функцию возвращающую стандартный хэдер списка. Точнее его HTML блок.

    	SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
    			  
    	  Templates: {	  
    		Header: drawHeader,
                    Fields: {
                    ...
                    }
              }
                    

    3) Код функции drawHeader:

    function drawHeader(ctx) {
    
    	var s = RenderHeaderTemplate(ctx);	
    	var r1 = s.replace("1</a>", "</a>");
    	var r2 = r1.replace("2</a>", "</a>");
    	var r3 = r2.replace("3</a>", "</a>");
    	var r4 = r3.replace("4</a>", "</a>");
    	var r5 = r4.replace("5</a>", "</a>");
    	
    	return r5;
    }
     

    где:

    "1</a>"
    "2</a>"

    и т.д. это названия столбцов в возвращаемой строке определения заголовков. Мы просто удаляем их и всё.

    26 февраля 2018 г. 9:37

Все ответы

  • Или подскажите как скрыть заголовок у конкретного столбца?

    Возможно мне это тоже подойдет.

    22 февраля 2018 г. 5:20
  • Нашел как убрать все заголовки:

    <style type="text/css" > 
    .ms-viewheadertr   
    {  
      display:none;  
    }  
    </style>
    

    Но это мне не подходит, нужно убрать заголовок только у определённого столбца.

    Подскажите плиз как это сделать?

    22 февраля 2018 г. 6:29
  • Добрый день

    предлагаю попробовать так (где 2 - номер столбца)

    <style type="text/css" > 
    .ms-viewheadertr   th:nth-child(2n)
    {  
      display:none;  
    }  
    </style>


    мой блог не много о SharePoint

    22 февраля 2018 г. 6:35
    Модератор
  • Как то странно получилось, нужных заголовков нет, но их значения "залезли" под другие (оставшиеся) заголовки...
    22 февраля 2018 г. 6:49
  • <style type="text/css" > 
    .ms-viewheadertr th:nth-child(2n) *
    {  
      display:none;  
    }  
    </style>


    мой блог не много о SharePoint

    22 февраля 2018 г. 6:53
    Модератор
  • Владимир, спасибо!

    Сейчас заголовки пустые, но их ширина все равно осталась какой была.

    Т.е. мне надо сделать так, чтобы ширина столбца была по его содержимому, т.е. 10-12 пикселей.

    22 февраля 2018 г. 7:02
  • Долго мучился в поисках идей как изменить ширину столбца, и при помощи отладочного режима IE (F12)

    нарыл следующую фишку:

    Если у тега <th> заменить класс <th class="ms-vh2"> на <th class="ms-vh1"> то всё отрисовывается как нужно!

    Теперь вопрос: Как у указанного столба заменить один класс другим?

    • Предложено в качестве ответа Kaplin VladimirModerator 22 февраля 2018 г. 13:05
    • Отменено предложение в качестве ответа Kaplin VladimirModerator 22 февраля 2018 г. 13:06
    22 февраля 2018 г. 11:41
  • Нашел решение своей проблемы.
    Возможно оно не очень красивое, но работает так как мне нужно.

    Напомню, что меня не устраивала ширина некоторых столбцов, а именно, мне хотелось, чтобы ширина была не более 12px, но из-за стрелок сортировки сам хэдер был широким, и тем самым делал широким весь столбец с его содержимым.

    Вариант делать в переопределении класса display:none; не устраивал, т.к. не смотря на то, что заголовки исчезали, расстояние между столбцами уменьшить не удавалось. 

    В конечном итоге сработал такой вариант:

    1) Переопределяем стили заголовков столбцов:

    <style type="text/css" > 
    .ms-viewheadertr th:nth-child(2) 
    {  
    	padding:0px;
    }  
    </style>
    

    2) В методе SPClientTemplates.TemplateManager.RegisterTemplateOverrides в разделе Templates.Header вызываем функцию возвращающую стандартный хэдер списка. Точнее его HTML блок.

    	SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
    			  
    	  Templates: {	  
    		Header: drawHeader,
                    Fields: {
                    ...
                    }
              }
                    

    3) Код функции drawHeader:

    function drawHeader(ctx) {
    
    	var s = RenderHeaderTemplate(ctx);	
    	var r1 = s.replace("1</a>", "</a>");
    	var r2 = r1.replace("2</a>", "</a>");
    	var r3 = r2.replace("3</a>", "</a>");
    	var r4 = r3.replace("4</a>", "</a>");
    	var r5 = r4.replace("5</a>", "</a>");
    	
    	return r5;
    }
     

    где:

    "1</a>"
    "2</a>"

    и т.д. это названия столбцов в возвращаемой строке определения заголовков. Мы просто удаляем их и всё.

    26 февраля 2018 г. 9:37