Question

我有以下部分代码使用内容编辑器Web部件处理SharePoint列表上的即时列表过滤器。就目前而言，它通过将用户输入与列表当前视图中所有列中的信息进行比较来过滤列表。我正在努力弄清楚如何更改此代码，以便它只将用户输入与特定字段进行比较。我知道这听起来类似于OOB列表过滤器所做的，但这不适合我的需要。

input.keyup(function() // On key presses
{
    listItems.each(function() // for each items in our list
    {
    var text = $j(this).text().toLowerCase(); // get all the text values of that list item
    if (text.indexOf(input.val().toLowerCase()) != -1) // does it match the text of our filter?
{ 
         $j(this).show();// yes! show it!
    }
    else
{
         $j(this).hide(); // nope! hide it!
    }
    });
});

我一直在做的前提是我可以改变第6行，这样我就可以引用所需的字段作为比较用户输入的数据，但无济于事。

Answer 1

它可能不适合您的用例，这是过滤VIEWS的替代（和古怪）解决方案。

代码进入计算列，如果设置为datatype = Number，则执行HTML＆amp;的JavaScript

因此无需向页面添加CEWP或任何其他代码。它适用于计算列显示在视图
中的任何位置
我将这一个计算列添加到SharePoint Online上的标准任务列表中。也适用于SP2010和SP2013。

**如果你不熟悉计算列和＆amp; Javascript请参阅http://www.viewmaster365.com/#/Create以获得更简单的介绍

它的工作原理是，当显示计算列时，它会向父DOM元素添加一个EventListener（每个显示项目的！）。
此时搜索框本身尚未加载！因此，您无法在输入标记
上附加keyup事件
当您在“搜索”框中键入时，事件会在DOM中冒泡并被所有函数捕获。

使用Formula创建计算列，并将数据类型设置为Number：

="<img src=_layouts/images/blank.gif onload={" &"TR=this.parentNode.parentNode.parentNode;" &"TR.parentNode.parentNode.parentNode.addEventListener(" &"""keyup" &""",(function(e){this.style.backgroundColor=""" &[Task Name] &""".indexOf(e.srcElement.value)===-1?""lightcoral"":""lightgreen""}).bind(TR)" &")}>"

空白IMG元素上的onload事件是在页面加载时执行函数的技巧;这个函数有很多parentNodes（需要超过搜索DIV！）来附加那些keyup事件。

对于搜索框中的每个按键，事件都会冒泡，并且会调用所有（项目）功能。

因为函数使用 bind（TR）接收TR元素的范围，所以函数在TR上下文中执行;它所要做的就是与搜索框中输入的内容进行比较（e =事件）并为TR（项目行）着色
您可以使用 .display 替换 .backgroundColor 部分，并将颜色值设置为 none 和 initial 以显示/隐藏项目行。

如果您要搜索所有/其他列，只需替换或扩展＆amp; [任务名称]＆amp;部分包含您要过滤的列。

请注意每个需要JavaScript引用的实例使用的2x双引号

另请注意，向Javascript添加空格会破坏onload声明，因为浏览器会为每个非空格中断的字符串添加引号

唉，在计算列中调试此代码是一个真正的PITA。

更新＃1：http://www.viewmaster365.com/#/Create
描述了创建此计算列的分步说明

使用JQuery在特定列表字段上进行Sharepoint即时列表筛选

1 个答案: