Question

 <!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: "<a href='#'>1234567890123456</a>", oid_type: "F", oid_type_desc: "Federal/Agency STRIP"},                                                             {cusip: "<a href='#'>1234567890123456</a>", oid_type: "S", oid_type_desc: "Taxable STRIP not backed by a federal/agency bond"}],
      $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='PIK'>
      <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">PIK</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">Bond Unit Factor</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">PIK Rate</label>
                    <input type="text" class="form-control CUSIP_Text_Input">
                    </div>
                    </div>
                    <div class="col-md-6">
                    <div class="form-group">
                    <label for="selectUser" class="CUSIP_PageTitle Inner_Titles">Cash Rate</label>
                    <input type="text" class="form-control CUSIP_Text_Input">
                    </div>
                    </div>
                    <div class="col-md-6">
                    <div class="form-group">
                    <label for="selectUser" class="CUSIP_PageTitle Inner_Titles">Payment Mode</label>
                    <select class="form-control CUSIP_Form_Control">
                      <option>Cash</option>
                      <option>Bonds</option>
                      <option>Bankruptcy</option>
                    </select>
                    </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='GIK'>
      <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">PIK</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">Bond Unit Factor</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">PIK Rate</label>
                    <input type="text" class="form-control CUSIP_Text_Input">
                    </div>
                    </div>
                    <div class="col-md-6">
                    <div class="form-group">
                    <label for="selectUser" class="CUSIP_PageTitle Inner_Titles">Cash Rate</label>
                    <input type="text" class="form-control CUSIP_Text_Input">
                    </div>
                    </div>
                    <div class="col-md-6">
                    <div class="form-group">
                    <label for="selectUser" class="CUSIP_PageTitle Inner_Titles">Payment Mode</label>
                    <select class="form-control CUSIP_Form_Control">
                      <option>Cash</option>
                      <option>Bonds</option>
                      <option>Bankruptcy</option>
                    </select>
                    </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 -->

    <script src="js/bootstrap.min.js"></script>
            </body>
            </html>

在上面的Html中，我有一个jQgrid表。我是jQuery的新手，我的jQgrid表运行正常。但我需要的是我在这个HTML中保留了不同的弹出窗口。所以如果我点击一些＆＃34; row＆＃34;在名为＆＃34; CUSIP＆＃34;的列中，某些特殊的弹出窗口具有唯一的＆＃39; id＆＃39;应该显示。我不明白如何编写＆＃39; onclick＆＃39;这个功能。请有人帮帮我。请记住，我需要的是＆＃39; CUSIP＆＃39;列具有不同的弹出窗口，其中包含唯一的ID，因此如何编写一个“onclick”＆＃39;具有＆＃39; id＆＃39;的功能对于每个细胞。我保留了2个带有不同id的bootstrap弹出窗口。每个都应该通过点击不同的行来显示。

Answer 1

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

        $(function () {
            'use strict';
            var mydata = [
                    {cusip: "<a href='#' data-toggle='modal' data-target='#TIPS'1234567890123</a>", oid_type: "F", oid_type_desc: "TIPS"},
                    {cusip: "<a href='#' data-toggle='modal' data-target='#NQSI'1234567890</a>", oid_type: "S", oid_type_desc: "NQSI"},
                    {cusip: "<a href='#' data-toggle='modal' data-target='#TIPS'1234567</a>", 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>

这是最终答案......我得到了100％的结果

Answer 2

如果在showDialog函数中替换对话逻辑中的警报，这应该适合您：http://plnkr.co/edit/DwQj3UUFrzg0rYvl57ny

我从columns集合中删除了“key”属性，并删除了该选项： gridview = true 来自网格选项。

如何为jQgrid中的每一行的列添加“jQuery”onclick功能，以显示不同行的不同弹出窗口

2 个答案: