您的位置： 首页 >日志>动易系统>详细内容

动易系统

用ajax异步方式实现日期筛选文章功能

来源：本站原创 发布时间：2023-07-01 17:36:32 浏览次数： 次 【字体：小 大】

日历筛选文章的功能在SF系统中实现过。但新系统中基于缓存问题，无法利用传值到标签的方法实现，也不能像系统这样，直接传入扩展SQL语句查询方式，存在一点困难。而新系统中可用ajax异步方式实现，给大家分享下。

202304031822548906

第一步、因为系统没有按日期范围筛选标签，我们需要复制一个，不要原来的  @model Article  改为 利用函数 获取数据集的方式（因为列表标签只能通过@Power.AjaxArticleList 标签形式进行异步查询，所以我们必需改为自定义标签形式）。

var articles = ArticleService.GetList(nodeIdentifier, SiteContext.Current.SiteId , OutputCount, IncludeChildNodes, false, Sort, false, m => m.PublishTime >= getdate && m.PublishTime <= getdate.AddDays(1) , false )?.ToList();

除了GetList方式还有很多方式，可以示情况使用


第二步、模板中，获取地址传参，加载日历JS脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    function getQueryVariable(str)
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == str){
                return pair[1];
            }
        }
        return false;
    }
    var getdate = getQueryVariable('getdate');
    var identifier = '@Model.Identifier';
    var iDate = new Date();
    if (getdate != ''){ iDate = new Date(getdate);}
    var year = iDate.getFullYear();
    var yue = iDate.getMonth() + 1;
    $("#calendar").flexoCalendar({ setYear: year, setMonth: yue, selectDate: getdate, setIdentifier: identifier});


第三步、日历脚本中加入ajax异步获取数据写法，执行成功输出到指定元素中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    Calendar.prototype.refList = function(options,newdate){
        $.ajaxPreventCSRF({
            url: '/Ajax/AjaxPartial',
            type: 'post',
            async: true,
            data: {
                moduleName: "ContentManage",
                partialViewName: "文章图文列表-时间范围",
                parameters:"{outputCount:99,TitleLength:72,ContentLength:500,ImageWidth:432,DisplayDateTime:'yyyy.MM.dd',GetDate:'" + newdate + "',ShowDate:true,RefNode:true,NodeIdentifier:'" + options.setIdentifier + "'}"
            },
            success: function (response) {
                $("#datalist").html(response.html);
                $("#pageSlide").hide();
                $("#loadmore").hide();
            }
        });
        return calendar;
    }

这里我们要注意的是Ajax和AjaxPreventCSRF的区别，在于后者带有CSRF认证。async为是否异步方式，moduleName该标签所属空间。等问题


第四步、日历脚本中，当用户选择到某个日期的时候，需要修改触发执行这个获取数据的函数

1
2
                    var seldate = $(".flexoCalendar .selected").attr("data-time");
                    Calendar.prototype.refList(options,seldate);