列表视图中的事件处理程序 [英] Event Handler in List View

问题描述

您好，我希望在自定义列表视图中创建一个事件处理程序。我希望它在状态字段中显示两个超链接（完成|隐藏）

字段

名称（单行文字）

发行（多行文字）

状态（选择[已记录，已完成/显示，已完成/隐藏，未完成/已隐藏] ）b
已完成日期（日期时间）

已完成（人或团体）

隐藏（日期时间）

隐藏（人或团体）

查看

姓名，问题，状态*

*例如（John Doe，无法打开，完成|隐藏）

行动

• 用户选择"完成"
  >>更新选择"已完成/显示"，更新已完成按日期和单击时间，更新已完成单击链接的用户。该字段现在将显示（完成日期时间|隐藏）
  
  *例如（John Doe，无法打开，完成11/02/2018 |隐藏）
  
  
• 用户选择"隐藏"完成后
  >>更新选择"已完成/隐藏"，更新隐藏日期和点击时间，更新隐藏用户点击链接的用户。
  
  如果用户选择"隐藏"它将隐藏视图中的记录。
• 用户选择"隐藏"没有完成
  >>更新选择"不完整/隐藏"，更新隐藏开启日期和点击时间，更新隐藏者更新到点击链接的用户。
  
  如果用户选择"隐藏"它将隐藏视图中的记录。

解决方案

按CSR自定义列表视图，然后触发客户端JavaScript逻辑以更新列表项值。

这是一个简单的演示（测试演示插入脚本编辑器webpart到列表视图页面，然后将脚本插入脚本编辑器webpart）：

 function completeClick（itemID）{
 alert（" CurrentItemID：" + itemID）; 
 //做真实逻辑
} 
 
函数hideClick（itemID）{
 alert（" CurrentItemID：" + itemID）; 
 //做真实逻辑
} 
（function（）{
'使用严格'; 
 var CustomCtx = {}; 
 / ** 
 *初始化
 * / 
函数init（）{
 
 CustomCtx.Templates = {}; 
 
 CustomCtx.Templates.Fields = {
'状态'：{
'查看'：customDisplay 
} 
}; 
 
 //注册自定义模板
 SPClientTemplates。 TemplateManager.RegisterTemplateOverrides（CustomCtx）; 
} 
 / ** 
 *渲染模板
 * / 
函数customDisplay（ctx）{
 var currentID =' '; 
 //来自上下文获取当前项目，它的值为
 if（ctx！= null&& ctx.CurrentItem！= null）
 currentID = ctx.CurrentItem.ID ; 
 
 var el ='< label onclick =" completeClick（'+ currentID +'）">完成< / label> |< label oncli CK = QUOT; hideClick（" + currentID +"）">隐藏< /标签>"; 
 
 //渲染HTML5文件输入代替OOTB 
 return el; 
} 
 
 //运行我们的intiialization 
 init（）; 
 
}）（）; 

SharePoint CSR：

https://www.codeproject.com/Articles/620110/SharePoint-Client-Side-Rendering-List-Views

SharePoint JSOM CRUD样本。

https://www.c-sharpcorner.com/blogs/crud -operation-在SharePoint的-U sing-java-script

最好的问候，

利

Hello, I am looking to create an event handler in a custom list view. I want it to display two hyperlinks (Complete | Hide) in a Status field

Fields

Name (Single Line Text)
Issue (Multiple Line Text)
Status (Choice [Logged,Completed/Show,Completed/Hidden,Incomplete/Hidden])
Completed On (DateTime)
Completed By (Person or Group)
Hidden On (DateTime)
Hidden By (Person or Group)

View

Name, Issue, Status*
*For Example (John Doe, Unable to open door, COMPLETE | HIDE)

Actions

• User Selects "Complete" >> Update Choice "Completed/Show", Update Completed On to date and time of click, Update Completed by to user who clicked link. The field would now display (Complete DateTime | Hide)
  *For Example (John Doe, Unable to open door, COMPLETED 11/02/2018 | HIDE)
  
• User Selects "Hide" after its been Completed >> Update Choice "Completed/Hidden", Update Hidden On to date and time of click, Update Hidden By to user who clicked link.
  If the user selects "Hide" it will hide the record from the view.
• User Selects "Hide" without it being Completed >> Update Choice "Incomplete/Hidden", Update Hidden On to date and time of click, Update Hidden By to user who clicked link.
  If the user selects "Hide" it will hide the record from the view.

解决方案

Hi,

Custom the list view by CSR, then trigger client side JavaScript logic to update list item value.

Here is simple demo(the test demo insert a script editor webpart to list view page, then insert the script to script editor webpart):

	function completeClick(itemID){
		alert("CurrentItemID:"+itemID);
		//to do real logic
	}
	
	function hideClick(itemID){
		alert("CurrentItemID:"+itemID);
		//to do real logic
	}
(function () {
    'use strict';
    var CustomCtx = {};
    /**
     * Initialization
     */
    function init() {

        CustomCtx.Templates = {};

        CustomCtx.Templates.Fields = {
            'Status': {
                'View': customDisplay
            }
        };

        // Register the custom template
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(CustomCtx);
    }
    /**
     * Rendering template
     */
    function customDisplay(ctx) {
        var currentID = '';
        //from the context get the current item and it's value 
        if (ctx != null && ctx.CurrentItem != null)
            currentID = ctx.CurrentItem.ID;

        var el = '<label onclick="completeClick('+currentID+')">Complete</label>|<label onclick="hideClick('+currentID+')">Hide</label>';

        // Render the HTML5 file input in place of the OOTB
        return el;
    }
		
    // Run our intiialization
    init();

})();

SharePoint CSR:

https://www.codeproject.com/Articles/620110/SharePoint-Client-Side-Rendering-List-Views

SharePoint JSOM CRUD sampe.

https://www.c-sharpcorner.com/blogs/crud-operation-in-sharepoint-using-java-script

Best Regards,

Lee

这篇关于列表视图中的事件处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！