javascript - 通过动态复选框立即过滤 SharePoint 列表(使用 C# 和/或 Ajax)

Question

我目前正在寻找一种向 SharePoint 中的列表添加筛选功能的方法，该功能可通过复选框选择来筛选列表内容。

这个小模型可能有助于理解我在说什么:

这个想法是在右侧有一个普通的 SharePoint 自定义列表，在左侧有一个复选框列表，它将根据列表的内容动态生成 -> 一列是“过滤器组”和所有字段内容是过滤器值。

当选择左侧的一个或多个值时，列表中的项目应立即进行相应的过滤(ajax，无需重新加载页面)。例如，在模型中，选择“纽约”和“蓝色”只会显示“史蒂夫的汽车”项目。

您现在几乎每个在线商店都喜欢产品过滤器等等。

如何实现这一目标？如果这可以包含在我的解决方案包中(其中已经包含 C#/jQuery 中的其他内容)，那就太棒了。

我是 SharePoint 前端自定义新手，但我确信有办法:-)

编辑:顺便说一句，我正在使用 SP2016。

Answer 1

潘多拉!

据我了解，您的第一个问题是如何动态获取左侧过滤器的值。我看到有两种方法:第一种方法，您可以构建 caml 查询并从列表中获取项目；第二种方式，您可以使用 ctx.ListData，该共享点自行初始化并在 ctx.ListData.Row (项目数组)中处理项目并获取唯一的字段值。请注意，ctx.ListData.Row 仅包含页面上 ListView 中加载的项目。

对于列表过滤，您可以连接页面哈希的过滤器链接。示例:“？List={ListID}&View={ViewID}&FilterField1=Color-FilterValue1=Blue”。尝试过滤列表中的列，您将看到 url 修改。您可以通过 ctx.listName 和 ctx.view 检索 ListID 和 ViewId。

然后将其传递到函数 MyRefreshPageToEx 中。列表将被过滤。

More list filtration info

function FilterList(){
  var tableId = $(".ms-listviewtable").attr("id");
  var filterUrl = "?List={ListID}&View={ViewID}&FilterField1=Color-FilterValue1=Blue";
  MyRefreshPageToEx(tableId, filterUrl, false);
}

function MyRefreshPageToEx(lvTableID, url, bForceSubmit) {
    var tblv = document.getElementById(lvTableID);
    var clvp = CLVPFromCtx(tblv);

    if (clvp != null && clvp.ctx.IsClientRendering) {
        clvp.RefreshPaging(url);
        clvp.ctx.queryString = url;
        if ((typeof clvp.ctx.operationType == "undefined" || clvp.ctx.operationType == SPListOperationType.Default) && Boolean(clvp.ctx.ListData)) {
            var fromPage = clvp.ctx.ListData.FirstRow - 1;
            var toPage = Number(GetUrlKeyValue("PageFirstRow", false, url));

            if (!isNaN(fromPage) && !isNaN(toPage) && fromPage != toPage)
                fromPage < toPage ? (clvp.ctx.operationType = SPListOperationType.PagingRight) : (clvp.ctx.operationType = SPListOperationType.PagingLeft);
        }
    }
    else {
        SubmitFormPost(url, bForceSubmit);
    }
}