從數據庫mysql渲染列表圖像bbui

Question

我想在mysql數據庫中使用ajax調用一個列表bbui圖像，但在這個過程中，我沒有得到與bbui列表圖像相同的格式，下面是我的代碼

var idmember='glut1'; 
    function dataOnLoad_initialLoad(element) { 
     var listItem, dataList = element.getElementById('dataList'); 
     $.ajax({ 
      type: "GET", 
      url: "ajax/history.php?id_member=" + idmember, 
      dataType: "json", 
      error: function(xhr, settings, exception) { 
       alert("error"); 
      }, 
      success: function(data){ 
       $.each(data, function(key, val) { 
        listItem = document.createElement('div'); 
        listItem.setAttribute('data-bb-type', 'item'); 
        listItem.onclick = function() { 
         bb.pushScreen('detail.htm', 'detail'); 
        }; 
        listItem.setAttribute('data-bb-title', val.tglorder); 
        listItem.innerHTML = val.namastatus; 
        dataList.appendChild(listItem); 

        var order = val.idorder; 
       }); 
      } 
     }); 
    } 

，然後在beforedetail.html實現這樣的代碼的代碼

<div id="dataList" data-bb-type="image-list" data-bb-images="none" data-bb-style="arrowlist"> 
    </div> 

Answer 1

我也有類似的問題，但我的情況是發電機密封e帶有標題的圖像列表以對項目進行分組。

我做到了這一點，我知道浩和它的工作，但我打開如何做得更好的建議。

這裏是js代碼：

var listItem, header, 
    dataList = document.getElementById('dataList');// this is my list already in the DOM 

var list = []; 
var user = localDB.getScreenName(); 
$.ajax({ 
    url: reg.api(), 
    data: {action: 'getAttire', formData: user}, 
    type: 'post', 
    dataType: 'jsonp', 
    jsonp: false, 
    jsonpCallback: 'result', 
    beforeSend: function() { 
     document.getElementById('indicator').style.display = 'block'; 
    }, 
    complete: function() { 
     document.getElementById('indicator').style.display = 'none'; 
    }, 
    success: function(res) { 
     //showbList(); 
     var title = []; 

     for (var i = 0; i < res.length; i++) { 
      if ($.inArray(res[i].item, title) === -1) { 
       title.push(res[i].item);//creates header array with unique values cos i had headers with duplicate names 
      } 
      // This creates header Array from the list 
     } 
     for (var k = 0; k < title.length; k++) { 
      header = document.createElement('div'); 
      header.setAttribute('data-bb-type', 'header'); 
      header.id = 'headers'; 
      header.innerHTML = title[k]; 
      header.style.background = '#f6f6f6'; 
      header.style.fontSize = '20px'; 
      header.style.fontWeight = 'bold'; 
      // header.style.boxShadow = '' 
      list.push(header);//header created here 
      for (var i = 0; i < res.length; i++) { 
       if (header.innerHTML === 'Bag' && res[i].item === 'Bag') { 
        //var date = 
        listItem = document.createElement('div'); 
        listItem.setAttribute('data-bb-type', 'item'); 
        listItem.setAttribute('data-bb-img', res[i].img_link); 
        listItem.setAttribute('data-bb-title', res[i].name); 
        listItem.setAttribute('data-bb-accent-text', 'Added: '+jQuery.timeago(res[i].date)); 
        listItem.setAttribute('dressup',res[i].DRESS_ID); 
        listItem.setAttribute('id','wardropeLink'); 
        listItem.innerHTML = "Suited for: " + res[i].suited; 
        listItem.style.color = "#fff"; 
        listItem.onclick = function() { 
        var selected = document.getElementById('wardropeLink').getTitle(); 
        console.log(selected); // trying to get d title of a selected or clicked list but it returns the whole group. still working on it 
       }; 
       list.push(listItem); //list item for a particular header created here 
      } 
      if (header.innerHTML === 'Trousers' && res[i].item === 'Trousers') { 
       listItem = document.createElement('div'); 
       listItem.setAttribute('data-bb-type', 'item'); 
       listItem.setAttribute('data-bb-img', res[i].img_link); 
       listItem.setAttribute('data-bb-title', res[i].name); 
       listItem.setAttribute('data-bb-accent-text', jQuery.timeago(res[i].date)); 
       listItem.innerHTML = "Suited for: " + res[i].suited; 
       listItem.style.color = "#fff"; 
       listItem.onclick = function() { 
        handleWardrope.listItems(res[i].DRESS_ID); 
       }; 
       list.push(listItem); 
      } 

     } 
    } 

    var items = dataList.getItems(); 
    if (items.length > 0) { 
     //list.insertItemBefore(item, items[0]); 
    } else { 
     dataList.refresh(list);//list added to DOM 
     if (bb.scroller) { 
      bb.scroller.refresh(); 
     } 
    } 


} 
}); 
return false; 

希望這有助於。

警告並仍在嘗試讓onclick函數適用於特定的列表項，但它似乎將它們組合爲循環的cos。

Answer 2

關於我有關於獲取列表項目標題的問題 我通過調用列表選擇的函數解決了這個問題，然後對所選項目的getTitle執行了操作。 代碼

listItem.onclick = function(){ 
var selected = document.getElementById('dataList').selected; 
console.log(selected.getAttribute('dressup')); 
} 

我做錯了什麼之前，是我試圖讓d在d項目本身，而不是對圖像列表選擇的項目。