SharePoint 2010列表基于复选框的过滤功能优化需求

很高兴帮你解决这个SharePoint 2010列表搜索性能的问题！既然80%的条目都是Completed状态，我们可以通过先过滤掉这部分内容来大幅减少JavaScript需要处理的DOM元素，从而显著提升搜索速度。下面是具体的实现方案：

1. 在内容编辑器Web部件（CEWP）中添加UI元素 #

首先，我们需要添加一个复选框来控制是否显示已完成条目，你可以复用原有的搜索框，也直接用下面的代码添加：

<div style="margin-bottom:10px; padding:8px; background:#f5f5f5;">
  <label style="font-weight:bold;"><input type="checkbox" id="includeCompleted" checked> 包含已完成状态条目</label>
</div>
<div style="padding:0 8px;">
  <input type="text" id="searchInput" placeholder="输入关键词搜索..." style="width:300px; padding:4px;">
</div>

2. 编写优化后的JavaScript过滤逻辑 #

这部分是核心优化点，我们会先缓存列表行和状态列的位置，避免每次过滤都重复查询DOM；然后先根据复选框状态过滤已完成条目，再在剩余行中执行文本搜索。将以下代码和上面的HTML放在同一个CEWP中：

<script type="text/javascript">
// 缓存列表行和状态列索引，避免重复DOM查询
var listRows = null;
var statusColumnIndex = -1;

// 页面加载完成后初始化过滤功能
_spBodyOnLoadFunctionNames.push("initStatusFilter");

function initStatusFilter() {
    // 获取SharePoint标准列表视图的表格
    var listTable = document.querySelector(".ms-listviewtable");
    if (!listTable) {
        console.log("未找到列表视图表格");
        return;
    }

    // 找到"Current Status"列的索引
    var headerCells = listTable.querySelectorAll("th.ms-headerCellStyle");
    for (var i = 0; i < headerCells.length; i++) {
        if (headerCells[i].textContent.trim() === "Current Status") {
            statusColumnIndex = i;
            break;
        }
    }

    // 缓存所有数据行（排除表头、分页等非数据行）
    listRows = listTable.querySelectorAll("tr.ms-itmhover");
    
    // 绑定复选框和搜索框的事件
    document.getElementById("includeCompleted").addEventListener("change", applyCombinedFilter);
    document.getElementById("searchInput").addEventListener("keyup", applyCombinedFilter);
}

function applyCombinedFilter() {
    var includeCompleted = document.getElementById("includeCompleted").checked;
    var searchKeyword = document.getElementById("searchInput").value.trim().toLowerCase();

    // 遍历所有缓存的行，应用双层过滤
    listRows.forEach(function(row) {
        // 获取当前行的状态值
        var statusCell = row.querySelectorAll("td")[statusColumnIndex];
        var currentStatus = statusCell ? statusCell.textContent.trim().toLowerCase() : "";
        var isCompletedRow = currentStatus === "completed";

        // 第一步：状态过滤
        var passesStatusFilter = includeCompleted || !isCompletedRow;
        if (!passesStatusFilter) {
            row.style.display = "none";
            return;
        }

        // 第二步：文本搜索过滤
        var rowContent = row.textContent.trim().toLowerCase();
        var passesSearchFilter = searchKeyword === "" || rowContent.includes(searchKeyword);
        
        row.style.display = passesSearchFilter ? "" : "none";
    });
}
</script>

3. 关键优化点说明 #

• DOM缓存机制：页面加载时一次性获取所有列表行和状态列位置，避免每次过滤都重新查询DOM，这是提升性能的核心
• 分层过滤逻辑：先过滤掉不需要的已完成条目（当复选框未勾选时），只在剩余20%的条目上执行文本搜索，大幅减少处理量
• 事件绑定优化：使用标准的addEventListener绑定事件，比传统的内联事件更可靠，也便于后续维护
• 兼容性适配：代码适配SharePoint 2010的默认列表样式类（ms-listviewtable、ms-itmhover等），如果你的列表有自定义样式，只需调整对应的选择器即可

4. 部署测试 #

1. 打开你的SharePoint列表视图页面，点击页面顶部的“编辑页面”
2. 添加一个内容编辑器Web部件到页面合适位置
3. 编辑CEWP，切换到HTML模式，粘贴上述HTML和JS代码
4. 保存页面，测试复选框和搜索框的功能：取消勾选“包含已完成条目”后，所有Completed状态的行会立即隐藏，此时再执行搜索会明显变快！

内容的提问来源于stack exchange，提问作者Vikash Joshi