設置autodividers的自定義屬性

Question

我想分割一個ListView，它是在jQuery-mobile中動態填充的。我正在設置一些屬性爲status="true"的列表項和status="false"，並想知道是否可以自動將它們分成兩組（下載/未下載）？

這是我的HTML：

<div role="main" class="ui-content jqm-content"> 
    <div> 
     <ul id="linkList" data-role="listview" data-autodividers="true"> 
     </ul> 
    </div> 
</div> 

我的JS：

var $li; 
var $status = 'false'; 

window.resolveLocalFileSystemURL(fileSource + val.title + ".pdf", success, fail); 

// if file exists 
function success() { 
    $li.find("a").on("click", function(){ openPdf(val.title); }); 
    $status = 'true'; 
} 

// if file doesnt exists 
function fail() { 
    $li.find("a").on("click", function(){ downloadPdf(val.title,val.url); }); 
    $status = 'false'; 
} 

$li = $("<li><a href='#' status=''+status+''>"+val.title+"</a></li>"); 

$("#linkList").append($li).listview('refresh'); 
$("#linkList").listview({ 
    autodividers: true, 
    autodividersSelector: function (li) { 
    var out = li.attr('status'); 
    return out; 
    } 
}).listview('refresh'); 

那麼，是不是可以自動做到這一點，或做我必須做的代碼進行排序，並添加分頻器。它的代碼根本不會添加任何分隔符。

Answer 1

首先，autodividers確實只在您的列表已按狀態排序時纔有效。因此，您需要在將其添加到UL之前進行分類。

接下來，狀態可以用在李李內的數據屬性或錨：添加項目時

'<li ><a href="#" data-status="' + item.status +'">' + item.val + '</a></li>' 

然後，設置autodividersSelector來檢索錨的數據屬性：

$('#linkList') 
    .empty() 
    .append(allfiles) 
    .listview({ 
     autodividers:true, 
     autodividersSelector: function (li) { 
      var out = li.find('a').data("status"); 
      return out; 
     } 
    }) 
    .listview("refresh"); 

工作DEMO