jqGrid在编辑/添加对话框前打开对话框

时间:2013-06-05 09:44:55

标签: javascript jquery jquery-ui jqgrid

我可以打开一个新对话框,但是会在edit- / add-dailog后面打开。如何在编辑/添加对话框前面打开它?如果我使用警报框执行相同操作,则它会在实际情况下起作用。

<style>
.dialogue{ z-index: 1000; }
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
    $('#A').dialog({
        autoOpen: false,
        buttons: {
            "Open Dialog B": function(){
             $('#B').dialog('open');
            }
        }
    });
    $('#B').dialog({
        autoOpen: false
    });

    jQuery("#list").jqGrid({
        sortable: true,
        url:'{{=URL('get',args=table)}}',
        datatype: 'json',
        mtype: 'GET',
        colNames:{{=h}},
        colModel :{{=b}},
        ondblClickRow: function (rowid) {
            myClickHandle.call(this, rowid);
        },
        jsonReader: { 
            repeatitems: false
        },
        width: 1024,
        height: '100%',
        pager: '#gridpager',
        rowNum:10,
        rowList:[10,20,30],
        sortname: 'id',
        sortorder: 'desc',
        viewrecords: true,
        gridview:true,
        caption: '{{=table}}',
        editurl:'{{=URL('adu',args=table)}}'

    });
    jQuery("#list").jqGrid('navGrid','#gridpager',
                           {edit:true}, 
                           { beforeShowForm: function(form) {
                               $('.basic').live('click',function() {
                    $('#A').dialog("open");
            });
                      },

                     width:500,height:'100%',
                     reloadAfterSubmit:false,
                     closeAfterEdit:true}, // edit options
                     {width:500,height:'100%',
                     closeAfterAdd:true}, // add options
                     {reloadAfterSubmit:false,
                     closeAfterSubmit:true}, // del options
             {} // search options
             );
    jQuery("#list").jqGrid('navButtonAdd','#gridpager',{
        caption: "",
        title: "Reorder Columns",
        onClickButton : function (){
            jQuery("#list").jqGrid('columnChooser',{
                done: function(perm) {
                    if (perm) {
                    var gridWidth = this.jqGrid('getGridParam', 'width');
                        this.jqGrid('setGridWidth', gridWidth);
                        this.jqGrid('remapColumns', perm, true);
                        $.ajax({
                            type: 'POST',
                            contentType: 'application/json; charset=utf-8',
                            url: "{{=URL('ps',args=(table,id))}}",
                            data: $('#list').jqGridExport({
                                exptype: 'jsonstring',
                                root: 'Settings'
                            })
                        });
                    }
                }
            });
        }
    });

 }); 
</script>
<table id="list"></table>

<div id="gridpager">
</div>
<div title="Dialog A" id="A" class="dialogue">Dialog A</div>
<div title="Dialog B" id="B" class="dialogue">Dialog B</div>

Greets Kluther

1 个答案:

答案 0 :(得分:1)

尝试使用对话中的modal选项(jsFiddle http://jsfiddle.net/r4meJ/):

$('#A').dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        "Open Dialog B": function(){
         $('#B').dialog('open');
        }
    }
});
$('#B').dialog({
    autoOpen: false,
    modal: true
});

这应该提供您所需要的