如何为不同的行编写'onclick'函数以显示不同的'弹出窗口'

时间:2014-06-17 07:56:20

标签: jquery jqgrid

        <!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表,它有不同的列。在这些列中有一个名为&#39; CUSIP&#39;的列。在此列中,不同行中有不同的数字。 Jqgrid对我来说很好。我放置了3个不同的&#39; bootstrap&#39;这个html中的弹出窗口。我需要的是,如果我点击第一个“CUSIP&#39;将弹出窗口列为id&#39; TIPS&#39;要显示,如果我点击“CUSIP”的第二个数字&#39;列出带有id&#39; NQSI&#39;的弹出窗口要显示,如果我点击“CUSIP”的第三个数字&#39;将弹出窗口列为id&#39; CPDI&#39;要显示。任何人都可以帮我这个。我真的需要一个解决方案。

3 个答案:

答案 0 :(得分:0)

我不确定你到底遇到了什么问题。 The demo使用您的代码,它可以正常运行。我刚刚删除了一些不需要的选项。 Another demo包括bootstrap 3.1.1的CSS和一些小的CSS设置,以提高jqGrid的可见性。所有更改都没有描述您可能遇到的问题。换句话说,我无法重现您所遇到的问题,但我希望我的工作演示可以帮助您在代码中本地化问题。

还有一个小问题:如果cusip包含每行的唯一值,那么我建议您将key: true添加到cusip列的定义中colModel。因此,jqGrid将使用列中的值作为rowid(表示行的网格的id元素的<tr>属性值)。

更新:如果您需要仅在点击列cusip时显示弹出窗口,则可以使用beforeSelectRow回调而不是onSelectRow。请参阅the answerthe answerthis one等。在您的情况下,它将类似于the following demo

答案 1 :(得分:0)

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

我删除了&#34;键&#34;来自列集合的属性,还删除了gridview = true选项 来自网格选项。

答案 2 :(得分:0)

如果我理解了你的问题,你想要的东西如下?请注意,我保持代码非常基本,以帮助澄清答案。

请参阅我的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;
        }
    }

此致

韦恩