基于ID打开的jquery对话框

我需要的是，我有几个教室说5教室，从DB我正在教室的。

我在这样的格式显示出来，

Classroom Name Details 
------------------------------ 
classroom 1  Details 
classroom 2  Details 
classroom 3  Details 
classroom 4  Details 
classroom 5  Details

现在，当人点击教室1的详细信息，然后对话框应该是开放的，其显示的教室1.相应的对话框应该打开的一部分学生的详细资料为各自的教室。

我能够打开对话框，如果只有一个细节按钮，通过查看几个链接的例子我用Google搜索，但我的问题是我不知道有多少教室会因为它是基于列表我将从数据库中获得。

所以我应该填充我的DIV之前和点击细节，只要打开该DIV作为对话框？这种要求应该采用什么通用方法。

请不要说我为什么试了这么做，如果需要的话，我也会粘贴我的代码。正如我从一个链接中拿出一个例子并将其修改为我的需要。

有人可以指点我一些链接或帮助我的样本和解释。

来源

2013-08-02 Jayesh

我在使用jQuery对话框时遇到了类似的问题。我最终使用jQuery数据函数将对话相关数据存储到DOM中（因为您的需要是课堂和细节之间的关系）。

var fakeData = [{id:"class1",students:[{name:"student1","tel":"12456"},{name:"student2","tel":"12456"}]},{id:"class2",students:[{name:"student3","tel":"12456"},{name:"student4","tel":"12456"}]},{id:"class3",students:[{name:"student5","tel":"12456"},{name:"student6","tel":"12456"}]},{id:"class4",students:[{name:"student7","tel":"12456"},{name:"student8","tel":"12456"}]}]; 

//generate detail buttons and store students data in DOM 
fakeData.forEach(function(element, index, array){ 
    $("#btns").append('<button id="'+element.id+'" class="detail-btn">Classroom '+(index+1)+'</button>'); 
    $("body").data(element.id,element.students); 
}); 

//register click event 
$(".detail-btn").click(function(){ 
    $("#dialog").empty(); 
    var students = $("body").data($(this).attr("id")); 
    students.forEach(function(element,index,array){ 
     $("#dialog").append("<div>"+element.name+"</div>"); 
    }); 
    $("#dialog").dialog("open"); 
});

我用DOM id属性作为数据的唯一键。并在特定的详细信息按钮被点击时获取数据。

您不必在HTML中填充大量div，只需使用此解决方案动态更新对话内联内容即可。

但是我不知道这个解决方案是否有任何副作用。也许有人可以进一步解释。

我举一个简单的例子JSFiddle Demo。

希望这对你有所帮助。

来源

2013-08-02 10:31:32 Chickenrice

谢谢鸡肉。您的演示示例帮助我思考需要进行的修改，以满足我的确切需求。 – Jayesh

基于ID打开的jquery对话框

回答

相关问题