如何使用引導程序單擊表格行時使用模式彈出窗口顯示數據？

我創建了一個學生表，我想在彈出窗口中點擊一個表格行時顯示模態的詳細信息（id，name，age）。如何使用引導程序單擊表格行時使用模式彈出窗口顯示數據？

ListStudents.xhtml

<table class="table table-bordered table-striped"> 
 
\t <thead> 
 
\t \t <tr> 
 
\t \t \t <th><center>Name</center></th> 
 
\t \t \t <th><center>Age</center></th> 
 
\t \t </tr> 
 
\t </thead> 
 
\t <tbody> 
 
\t \t <ui:repeat var="stud" value="#{dataModelBeanD.model}"> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>#{stud.name}</td> 
 
\t \t \t \t <td><center>#{stud.age}</center></td> 
 
\t \t \t \t <td> 
 
\t \t \t \t \t <p data-placement="top" data-toggle="tooltip" title="Consult"> 
 
\t \t \t \t \t \t <button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" > 
 
\t \t \t \t \t \t \t <span class="glyphicon glyphicon-modal-window"></span> 
 
\t \t \t \t \t \t </button> 
 
\t \t \t \t \t </p> 
 
\t \t \t \t \t <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true"> 
 
     \t \t \t \t \t <div class="modal-dialog"> 
 
    \t \t \t \t \t \t <div class="modal-content"> 
 
      \t \t \t \t \t \t <div class="modal-header"> 
 
     \t \t \t \t \t \t \t <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 
 
     \t \t \t \t \t \t \t \t <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 
 
     \t \t \t \t \t \t \t </button> 
 
     \t \t \t \t \t \t \t <h4 class="modal-title custom_align" id="Heading">Your Detail</h4> 
 
     \t \t \t \t \t \t \t </div> 
 
      \t \t \t \t \t \t <div class="modal-body"> 
 
     \t \t \t \t \t \t \t <h:outputLabel value="Name : " styleClass="control-label col-sm-2"/> 
 
\t \t \t \t \t \t \t \t \t <h:outputLabel value="#{stud.name}" styleClass="form-control"/> 
 
\t \t \t \t \t \t \t \t \t <h:outputLabel value="Age : " styleClass="control-label col-sm-2"/> 
 
\t \t \t \t \t \t \t \t \t <h:outputLabel value="#{stud.age}" styleClass="form-control"/> 
 
     \t \t \t \t \t \t \t </div> 
 
     \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t </div> 
 
     \t \t \t \t </div> 
 
    \t \t \t </td> 
 
\t \t \t </tr> 
 
\t \t </ui:repeat> 
 
\t </tbody> 
 
</table> 
 
\t \t \t \t

在JS，我提出：

$(document).ready(function(){ 
 
\t $("#mytable #checkall").click(function() { 
 
\t   if ($("#mytable #checkall").is(':checked')) { 
 
\t    $("#mytable input[type=checkbox]").each(function() { 
 
\t     $(this).prop("checked", true); 
 
\t    }); 
 

 
\t   } else { 
 
\t    $("#mytable input[type=checkbox]").each(function() { 
 
\t     $(this).prop("checked", false); 
 
\t    }); 
 
\t   } 
 
\t  }); 
 
\t  
 
\t  $("[data-toggle=tooltip]").tooltip(); 
 
\t });

知道我發現很多教程來解決這個問題，如果我們正在談論靜態表。但是，正如你看到我正在使用一個動態表，問題是我獲得第一行相同的細節後點擊2行描述this screenshot

你有什麼想法解決這個問題。非常感謝。

來源

2016-09-20 Sofia

點擊該按鈕時，模態會爲你點亮嗎？ – Aravind

您好先生@Aravind，非常感謝您的回覆，我添加了一個屏幕截圖，解釋了點擊第一行和第二行的藍色按鈕（請參閱）後，相同的彈出窗口會顯示相同的詳細信息（第一排）。 – Sofia

嘗試用代替希望這一定奏效。 – Aravind

您可以信賴Example。所以你可以做這樣的：

相關HTML：

<ui:repeat var="stud" value="#{dataModelBeanD.model}"> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>#{stud.name}</td> 
 
\t \t \t \t <td><center>#{stud.age}</center></td> 
 
\t \t \t \t <td style="text-align:center;"> 
 
       \t <button class="btn btn-success" data-toggle="modal" data-target="#myModal">Edit</button> 
 
      \t </td> 
 
      \t <td> 
 
\t \t \t \t \t <h:form> 
 
\t \t \t \t \t \t <center> 
 
\t \t \t \t \t \t \t <p:commandLink action="#{dataModelBeanD.performRedirectEdit}" > 
 
\t \t \t \t \t \t \t \t <p:graphicImage value="/resources/pictures/edit.png" /> 
 
\t \t \t \t \t \t \t </p:commandLink> 
 
\t \t \t \t \t \t </center> 
 
\t \t \t \t \t </h:form> 
 
\t \t \t \t </td> 
 
    \t \t \t \t <td> 
 
\t \t \t \t \t <h:form> 
 
\t \t \t \t \t \t <center> 
 
\t \t \t \t \t \t \t <p:commandLink action="#{dataModelBeanD.deleteN(stud.id)}"> 
 
\t \t \t \t \t \t \t \t <p:graphicImage value="/resources/pictures/delete.png" /> 
 
\t \t \t \t \t \t \t </p:commandLink> 
 
\t \t \t \t \t \t </center> 
 
\t \t \t \t \t </h:form> 
 
\t \t \t \t </td> 
 
\t \t \t </tr> 
 
\t \t </ui:repeat> 
 

 

 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 
<div class="modal-dialog"> 
 
    <div class="modal-content"></div> 
 
</div> 
 
<div class="modal-dialog"> 
 
    <div class="modal-content"></div> 
 
</div> 
 
<div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true" class="">× </span><span class="sr-only">Close</span> 
 

 
      </button> 
 
      <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
 

 
     </div> 
 
     <div class="modal-body"></div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div>

相關JS：

$(".btn[data-target='#myModal']").click(function() { 
 
     var columnHeadings = $("thead th").map(function() { 
 
       return $(this).text(); 
 
       }).get(); 
 
     columnHeadings.pop(); 
 
     var columnValues = $(this).parent().siblings().map(function() { 
 
       return $(this).text(); 
 
     }).get(); 
 
    var modalBody = $('<div id="modalContent"></div>'); 
 
    var modalForm = $('<form role="form" name="modalForm" action="putYourPHPActionHere.php" method="post"></form>'); 
 
    $.each(columnHeadings, function(i, columnHeader) { 
 
     var formGroup = $('<div class="form-group"></div>'); 
 
     formGroup.append('<label for="'+columnHeader+'">'+columnHeader+'</label>'); 
 
     formGroup.append('<input class="form-control" name="'+columnHeader+i+'" id="'+columnHeader+i+'" value="'+columnValues[i]+'" />'); 
 
     modalForm.append(formGroup); 
 
    }); 
 
    modalBody.append(modalForm); 
 
    $('.modal-body').html(modalBody); 
 
}); 
 
$('.modal-footer .btn-primary').click(function() { 
 
    $('form[name="modalForm"]').submit(); 
 
});

HTH。

來源

2016-09-25 10:24:55 saria

這是很好的工作。非常感謝。 – Sofia

如何使用引導程序單擊表格行時使用模式彈出窗口顯示數據？

回答

相關問題