具有可折叠选项的自动分隔器列表视图

Posted 2023-05-09

【中文标题】具有可折叠选项的自动分隔器列表视图

【英文标题】：Autodividers listview with collapsable option

【发布时间】：2013-03-14 13:11:17

【问题描述】：

我正在开发一个listview，它具有基于日期的自动分隔符，它是一个很长的列表，data-autodividers='true' 工作正常，但我想通过使listview 在日期上可折叠来进一步改进它。

这可以使用 c# 从后端完成（我正在开发一个 asp.net webform 移动网站），其中我根据月份对我的列表进行分组并使每个组可折叠。

但我喜欢用 jQuery 来做这件事，就像我为 autodivider 做的那样。我在 jsFiddle 上也设置了。

http://jsfiddle.net/5PnBT/10/

如何使用 jQuery 让这些自动分隔器可折叠，而无需从代码隐藏文件 (c#) 中进行操作？

我没有看到 jquerymobile 在哪里有这个作为内置选项。

$(document).on("pageinit", "#page-wrapper", function () 
    $("#hp-latest-articles").listview(
        autodividers: true,
        autodividersSelector: function (li) 
            var out = li.attr('date');
            return out;
        
    ).listview('refresh');
);

【问题讨论】：

您上面的代码运行良好。您需要将listview 转换为collapsible 集。

@Omar:- 我不确定如何使用 jQuery 来做到这一点，否则我必须从代​​码隐藏 (c#) 中完成所有操作。我希望它有一个内置选项可以折叠。

我已经设法将列表项转换为可折叠的。该代码在 jsfiddle 上不起作用，在桌面上对其进行了测试。检查代码jsfiddle.net/Palestinian/rZHMv

感谢您的帮助，不幸的是，当我在 IE 9 中查看您的示例时，它无法在本地计算机上运行，​​并且列表视图不会出现。JAZAKALLAH KHAIR ..我会努力弄清楚..我喜欢你的方法我还将找到一种方法来添加和包装可折叠的DIV 围绕组。

您的代码在我的 Firefox 上运行良好，只是 pageinit 事件没有被触发。见jsfiddle.net/5PnBT/8

【参考方案1】：

如果我理解了您的问题，我认为您只需要使用 $.mobile.listview.prototype.options.autodividersSelector 选项即可。我遇到了类似的问题，所以如果你需要根据单个元素上的日期属性列出它们，请执行以下操作：

 $( document ).on( "mobileinit", function() 
  $.mobile.listview.prototype.options.autodividersSelector = function( element )       
    return (element.attr('date'))       

  ;
);

为此我准备了一个 jsbin：http://jsbin.com/enuwoj/1/edit

【讨论】：

您的解决方案是按日期分组，但我的实际问题是我想让它默认可折叠，这样当用户单击日期时，它会展开列表并仅显示该特定日期的文章.. . 示例jsfiddle.net/5PnBT/9

【参考方案2】：

您的问题有两种解决方案。

无论您使用 jQuery Mobile 端的可折叠列表集，您都可以准确找到您要查找的内容。您可能需要使用 CSS 编辑元素的外观，使其看起来像一个列表视图。

http://jsfiddle.net/rc9Gk/

     <div data-role="collapsible">
        <h3>Title</h3>
             <ul><li>Item1</li><li>Item2</li></ul>
     </div>

第二种解决方案是在列表视图控件的单击事件上应用自定义事件处理程序。每当列表分隔器上发生单击事件时，您可以隐藏以下列表元素，直到下一个自动分隔器。此解决方案需要一些编码。如果此解决方案适合您，我可以为您编写该代码，请告诉我。

【参考方案3】：

我相信通过将以下内容添加到原始小提琴的底部可以解决您的问题

$('.ui-li-divider').click( function(ev )
  var li = $(ev.target).next(':not(.ui-li-divider)');
  while ( li.length > 0 ) 
      li.toggle();
      li = li.next(':not(.ui-li-divider)');
  
);

这是更新后的jsFiddle

基本上，每次单击分隔线时，它都会查找所有后续 LI，直到下一个分隔线并切换它们的可见性。

【讨论】：

太棒了，有什么建议可以根据状态添加 +/- 图标吗？

【参考方案4】：

您需要<div data-role="collapsible"> 或<div data-role="collapsible-set">，具体取决于您是否要将它们分组。

如果您希望它们在默认情况下预先折叠，请同时包含 data-collapsed="true" 属性。