应用1：字段在列表页筛选

本章将汇总一些解决项目实施需求的组件案例，对灵活开发和应用 WebFuture 产品组件功能提供启示实例。本文讲述如何用扩展字段在列表页中筛选。

初始需求

客户提出要根据"类型"、“地区”等字段对列表页内容进行筛选，支持URL参数同步、实时刷新及高亮选中状态。

演示效果

扩展字段列表页筛选效果

使用方法

添加扩展字段

添加类型字段添加地区字段已添加的扩展字段

制作列表组件

@inject NodeService NodeService
@inject ArticleService ArticleBaseService
@inject StringExtensionsHelper StringExtensionsHelper
@inject ContentRouteUrlHelperExtend ContentRouteUrlHelperExtend

@Power.VisualizationPartialView(new
{
    Description = "文章标题列表-筛选",
    Parameters = new
    {
        Count = new { DisplayName = "输出数量", Type = "Int32", ControlType = "Integer", DefaultValue = 5 },
        TitleLength = new { DisplayName = "标题长度", Type = "Int32", ControlType = "Integer", DefaultValue = 50 },
        DisplayDateTime = new { DisplayName = "显示日期格式", Type = "String", ControlType = "ComboBox", DefaultValue = "", ListItemKey = "DateFormat" },
        Sort = new { DisplayName = "排序", Type = "String", ControlType = "Text", DefaultValue = "Priority DESC,PublishTime DESC" },
        Node = new { DisplayName = "节点集合", Type = "String", ControlType = "Text", DefaultValue = "" },
        LinkBlankTarget = new { DisplayName = "是否新窗口打开，true情况下由节点设置决定", Type = "Boolean", ControlType = "Boolean", DefaultValue = true, ToolTip = "是否新窗口打开，true情况下由节点设置决定" },
        DispatchDepartment = new { DisplayName = "部门标识符", Type = "String", ControlType = "Text", DefaultValue = "" }
    }
})

@{
    //参数
    string Sort = ParamValueHelper.DynamicToValue(Param.Sort, "Priority DESC,PublishTime DESC"); //排序
    int TitleLength = ParamValueHelper.DynamicToValue(Param.TitleLength, 50); // 标题长度
    int ContentLength = ParamValueHelper.DynamicToValue(Param.ContentLength, 200); // 内容长度
    var DisplayDateTime = ParamValueHelper.DynamicToValue(Param.DisplayDateTime, string.Empty); //日期格式
    var LinkBlankTarget = ParamValueHelper.DynamicToValue(Param.LinkBlankTarget, true); //否新窗口打开，true情况下由节点设置决定
    int Count = ParamValueHelper.DynamicToValue(Param.Count, 5);
    Node Nodetop = Param.Node;
    int departmentSiteId = ParamValueHelper.DynamicToValue(Param.DepartmentSiteId, 0);
    int dispatchDepartmentId = ParamValueHelper.DynamicToValue(Param.DispatchDepartmentId, 0);
    Dictionary<string, string> extendFieldFilters = Param.ExtendFieldFilters ?? new Dictionary<string, string>();

    var list = ArticleBaseService.GetPageListByExtendFields(Nodetop, Count, departmentSiteId, dispatchDepartmentId, extendFieldFilters, null, Sort, false)?.ToList();

    var index = 1;
    Node node = null;
    string target = "";

    var currentDate = DateTime.Now;
}
@if ((list != null) && list.Any())
{
    foreach (var item in list)
    {
        node = NodeService.GetEntity(item.NodeId.Value);
        target = LinkBlankTarget && node != null && node.ContentOpenInNewTarget ? "_blank" : null;
        <li class="li@(index)">
            <div class="con">
                <h3 class="title"><a class="tit" href="@ContentRouteUrlHelperExtend.ContentUrl(item)" title="@item.Title" target="@target">@item.Title.CutText(TitleLength, "…")</a></h3>
                @if (ContentLength > 0)
                {
                    <div class="intro">
                        @item.Intro.ReplaceHtmlTag(ContentLength, "...")
                    </div>
                }
            </div>
        </li>
        index++;
    }
}
else
{
    <li class="noData">暂无资料</li>
}

若是非文章模型，如图片模型，则需把ArticleBaseService改为 PhotoBaseService、ArticleService改为 PhotoService。组件中的GetPageListByExtendFields <根据扩展字段查询列表> 方法参数：

名称	类型	说明
node	Node	节点实体。
pageSize	int	每页分页数。
departmentSiteId	int	发文部门站点Id。
departmentId	int	发文部门标识符。
extendFieldFilters	Dictionary	筛选的扩展字段字典。
keywords	string	关键字。
orderBy	string	排序条件。
includeNullValue	bool	是否包含空值。

制作列表页模板


@* 列表页模板 *@
@inject NodeInterfaceExtend NodeInterfaceExtend
@inject ContentExtendFieldService ContentExtendFieldService
@Power.NotVisualization()
@model Node
@{
    Layout = $"~/Views/{this.Context.GetCurrentSite().Identifier}/Layout/公共布局页.cshtml";
}
@{
    var extendFieldFilters = new Dictionary<string, string>();
    Func<Dictionary<string, string>> getRequestParameters = () =>
    {
        var request = Context.Request;
        var parameters = new Dictionary<string, string>();

        // 从查询字符串获取参数
        foreach (var key in request.Query.Keys)
        {
            if (key != null)
            {
                parameters[key] = request.Query[key];
            }
        }

        // 从表单数据获取参数
        if (request.HasFormContentType)
        {
            foreach (var key in request.Form.Keys)
            {
                if (key != null)
                {
                    parameters[key] = request.Form[key];
                }
            }
        }

        return parameters;
    };
    extendFieldFilters = getRequestParameters();
}
@section header {
    <link href="~/content/@(this.Context.GetCurrentSite().Identifier)/contentmanage/css/page.css" asp-append-version="true" rel="stylesheet" />
	<style>
		.filter-row .choose-item.selected a { color: #0068B7; }
	</style>
}
<!-- content S -->
<div id="content">

	<div class="filter-area">
		<div class="filter-row">
			<div class="filter-key">类型</div>
			<div class="filter-value">
                <div class="choose-list">
                    <ul id="type">
                        <li class="choose-item" data-value="0"><a href="javascript:;">全部</a></li>
                        <li class="choose-item" data-value="1"><a href="javascript:;">行政许可</a></li>
                        <li class="choose-item" data-value="2"><a href="javascript:;">行政奖励</a></li>
                        <li class="choose-item" data-value="3"><a href="javascript:;">行政确认</a></li>
                        <li class="choose-item" data-value="4"><a href="javascript:;">行政处罚</a></li>
                        <li class="choose-item" data-value="5"><a href="javascript:;">行政裁决</a></li>
                        <li class="choose-item" data-value="6"><a href="javascript:;">行政征收</a></li>
                    </ul>
                </div>
			</div>
		</div>
		<div class="filter-row">
			<div class="filter-key">地区</div>
			<div class="filter-value">
                <div class="choose-list">
                    <ul id="area">
                        <li class="choose-item" data-value="0"><a href="javascript:;">全部</a></li>
                        <li class="choose-item" data-value="1"><a href="javascript:;">广州</a></li>
                        <li class="choose-item" data-value="2"><a href="javascript:;">北京</a></li>
                        <li class="choose-item" data-value="3"><a href="javascript:;">上海</a></li>
                        <li class="choose-item" data-value="4"><a href="javascript:;">深圳</a></li>
                        <li class="choose-item" data-value="5"><a href="javascript:;">珠海</a></li>
                        <li class="choose-item" data-value="6"><a href="javascript:;">杭州</a></li>
                    </ul>
                </div>
			</div>
		</div>
    </div>

    <!-- 正文内容 S -->
    <ul class="pageTPList">
        @Power.Partial("文章标题列表-筛选", new { Node = Model, TitleLength = 90, Count = 10, ContentLength = 220, ExtendFieldFilters = extendFieldFilters })
    </ul>
    <div class="page">@Power.Partial("通用分页", new { QueryStringParamWhiteList = "type,area"})</div>
    <!-- 正文内容 E -->
</div>
<!-- content E -->

@section scripts
{
	<script>
		$(document).ready(function() {
            // 绑定点击事件
            bindClickEvent('#type li', 'type');
            bindClickEvent('#area li', 'area');

            // 检查URL参数并设置高亮
            checkHighlight('#type li', 'type');
            checkHighlight('#area li', 'area');
        });

        // 封装函数，用于绑定点击事件并更新URL参数
        function bindClickEvent(selector, paramName) {
            $(selector).on('click', function() {
                var $this = $(this);

                // 获取当前的URL参数
                var params = new URLSearchParams(window.location.search);

                // 获取选择的值
                var value = $this.data('value');

                // 设置或删除参数
                if (value === 0) {
                    params.delete(paramName);
                } else {
                    params.set(paramName, value);
                }

                // 更新URL
                var newUrl = window.location.pathname + '?' + params.toString();
                window.location.href = newUrl;
            });
        }

        // 检查URL参数并设置相应的高亮
        function checkHighlight(selector, paramName) {
            var params = new URLSearchParams(window.location.search);
            var value = params.get(paramName);

            if (value) {
                // 找到对应data-value的li元素，并添加高亮
                $(selector).each(function() {
                    if ($(this).data('value') == value) {
                        $(this).addClass('selected');
                    }
                });
            } else {
                // 如果没有参数，默认选中第一个li元素（"全部"）
                $(selector).first().addClass('selected');
            }
        }
	</script>
}

列表页模板接收url传递过来的参数，并且转为扩展字段字典，传入到列表标签里。
需要注意的是，要在通用分页的QueryStringParamWhiteList参数中声明需传入的扩展字段名称,多个用英文逗号分隔。

关闭节点缓存

节点设置禁用页面输出缓存由于 WebFuture 缓存机制，需将相关的节点前台设置开启禁用页面输出缓存