遍历数据render 到HTML

最新推荐文章于 2024-08-10 07:12:37 发布

xkyle

最新推荐文章于 2024-08-10 07:12:37 发布

阅读量1k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/xkyle/article/details/79294693

版权

JavaScript 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<script type="text/javascript">
    //导航点击切换事件
    function menuList(e) {
        $('#rightList .r-unstyled').hide();
        $('#listR_' + e).show();

        $('#rightList_page .p-unstyled').hide();
        $('#listP_' + e).show();

        $('#catalog_' + e).siblings().removeClass('xzStyle');
        $('#catalog_' + e).addClass('xzStyle');
    };

    //初始化全局变量
    var listL = $('#leftList');
    var listR = $('#rightList');
    var listPage = $('#rightList_page');

    $(function () {

        listL.children().remove();
        listR.children().remove();
        listPage.children().remove();
        //获取产品分类
        afWebTools.getProductCategories({'CATALOG_ID': 'af59da9ce58b4e14a29d9c1b6755cf7d'}, function (data) {
            //循环产品分类
            for (var i = 0; i < data.length; i++) {
                //加载出菜单列表
                var listl = '<li οnclick="javascript:menuList(' + i + ',this)" id="catalog_' + i + '">'
                    + '<a href="javascript:void(0)">' + data[i].VALUE + '</a>'
                    + '</li>';
                listL.append(listl);
                //菜单列表第一个选中
                listL.find('li').eq(0).addClass('xzStyle');
                // 初始化数据
                toPage(data[i].ID, i, 1, true);
            }
        });
    });

    function toPage(CATALOG_ID, seq, page, isInit) {
        afWebTools.getProductList({
                'CATALOG_ID': CATALOG_ID,
                'DISPLAY_NUMBER': '16',
                'CURRENT_PAGE': page,
                'NEED_PAGING': 'true',
                'LIST_ID': 'listR_' + seq,
                'SEQ': seq
            },
            function (data, params) {
                var listr = '';
                var listrP = '';
                if (isInit) {
                    if (params.SEQ == 0) {
                        listr = '<ul class="r-unstyled" id="listR_' + params.SEQ + '" style = "display:block">';
                        listrP = '<ul class="p-unstyled" id="listP_' + params.SEQ + '" style = "display:block">';
                    } else {
                        listr = '<ul class="r-unstyled" id="listR_' + params.SEQ + '" style = "display:none">';
                        listrP = '<ul class="p-unstyled" id="listP_' + params.SEQ + '" style = "display:none">';
                    }
                    listr += rightContent(data);
                    //循环之后闭合添加到右侧列表部分,
                    listr += '</ul>';
                    //循环分页
                    for (var j = 0; j < afWebTools.PageInfoMap['listR_' + params.SEQ + '_TOTAL_PAGE']; j++) {
                        listrP += "<li class='pageStyle" + (j + 1) + "' id='listP_" + params.SEQ + "_" + (j + 1) + "' style=\"display:inline-block\">"
                            + "<a class=\"fenyea\" οnclick=\"toPage('" + params.CATALOG_ID + "', '" + params.SEQ + "', '" + (j + 1) + "', false)\">" + (j + 1) + "</a>"
                            + "</li>";
                    }
                    //循环之后闭合添加到分类部分
                    listrP += '</ul>';
                    listPage.append(listrP);
                    listR.append(listr);
                } else {
                    var list = $('#listR_' + params.SEQ);
                    list.children().remove();
                    listr = rightContent(data);
                    list.append(listr);
                }

                $("#listP_" + seq + "_" + page + "").siblings().removeClass('pageStyle');
                $("#listP_" + seq + "_" + page + "").addClass('pageStyle');
            });
    }

    function rightContent(data) {
        var listr = '';
        for (var j = 0; j < data.length; j++) {
            var temp = data[j];
            if (temp.ITEMs != undefined) {
                listr += "<li class=\"link_transition\" style=\"float:left;;width:300px\">"
                    + "<a>"
                    + "<div class=\"item_list\">"
                    + "<div class=\"item box\">"
                    + "<dl>"
                    + "<dt class=\"nrpic padall\">"
                    + "<img src=\"" + temp.COVER_IMAGEs[0] + "\" width=\"100%\" height=\"180px\"/>"
                    + "</dt>"
                    + "<dd class=\"case_name\">"
                    + "<a>" + temp.ITEMs.NAME + "</a>"
                    + "</dd>"
                    + "<dd class=\"case_tag\">"
                    + "<a>米沃科技</a>"
                    + "</dd>"
                    + "<dd class=\"case_intw\">"
                    + "<a style=\"color:#999 !important\">" + temp.ITEMs.CONTENT_afEditor + "</a>"
                    + "</dd>"
                    + "</dl>"
                    + "</div>"
                    + "</div>"
                    + "</a>"
                    + "</li>";
            }
        }
        return listr;
    }
</script>