如何为Azure DevOps待办视图实现强制列排序？

方案一：强制加载所有待办项后执行自定义排序 #

由于待办视图采用虚拟滚动（动态加载/卸载屏幕外内容），原有脚本仅能处理已加载的项。可以先通过脚本自动滚动加载所有内容，再结合事件委托实现全量排序：

// 自动滚动加载所有待办项
function loadAllItems() {
    const scrollContainer = document.querySelector('.work-item-grid-container');
    if (!scrollContainer) return;

    let lastScrollHeight = 0;
    const loadInterval = setInterval(() => {
        scrollContainer.scrollTop = scrollContainer.scrollHeight;
        if (scrollContainer.scrollHeight === lastScrollHeight) {
            clearInterval(loadInterval);
            console.log('所有待办项加载完成');
            initSortFunctionality();
        }
        lastScrollHeight = scrollContainer.scrollHeight;
    }, 500);
}

// 初始化排序事件（事件委托处理动态元素）
function initSortFunctionality() {
    document.querySelector('.grid-header').addEventListener('click', (e) => {
        const targetCol = e.target.closest('.grid-header-column');
        if (!targetCol) return;

        // 切换排序状态
        if (targetCol.classList.contains('up')) {
            targetCol.classList.replace('up', 'down');
        } else if (targetCol.classList.contains('down')) {
            targetCol.classList.replace('down', 'up');
        } else {
            // 清除其他列的排序标记
            document.querySelectorAll('.grid-header-column').forEach(col => {
                col.classList.remove('up', 'down');
            });
            targetCol.classList.add('up');
        }

        // 执行列排序
        sortWorkItems(targetCol);
    });
}

// 根据目标列排序待办项
function sortWorkItems(column) {
    const colIndex = Array.from(column.parentElement.children).indexOf(column);
    const sortDir = column.classList.contains('up') ? 'asc' : 'desc';
    const grid = document.querySelector('.work-item-grid');
    const items = Array.from(grid.querySelectorAll('.work-item-row'));

    // 根据列内容类型适配排序逻辑
    items.sort((a, b) => {
        const aVal = a.children[colIndex].textContent.trim();
        const bVal = b.children[colIndex].textContent.trim();

        // 数字类型（如故事点、优先级）
        if (!isNaN(parseInt(aVal)) && !isNaN(parseInt(bVal))) {
            return sortDir === 'asc' ? parseInt(aVal) - parseInt(bVal) : parseInt(bVal) - parseInt(aVal);
        }
        // 日期类型（如到期日、创建日期）
        if (!isNaN(Date.parse(aVal)) && !isNaN(Date.parse(bVal))) {
            return sortDir === 'asc' ? new Date(aVal) - new Date(bVal) : new Date(bVal) - new Date(aVal);
        }
        // 默认文本排序（如标题、指派给）
        return sortDir === 'asc' ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
    });

    // 重新渲染排序后的项
    items.forEach(item => grid.appendChild(item));
}

// 启动流程：先加载全量项，再初始化排序
loadAllItems();

使用方法：打开待办视图后，按F12打开控制台，粘贴上述代码执行即可。如果类名和你的ADO版本不匹配，自行调整work-item-grid-container、grid-header等选择器。

方案二：用查询视图替代待办视图（原生排序支持） #

待办视图本身没有原生排序功能，但可以用Flat Query实现相同的简易列表效果，同时支持原生列排序：

• 进入Azure DevOps的Boards > Queries
• 创建新的Flat Query，设置与待办视图一致的筛选条件（如迭代路径、工作项类型、状态等）
• 保存该查询，后续直接打开即可像待办视图一样查看任务，且点击表头就能实现列排序，还支持导出、筛选等扩展功能。

方案三：油猴脚本自动化 #

将方案一的脚本封装为Tampermonkey油猴脚本，每次打开待办视图自动执行：

1. 安装Tampermonkey扩展
2. 创建新脚本，粘贴以下内容（调整@match为你的ADO项目地址）：

// ==UserScript==
// @name         Azure DevOps Backlog Sort
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Enable column sorting for Azure DevOps Backlog view
// @author       You
// @match        https://dev.azure.com/your-org/your-project/_backlogs/backlog/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 此处粘贴方案一中的loadAllItems、initSortFunctionality、sortWorkItems函数

    // 页面加载完成后启动
    window.addEventListener('load', () => {
        setTimeout(loadAllItems, 1000); // 延迟1秒确保页面元素加载完成
    });
})();

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