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>

enter image description here

Answer 1

我遇到了类似的问题，但我的情况是生成一个带有标题的图像列表来对项目进行分组。

我是这样做的唯一方式我知道并且它有效但我愿意接受如何做得更好的建议。

这是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项目。

从数据库mysql渲染list-images bbui

2 个答案: