如何在Sharepoint 2013中使用JSLink修改任务名称列

Question

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

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

由于某些原因，当我在Google Chrome中调试代码时，始终会跳过TitleRendering函数，而PercentCompleteRendering函数执行正常。

有没有人对此问题有任何见解？

由于

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

＆＃13;

＆＃13;

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();

＆＃13;

＆＃13;

＆＃13;

Answer 1

在任务中，默认情况下，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);
                             }
                         } 
             }
        }
     }
   }); 

});

<强>结果