如何爲不同的行寫'onclick'函數以顯示不同的'彈出'

-1

 <!DOCTYPE html> 
     <html lang="en"> 
     <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     <meta charset="utf-8"> 
     <title>Index</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link href="css/bootstrap.css" rel="stylesheet" media="screen" type="text/css"> 
     <link href="css/cerulean.css" rel="stylesheet" media="screen and (min-width: 37.5em)" type="text/css"> 
     <link href="css/custom.css" rel="stylesheet" media="screen" type="text/css"> 
     <link href="css/smoothness/jquery-ui-1.10.4.custom.css" rel="stylesheet" media="screen" type="text/css"> 
     <link href="css/ui.jqgrid.css" rel="stylesheet" media="screen" type="text/css"> 
     <script type='text/javascript' src="js/respond.js"></script> 
     <script src="js/jquery-1.10.2.js"></script> 
     <script src="js/jquery-ui-1.10.4.js"></script> 
     <script src="js/grid.locale-en.js"></script> 
     <script src="js/jquery.jqGrid.min.js"></script> 

     <script type="text/javascript"> 
     /////////////////UPCOMING RECORD DATE///////////////// 

     $(function() { 
      'use strict'; 
      var mydata = [ 
        {cusip: "1234567890123", oid_type: "F", oid_type_desc: "TIPS"}, 
        {cusip: "1234567890", oid_type: "S", oid_type_desc: "NQSI"}, 
        {cusip: "1234567", oid_type: "C", oid_type_desc: "CPDI"} 

       ], 
       $grid = $("#myOID"), 
       viewParam = { 
        bSubmit: "Save and Close", 
        recreateForm: true, 
        beforeShowForm: function ($form){ 
         $form.find("td.DataTD").each(function() { 
          var html = $(this).html(); // &nbsp;<span>&nbsp;</span> 
          if (html.substr(0, 6) === "&nbsp;") { 
           $(this).html(html.substr(6)); 
          } 

         }); 
        } 
       }; 

      $grid.jqGrid({ 
       datatype: 'local', 
       data: mydata, 
       colNames: ["CUSIP", "OID Code", "OID Type Description"], 
       colModel: [ 
        {name: 'cusip', align: 'left', width: 120, sorttype: 'text', index: 'cusip'}, 
        {name: 'oid_type', align: 'left', width: 90, sorttype: 'text', index: 'oid_type'}, 
        {name: 'oid_type_desc', align: 'left', width: 440, sorttype: 'text', index: 'oid_type_desc'}, 
       ], 
       rowNum: 15, 
       rowList: [15], 
       pager: '#pager1', 
       gridview: true, 
       autoWidth: true, 
       //editable: true, 
       rownumbers: false, 
       // onSelectRow: function (id) { 
      //  $(this).jqGrid('viewGridRow', id, viewParam); 
      // }, 
       sortname: 'invdate', 
       viewrecords: false, 
       sortorder: 'desc', 
       width: 650, 
       shrinkToFit: false, 
       height:"auto" 
      }); 
     }); 
     /////////////////UPCOMING RECORD DATE ENDS///////////////// 



     </script> 

     </head> 

     <body> 

     <div class="row" id='oid_index_jqgrid'> 
     <div class="col-xs-6 oid_index_jqgrid_col"> 
     <div class="col-md-6 oid_index_jqgrid"> 
      <table id="myOID"></table> 
     <div id="pager1"></div> 
     </div> 
     </div> 

     </div> 

     <div class="modal fade" id='TIPS'> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
      <h4 class="modal-title">TAXBLE STRIP</h4> 
      </div> 
      <div class="modal-body"> 
      <form role="form"> 
      <div class="row"> 
      <div class="col-md-6"> 
        <div class="form-group"> 
        <label for="selectUser" class="CUSIP_PageTitle Inner_Titles">OID Type</label> 
        <select class="form-control CUSIP_Form_Control"> 
         <option>A</option> 
         <option>B</option> 
         <option>C</option> 
         <option>D</option> 
         <option>E</option> 
        </select> 
        </div> 
        </div> 
        <div class="col-md-6"> 
        <div class="form-group"> 
        <label for="selectUser" class="CUSIP_PageTitle Inner_Titles">Issue Date</label> 
        <input type="text" class="form-control CUSIP_Text_Input calender_icon"> 
        </div> 
        </div> 
        <div class="col-md-6"> 
        <div class="form-group"> 
        <label for="selectUser" class="CUSIP_PageTitle Inner_Titles">Maturity Date</label> 
        <input type="text" class="form-control CUSIP_Text_Input calender_icon"> 
        </div> 
        </div> 
        </div> 
      </form> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default popup_close" data-dismiss="modal">Close</button> 
      <button type="button" class="btn btn-primary">Save changes</button> 
      </div> 
     </div><!-- /.modal-content --> 
     </div><!-- /.modal-dialog --> 
     </div><!-- /.modal --> 

     <div class="modal fade" id='NQSI'> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
      <h4 class="modal-title">TAXBLE STRIP</h4> 
      </div> 
      <div class="modal-body"> 
      <form role="form"> 
      <div class="row"> 
      <div class="col-md-6"> 
        <div class="form-group"> 
        <label for="selectUser" class="CUSIP_PageTitle Inner_Titles">OID Type</label> 
        <select class="form-control CUSIP_Form_Control"> 
         <option>A</option> 
         <option>B</option> 
         <option>C</option> 
         <option>D</option> 
         <option>E</option> 
        </select> 
        </div> 
        </div> 
        <div class="col-md-6"> 
        <div class="form-group"> 
        <label for="selectUser" class="CUSIP_PageTitle Inner_Titles">Issue Date</label> 
        <input type="text" class="form-control CUSIP_Text_Input calender_icon"> 
        </div> 
        </div> 
        </div> 
      </form> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default popup_close" data-dismiss="modal">Close</button> 
      <button type="button" class="btn btn-primary">Save changes</button> 
      </div> 
     </div><!-- /.modal-content --> 
     </div><!-- /.modal-dialog --> 
     </div><!-- /.modal --> 

     <div class="modal fade" id='CPDI'> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
      <h4 class="modal-title">TAXBLE STRIP</h4> 
      </div> 
      <div class="modal-body"> 
      <form role="form"> 
      <div class="row"> 
      <div class="col-md-6"> 
        <div class="form-group"> 
        <label for="selectUser" class="CUSIP_PageTitle Inner_Titles">OID Type</label> 
        <select class="form-control CUSIP_Form_Control"> 
         <option>A</option> 
         <option>B</option> 
         <option>C</option> 
         <option>D</option> 
         <option>E</option> 
        </select> 
        </div> 
        </div> 
        <div class="col-md-6"> 
        <div class="form-group"> 
        <label for="selectUser" class="CUSIP_PageTitle Inner_Titles">Issue Date</label> 
        <input type="text" class="form-control CUSIP_Text_Input calender_icon"> 
        </div> 
        </div> 
        </div> 
      </form> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default popup_close" data-dismiss="modal">Close</button> 
      <button type="button" class="btn btn-primary">Save changes</button> 
      </div> 
     </div><!-- /.modal-content --> 
     </div><!-- /.modal-dialog --> 
     </div><!-- /.modal --> 



     </body> 
     </html>

在上面的HTML中，我有一個JQGRID表，它具有不同的列。在這些專欄中有一個名爲'CUSIP'的專欄。在此列中，不同行中有不同的數字。 Jqgrid對我來說工作得很好。我在這個html中放置了3個不同的'bootstrap'彈出窗口。我需要的是，如果我點擊'CUSIP'列的第一個數字'IDPS'的彈出框顯示，如果我點擊'CUSIP'列的第二個數字'ID'NQSI'彈出顯示，如果我點擊'CUSIP'列的第三個號碼，顯示ID爲'CPDI'的彈出窗口。任何人都可以幫助我。我真的需要一個解決方案。如何爲不同的行寫'onclick'函數以顯示不同的'彈出'

來源

2014-06-17 user3734734

請用的jsfiddle〔實施例 – raskalbass

JS搗鼓上述問題 – user3734734

http://jsfiddle.net/VLX4s/1/ – user3734734

我不確定你到底有哪個問題。 The demo使用您的代碼，它沒有任何問題。我只是刪除了一些不需要的選項。 Another demo包括引導程序3.1.1的CSS和一些小的CSS設置，以提高jqGrid的可見性。所有的變化都沒有描述你可能遇到的問題。換句話說，我無法重現您擁有的問題，但我希望我的工作演示可以幫助您將代碼中的問題本地化。

一個更小的話：如果cusip包含的每一行唯一值，那麼我會建議你在colModel添加key: true到cusip列的定義。因此，jqGrid將使用列中的值作爲rowid（表示行的網格元素的id屬性的值）。

修訂：如果您只需要在點擊列CUSIP的情況下，顯示彈出，那麼你可以用它代替onSelectRowbeforeSelectRow回調。請參閱the answer,the answer,this one等等。在您的情況下，它將與the following demo中的內容類似。

來源

2014-06-17 10:00:51 Oleg

嗨奧列格，我的jsfiddle有一些問題...我明白...你發送的演示是什麼我想，這是解決方案...你可以給我你編輯的代碼... – user3734734

嗨奧列格，什麼我需要的是我的彈出窗口在我的HTML中有不同的id，我必須調用每個彈出窗口的ID爲'CUSIP'的每個值，其他列不需要'onclick'功能。 – user3734734

嗨奧列格你明白我的問題？ – user3734734

如果更換ShowDialog的功能，提高警覺，你的對話框邏輯這應該爲你工作：http://plnkr.co/edit/DwQj3UUFrzg0rYvl57ny

我已刪除從列集合了「關鍵」屬性，並還刪除了選項的GridView =真從網格選項。

來源

2014-06-17 20:42:27 JDTLH9

如果我理解你的問題，你想要類似下面的東西？請注意，我保持代碼非常基本，以幫助澄清答案。

請參閱我的jsfiddle here

// this is used by the onSelectRow function in jqGrid - see code further down 
function showPopup(id){ 
     switch(id){ 
      case 1: 
       Showpop1(); 
       break; 
      case 2: 
       Showpop2(); 
       break; 
      case 3: 
       Showpop3(); 
       break; 
      case 4: 
       Showpop4(); 
       break; 
      case 5: 
       Showpop5(); 
       break; 
      // case etc... 
      default: 
       break; 
     } 
    }

問候，

韋恩

來源

2014-06-18 08:50:47

如何爲不同的行寫'onclick'函數以顯示不同的'彈出'

回答

相關問題