合并值并在JQuery中动态绑定

时间:2015-09-24 04:32:31

标签: jquery jquery-ui

我在对话框中输出格式为

 ODS
 1234|Hyd
 ODS
 1234|Blore
 ODS
 6847|Pune
 CDS
 1234|Chenni
 CDS
 4854|Delhi

在这里,我想合并所有OD​​C和CDS,并希望以下面的格式显示输出

ODS
1234|Hyd
1234|Blore
6847|Pune
CDS
1234|Chenni
4854|Delhi

我尝试过像..的差异方法。

    UserAccessPE Contains Values EX: Program = ODS,CDS, MPNID = 1234,6789, Geography = 'Hyd','Pune' ..., In these way
     var programtemp = "";
     var MPNIDtemp = "";

   for (var i = 0; i < UserAccessPE.length; i++) {
        if (UserAccessPE[i].program == UserAccessPE[i + 1].program) {
                programtemp = '<br><div class="Programdiv"> <span> <br>' + UserAccessPE[i].program + '<br /></span></div><br />';

                for (var j = 0 ; j < UserAccessPE.length; j++) {
                    MPNIDtemp = ' <br><div class="mpniddiv"> <span><br>' + UserAccessPE[i].MPNID + ' |  ' + UserAccessPE[i].Geography + '<br/></span></div><br /> ';
                }

                $("#UserAccessDiv").append(programtemp);
                $("#UserAccessDiv").append(MPNIDtemp);


        }

    }

请帮助我...,我几乎完成了Binding值动态但无法合并相同的值并绑定。

1 个答案:

答案 0 :(得分:0)

如果尚未按正确的顺序排列,则需要确保源数组在.program属性上排序:

UserAccessPE.sort(function(a, b) {
    return a.program < b.program;
});

然后将输出构建为HTML片段数组,利用array.reduce()执行循环并为您提供以前的值:

var html = [];
UserAccessPE.reduce(function(prev, current) {
    if(!prev || current.program !== prev.program) {
        html.push('<div class="mdiv Programdiv">' + current.program + '</div>');
    }
    html.push('<div class="mdiv mpniddiv">' + current.MPNID + ' | ' + current.Geography + '</div>');
    return current;
}, null);

// join HTML fragments and append
$("#UserAccessDiv").append(html.join(''));

这里简化了问题中的HTML,以避免双div换行和<br> s,这两者似乎都是不必要的。无论如何都要按照需要重新复杂化。

<强> DEMO

不太确定“绑定”是什么意思,但是从你说的话来看,你似乎已经掌控了它。