2017-06-27 18 views
0

私は自分のJSPに以下のテーブルを実装しました。テーブルの行から同じ行のポップアップフォームに値を割り当てる

JSP

<table id="credStoreTable" class="table table-striped table-bordered"> 
    <thead> 
     <tr> 
      <th>Product Id</th> 
      <th>Credential Key</th> 
      <th>Created By</th> 
      <th>Created Date</th> 
      <th>Updated By</th> 
      <th>Updated Date</th> 
      <th>Copied From</th> 
      <th>Actions</th> 
     </tr> 
    </thead> 
    <tbody> 
     <c:forEach items="${credentials}" var="cred"> 
      <tr> 
       <td>${cred.productId}</td> 
       <td>${cred.credentialKey}</td> 
       <td>${cred.audit.createdBy}</td> 
       <td>${cred.audit.createdDate}</td> 
       <td>${cred.audit.updatedBy}</td> 
       <td>${cred.audit.updatedDate}</td> 
       <td>${cred.audit.copiedFrom}</td> 
       <td> 
       <div class="btn-group"> 
       <button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModal2" >Delete</button> 

        <!-- Modal --> 
        <div class="modal fade" id="myModal2" role="dialog"> 
        <div class="modal-dialog"> 

         <!-- Modal content--> 
         <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal">&times;</button> 
          <h4 class="modal-title">Update Information</h4> 
         </div> 
         <div class="modal-body"> 
          <form method="post" action="${cred.productId}/${cred.credentialKey}/delete"> 
          Product Id: ${cred.productId} 
          <br> 
          Current Key: ${cred.credentialKey} 
          <br> 
          Are you sure you want to delete? 
          <label class="col-md-4 control-label" for="add"></label> 
          <input id="add" type="submit" name="add" class="btn btn-primary" value="Ok"/> 
          </form> 
         </div> 
         <div class="modal-footer"> 
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         </div> 
         </div> 
        </div> 
        </div> 

        <!-- Trigger the modal with a button --> 
        <button type="button" class="btn btn-success btn-xs" data-toggle="modal" data-target="#myModal">Modify</button> 

        <!-- Modal --> 
        <div class="modal fade" id="myModal" role="dialog"> 
        <div class="modal-dialog"> 

         <!-- Modal content--> 
         <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal">&times;</button> 
          <h4 class="modal-title">Update Information</h4> 
         </div> 
         <div class="modal-body"> 
          <form method="post" action="${cred.productId}/${cred.credentialKey}/modify"> 
          Product Id: ${cred.productId} 
          <br> 
          Current Key: ${cred.credentialKey} 
          <br> 
          Enter New Key: 
          <input type="text" name="key" id="key" placeholder="Key"> 
          <br> 
          Enter New Password: 
          <input type="password" name="password" id="password" placeholder="Password"> 
          <br><br> 
          <label class="col-md-4 control-label" for="add"></label> 
          <input id="add" type="submit" name="add" class="btn btn-primary" value="Submit"/> 
          </form> 
         </div> 
         <div class="modal-footer"> 
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         </div> 
         </div> 
        </div> 
        </div> 
        <!-- Trigger the modal with a button --> 
        <button type="button" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#myModal1">Copy</button> 

        <!-- Modal --> 
        <div class="modal fade" id="myModal1" role="dialog"> 
        <div class="modal-dialog"> 

         <!-- Modal content--> 
         <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal">&times;</button> 
          <h4 class="modal-title">Copy Information</h4> 
         </div> 
         <div class="modal-body"> 
          <form method="post" action="${cred.productId}/${cred.credentialKey}/copy"> 
          Current Product Id: ${cred.productId} 
          <br> 
          Current Key: ${cred.credentialKey} 
          <br> 
          Enter New Product Suite: 
          <input type="text" name="productsuite" id="productsuite" placeholder="Product-Suite"> 
          <br> 
          Enter New Product: 
          <input type="text" name="product" id="product" placeholder="Product"> 
          <br> 
          Enter New Key: 
          <input type="text" name="key" id="key" placeholder="Key"> 
          <br><br> 
          <label class="col-md-4 control-label" for="add"></label> 
          <input id="add" type="submit" name="add" class="btn btn-primary" value="Submit"/> 
          </form> 
         </div> 
         <div class="modal-footer"> 
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         </div> 
         </div> 
        </div> 
        </div> 
       </div> 
       </td> 
      </tr> 
     </c:forEach> 
    </tbody> 
</table> 

あなたが見ることができるように、私のテーブルに私が8列を作成しました。最後の列は「アクション」です。ここでは、その行に属する情報を削除、変更、またはコピーすることができます。私はこれらのアクションを完了するためにブートストラップポップアップ機能を使用しました。しかし、問題は、行を削除、変更、またはコピーしようとするたびに、最後に更新または追加された行(これらの行は必要ではない行)に対して常にこれらのアクションを実行することです。私が望む行に対してこれらのアクションを実行する方法を確認するにはどうすればよいですか? これらの操作のための私のコントローラコードは以下の通りですが、私はそれらが問題ではないと確信しています。

@RequestMapping(value="{productId}/{credentialKey}/modify", method=RequestMethod.POST) 
public ModelAndView getProductDetailsView(@PathVariable String productId, 
     @PathVariable String credentialKey, 
     @ModelAttribute("key") String newCredentialKey, 
     @ModelAttribute("password") String newCredential, 
     @ModelAttribute("dirId") String dirId, 
     RedirectAttributes attributes){ 

    Credential cred = new Credential(); 
    cred.setProductId(productId); 
    cred.setCredentialKey(credentialKey); 
    boolean saveSuccess = awsCredStoreService.updateCredential(cred, newCredentialKey, newCredential, "dev", dirId); 
    if(saveSuccess){ 
     return new ModelAndView("redirect:/?saveSuccess=true"); 
    } 
    return new ModelAndView("redirect:/?saveSuccess=false"); 
} 

@RequestMapping(value="{productId}/{credentialKey}/delete", method=RequestMethod.POST) 
public ModelAndView deleteCredential(RedirectAttributes attributes, 
     @PathVariable String productId, 
     @PathVariable String credentialKey){ 
    boolean saveSuccess = awsCredStoreService.deleteCredential(productId, credentialKey, "dev"); 
    if(saveSuccess){ 
     return new ModelAndView("redirect:/?saveSuccess=true"); 
    } 
    return new ModelAndView("redirect:/?saveSuccess=false"); 
} 

@RequestMapping(value="{productId}/{credentialKey}/copy", method=RequestMethod.POST) 
public ModelAndView copyCredential(RedirectAttributes attributes, 
     @PathVariable String productId, 
     @PathVariable String credentialKey, 
     @ModelAttribute("productsuite") String productsuite, 
     @ModelAttribute("product") String product, 
     @ModelAttribute("key") String key, 
     @ModelAttribute("dirId") String dirId){ 
    Audit audit = new Audit(); 
    Date date = new Date(); 
    Credential currentCred = new Credential(); 
    Credential copyCred = new Credential(); 
    audit.setCreatedBy(dirId); 
    audit.setCreatedDate(date.toString()); 
    audit.setCopiedFrom(productId+"-"+credentialKey); 
    currentCred.setProductId(productId); 
    currentCred.setCredentialKey(credentialKey); 
    copyCred.setProductId(productsuite+"-"+product); 
    copyCred.setCredentialKey(key); 
    copyCred.setAudit(audit); 
    boolean saveSuccess = awsCredStoreService.copyCredential(currentCred, copyCred, "dev"); 
    if(saveSuccess){ 
     return new ModelAndView("redirect:/?saveSuccess=true"); 
    } 
    return new ModelAndView("redirect:/?saveSuccess=false"); 
} 

私は、JSP、HTML、JS、CSSを使用するのがとても新しいです。どんな種類の助けも本当に素晴らしいでしょう。

答えて

1

同じIDを持つ行だけ、モーダルダイアログを作成しています。 あなたは、これはあなたがモーダルダイアログ(DOM)の多くを作成している原因の効率的な方法を、あなたの問題を解決するが、そうでないかもしれないでしょう(商品コードを使用して)

<table id="credStoreTable" class="table table-striped table-bordered"> 
    <thead> 
     <tr> 
      <th>Product Id</th> 
      <th>Credential Key</th> 
      <th>Created By</th> 
      <th>Created Date</th> 
      <th>Updated By</th> 
      <th>Updated Date</th> 
      <th>Copied From</th> 
      <th>Actions</th> 
     </tr> 
    </thead> 
    <tbody> 
     <c:forEach items="${credentials}" var="cred"> 
      <tr> 
       <td>${cred.productId}</td> 
       <td>${cred.credentialKey}</td> 
       <td>${cred.audit.createdBy}</td> 
       <td>${cred.audit.createdDate}</td> 
       <td>${cred.audit.updatedBy}</td> 
       <td>${cred.audit.updatedDate}</td> 
       <td>${cred.audit.copiedFrom}</td> 
       <td> 
       <div class="btn-group"> 
       <button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModalDelete${cred.productId}" >Delete</button> 

        <!-- Modal --> 
        <div class="modal fade" id="myModalDelete${cred.productId}" role="dialog"> 
        <div class="modal-dialog"> 

         <!-- Modal content--> 
         <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal">&times;</button> 
          <h4 class="modal-title">Update Information</h4> 
         </div> 
         <div class="modal-body"> 
          <form method="post" action="${cred.productId}/${cred.credentialKey}/delete"> 
          Product Id: ${cred.productId} 
          <br> 
          Current Key: ${cred.credentialKey} 
          <br> 
          Are you sure you want to delete? 
          <label class="col-md-4 control-label" for="add"></label> 
          <input id="add" type="submit" name="add" class="btn btn-primary" value="Ok"/> 
          </form> 
         </div> 
         <div class="modal-footer"> 
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         </div> 
         </div> 
        </div> 
        </div> 

        <!-- Trigger the modal with a button --> 
        <button type="button" class="btn btn-success btn-xs" data-toggle="modal" data-target="#myModalModify${cred.productId}">Modify</button> 

        <!-- Modal --> 
        <div class="modal fade" id="myModalModify${cred.productId}" role="dialog"> 
        <div class="modal-dialog"> 

         <!-- Modal content--> 
         <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal">&times;</button> 
          <h4 class="modal-title">Update Information</h4> 
         </div> 
         <div class="modal-body"> 
          <form method="post" action="${cred.productId}/${cred.credentialKey}/modify"> 
          Product Id: ${cred.productId} 
          <br> 
          Current Key: ${cred.credentialKey} 
          <br> 
          Enter New Key: 
          <input type="text" name="key" id="key" placeholder="Key"> 
          <br> 
          Enter New Password: 
          <input type="password" name="password" id="password" placeholder="Password"> 
          <br><br> 
          <label class="col-md-4 control-label" for="add"></label> 
          <input id="add" type="submit" name="add" class="btn btn-primary" value="Submit"/> 
          </form> 
         </div> 
         <div class="modal-footer"> 
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         </div> 
         </div> 
        </div> 
        </div> 
        <!-- Trigger the modal with a button --> 
        <button type="button" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#myModalCopy${cred.productId}">Copy</button> 

        <!-- Modal --> 
        <div class="modal fade" id="myModalCopy${cred.productId}" role="dialog"> 
        <div class="modal-dialog"> 

         <!-- Modal content--> 
         <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal">&times;</button> 
          <h4 class="modal-title">Copy Information</h4> 
         </div> 
         <div class="modal-body"> 
          <form method="post" action="${cred.productId}/${cred.credentialKey}/copy"> 
          Current Product Id: ${cred.productId} 
          <br> 
          Current Key: ${cred.credentialKey} 
          <br> 
          Enter New Product Suite: 
          <input type="text" name="productsuite" id="productsuite" placeholder="Product-Suite"> 
          <br> 
          Enter New Product: 
          <input type="text" name="product" id="product" placeholder="Product"> 
          <br> 
          Enter New Key: 
          <input type="text" name="key" id="key" placeholder="Key"> 
          <br><br> 
          <label class="col-md-4 control-label" for="add"></label> 
          <input id="add" type="submit" name="add" class="btn btn-primary" value="Submit"/> 
          </form> 
         </div> 
         <div class="modal-footer"> 
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         </div> 
         </div> 
        </div> 
        </div> 
       </div> 
       </td> 
      </tr> 
     </c:forEach> 
    </tbody> 
</table> 

を異なるIDを設定することができます。

+0

投稿した内容は、自分のマシンで処理されました。私は推測している、私はそれをより効率的にするために何とかスクリプトを使用する必要があります。コードをより洗練されより効率的にする方法について、私にいくつかの指針を教えてもらえますか? –

+0

foreachの最後ではなく、異なるid(コピー、変更、削除など)を持つ3つのモーダルのみを作成し、javascript関数からこのモーダルを呼び出す必要があります。 –

関連する問題