基於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對話框

回答

相關問題