0

我正在尝试使用 JSLink 修改列表中 SharePoint 2013 的任务名称列的颜色。我可以使用以下代码覆盖所有其他列：

var overrideCtx = {
    Templates: {
        Fields: {
            ‘Title': {‘View’ : taskSample.TitleRendering },
            ‘PercentComplete': {‘View’ : taskSample.PercentCompleteRendering}
        }
    }
};

由于某种原因，当我在 Google Chrome 中调试代码时，总是会跳过 TitleRendering 函数，而 PercentCompleteRendering 函数却可以正常执行。

有人对这个问题有任何见解吗？

谢谢

我在下面的答案中尝试了 LinkTitle 的建议；它没有解决我的问题。我包括我所有的代码供审查。还有其他建议吗？

var taskSample = taskSample || {};

taskSample.CustomizeFieldRendering = function () {
  RegisterSod('hierarchytaskslist.js', '/_layouts/15/hierarchytaskslist.js');
  LoadSodByKey('hierarchytaskslist.js', null);
debugger;
    // Intialize the variables for overrides objects
  var overrideCtx = {
    Templates: {
      Fields: {
	  'Unit': { 
          'View' : taskSample.UnitRendering
        },
	   'LinkTitle': { 
          'View' : taskSample.TitleRendering
        },
        'PercentComplete': { 
          'View' : taskSample.PercentCompleteRendering
        }		
      }
    }
  };

  // Register the override of the field
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
}
taskSample.PercentCompleteRendering = function (ctx) {
debugger;
	var output = [];
	var _dueDate = new Date(ctx.CurrentItem.DueDate);         
	var _now = new Date();    
	var nowPlus = new Date();    
	nowPlus.setDate(_now.getDate()+7);
	output.push('<div style="background: #dbdbdb; display:block; height: 20px; width: 150px;">');
	if ((_dueDate >= _now && _dueDate <= nowPlus)&& (ctx.CurrentItem.PercentComplete.replace(" %", "") === "0") ) {   
	    output.push('<span style="color: #dbc900; font-weight: bold; position:absolute; text-align: center; width: 150px;">');
	 }   		
	else if ((_dueDate < _now)&& (ctx.CurrentItem.PercentComplete.replace(" %", "") === "0") ) {   
	    output.push('<span style="color: #CC0000; font-weight: bold; position:absolute; text-align: center; width: 150px;">');
	 }   		
	else{
		output.push('<span style="color: #fff; font-weight: bold; position:absolute; text-align: center; width: 150px;">');	
	}	
	output.push(ctx.CurrentItem.PercentComplete);
	output.push('</span>');
	output.push('<div style="height: 100%; width: ');	
	   if (_dueDate == 'Invalid Date') {   
	     output.push(ctx.CurrentItem.PercentComplete.replace(" %", "") + '%; background: #757575;');    //grey 
		 }   
		else if (ctx.CurrentItem.PercentComplete.replace(" %", "") === "100")      {       
	 	output.push(ctx.CurrentItem.PercentComplete.replace(" %", "") + '%; background: #339900;'); //gree		
		}   
		else if (_dueDate < _now)     {       
	 	output.push(ctx.CurrentItem.PercentComplete.replace(" %", "") + '%; background: #CC0000;'); //red 		
		}         
		else if (_dueDate >= _now && _dueDate <= nowPlus)     {        
		output.push(ctx.CurrentItem.PercentComplete.replace(" %", "") + '%; background: #dbc900;');  //yellow 		
		 }    
	  	else if (_dueDate > _now)     {        
		output.push(ctx.CurrentItem.PercentComplete.replace(" %", "") + '%; background: #339900;');  //green 			
		 }		 
	output.push('"></div></div>');
	return output.join('');
}
taskSample.UnitRendering = function (ctx) {
debugger;
	var output = [];
	var _Unit = ctx.CurrentItem.Unit;
    switch(_Unit) {
	     case "Unit 1":
	         output.push('<span style="color: DarkMagenta;">');
			 output.push(ctx.CurrentItem.Unit);
			 output.push('</span>');
	        break;
	     case "Unit 2":
	         output.push('<span style="color: DarkRed;">');
			 output.push(ctx.CurrentItem.Unit);
			 output.push('</span>');
	        break;
		 case "Unit 3":
	        output.push('<span style="color: MidnightBlue;">');
			 output.push(ctx.CurrentItem.Unit);
			 output.push('</span>');
	        break;
		 case "Unit 4":
	         output.push('<span style="color: DarkOliveGreen ;">');
			  output.push(ctx.CurrentItem.Unit);
			 output.push('</span>');
	        break;
		 case "Unit 5":
	         output.push('<span style="color: GoldenRod;">');
			  output.push(ctx.CurrentItem.Unit);
			 output.push('</span>');
	        break;
		 case "Unit 6":
	        output.push('<span style="color: Coral;">');
			 output.push(ctx.CurrentItem.Unit);
			 output.push('</span>');
	        break;
	     default:
		  output.push(ctx.CurrentItem.Unit);
	        break;
	  }		
	return output.join('');
}
taskSample.TitleRendering = function (ctx) {
debugger;
	var output = [];
	var _Unit = ctx.CurrentItem.Unit;		
		switch(_Unit) {
	     case "Unit 1":
	         output.push('<span style="color: DarkMagenta;">');
			 output.push(ctx.CurrentItem.Title);
			 output.push('</span>');
	        break;
	     case "Unit 2":
	         output.push('<span style="color: DarkRed;">');
			 output.push(ctx.CurrentItem.Title);
			 output.push('</span>');
	        break;
		 case "Unit 3":
	        output.push('<span style="color: MidnightBlue;">');
			 output.push(ctx.CurrentItem.Title);
			 output.push('</span>');
	        break;
		 case "Unit 4":
	         output.push('<span style="color: DarkOliveGreen ;">');
			  output.push(ctx.CurrentItem.Title);
			 output.push('</span>');
	        break;
		 case "Unit 5":
	         output.push('<span style="color: GoldenRod;">');
			  output.push(ctx.CurrentItem.Title);
			 output.push('</span>');
	        break;
		 case "Unit 6":
	        output.push('<span style="color: Coral;">');
			 output.push(ctx.CurrentItem.Title);
			 output.push('</span>');
	        break;
	     default:
		  output.push(ctx.CurrentItem.Title);
	        break;
		}		
	return output.join('');
	}
taskSample.CustomizeFieldRendering();

4

1 回答 1

0

在任务默认视图Task Name (linked to item with edit menu)列中，默认使用渲染任务名称。如果是这样，那么您应该使用LinkTitle内部名称而不是Title.

例子 

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

   SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
     Templates: {
        Fields: {
            'LinkTitle' : { 
                'View' : function(ctx){
                          var percentValue = ctx.CurrentItem.PercentComplete; 
                             if(percentValue == "100 %"){
                                 return String.format('<span style="background-color:#00ff00">{0}</span>',ctx.CurrentItem.Title);
                             }
                             else {
                                 return String.format('<span>{0}</span>',percentValue = ctx.CurrentItem.Title);
                             }
                         } 
             }
        }
     }
   }); 

});

结果

在此处输入图像描述

于 2015-02-20T10:18:57.657 回答