初始化jplist后如何添加复选框过滤器项

Posted

技术标签:

【中文标题】初始化jplist后如何添加复选框过滤器项【英文标题】:How to add checkbox filter item after initialize jplist 【发布时间】:2018-09-22 01:08:10 【问题描述】:

我有 3 个 ajax 从 3 个不同的网站调用 curl。 当第一个 ajax 完成时,我将初始化 jplist,下一个 ajax 将添加到列表中。 问题是我需要从初始化后的下一个 ajax 将项目添加到复选框过滤器,因此它意味着动态过滤器项目。 现在工作的过滤器是来自第一个 ajax 的过滤器。

如何在初始化后从下一个 ajax 添加过滤器? 在第一次 ajax 之后我初始化的原因是因为我不希望用户等到所有 ajax 完成,因为这需要时间。

谢谢。

【问题讨论】:

你能添加一些代码并解释更多吗? 【参考方案1】:

我遇到了同样的问题,这就是我解决它的方法:

var jpl = function()
    $('#demo').jplist(
        itemsBox: '.files',
        itemPath: '.contentitem',
        panelPath: '#filters-container',
        noResults: '.jplist-no-results',
        dataSource: 
            type: 'server',
            server: 
                ajax: 
                    url: '/api/files',
                    dataType: 'json',
                    type: 'POST'
                
            ,
            render: function(dataItem, statuses) 
                $list.html(template(dataItem.content));
            
        
    );

$("body").on('click', '.morenav>a', function(ev)
    ev.preventDefault();
    ev.stopPropagation();
    var href = $(this).attr('href');
    var mn = $(this).closest('.morenav');
    $.ajax(
        type: "POST",
        dataType: 'json',
        url: href,
        contentType: "application/json; charset=utf-8",
        success: function (data) 
            $(data['content']).insertBefore(mn); // <===== put html content from ajax return here
            jpl(); // <===== call jplist again after ajax call here
        ,
        error: function(data)
            console.log("ERROR ", data);
        ,
    );
);
jpl(); // <===== call jplist here

json api 返回的地方:


     'page': 2,
     'content': '<input data-path=".the_path" type="checkbox" id="the_chkbox" name="the_chkbox" value="1" >',

【讨论】:

以上是关于初始化jplist后如何添加复选框过滤器项的主要内容,如果未能解决你的问题,请参考以下文章

重新加载后设置 jplist-drop-down 的值

重置剑道多过滤器复选框数据源以反映过滤后的数据

jPList - jQuery 数据网格控制 jPList 页面跳转

JPList 插件仅在第一个 JQuery UI 选项卡上触发

如何利用select2下拉框插件方法限制选框项个数

动态添加部分视图后如何重新初始化JQuery