JQgrid自定义按钮，用于在视图记录对话框中显示额外的记录细节

Question

这是我的自定义按钮的代码，我想显示有关从服务器端到jqgrid对话框具有类似的外观和感觉视图记录对话框的选定行的附加详细信息。有人可以帮助与示例代码创建一个对话框类似于从自定义按钮onclick查看记录?

jQuery("#list2").jqGrid('navButtonAdd','#pager2',{
       caption:"",  title: "History",buttonicon:"ui-icon-clock",
       onClickButton : function () { 
           var grid = $("#list2");
           var rowid = grid.jqGrid('getGridParam', 'selrow');
           if (rowid) {
               var alertIDs = {themodal:'alertmod',modalhead:'alerthd',modalcontent:'alertcnt'};
                //if ($("#"+alertIDs.themodal).html() === null) {
                    //alert("1");
                    $.jgrid.createModal(alertIDs," <span tabindex='0'><span tabindex='-1' id='jqg_alrt' class='ui-jqgrid'></span></span>",
                        {gbox:"#gbox_"+$.jgrid.jqID(this.p.id),jqModal:true,drag:true,resize:true,
                        caption:"History",
                        top:300,left:500,width:'auto',height: 'auto',closeOnEscape:true,
                        zIndex: null},"","",true);
                $.jgrid.viewModal("#"+alertIDs.themodal,{gbox:"#gbox_"+$.jgrid.jqID(this.p.id),jqm:true});
                $("#jqg_alrt").focus();
                $("#jqg_alrt").load('jsontableHeadingsApartmentResource.action?viewBy=' + viewBy+'&timeZone=' + timeZone);
           } else {
               var alertIDs = {themodal:'alertmod',modalhead:'alerthd',modalcontent:'alertcnt'};
                    $.jgrid.createModal(alertIDs,"<div>"+$.jgrid.nav.alerttext+"</div><span tabindex='0'><span tabindex='-1' id='jqg_alrt'></span></span>",
                        {gbox:"#gbox_"+$.jgrid.jqID(this.p.id),jqModal:true,drag:true,resize:true,
                        caption:$.jgrid.nav.alertcap,
                        top:300,left:500,width:200,height: 'auto',closeOnEscape:true,
                        zIndex: null},"","",true);
                $.jgrid.viewModal("#"+alertIDs.themodal,{gbox:"#gbox_"+$.jgrid.jqID(this.p.id),jqm:true});
                $("#jqg_alrt").focus();

           }
       } 
});

Answer 1

找到解决方案。这里是更新后的工作代码，我必须使用jgrid info_dialog，

      jQuery("#list2").jqGrid('navButtonAdd','#pager2',{
       caption:"",  title: "History",buttonicon:"ui-icon-clock",
       onClickButton : function () { 
           var grid = $("#list2");
           var rowid = grid.jqGrid('getGridParam', 'selrow');
           var msg = "" ;
           if (rowid) {
               $.ajax({
                   url: 'jsontableHistoryApartmentResource.action?viewBy=' + viewBy+'&rowId=' + rowid,
                   type: "POST",
                   contentType: "application/json; charset=utf-8",
                   dataType: "json",
                   success: function (data, st) {
                       if (st == "success") {
                           msg = data.rr.history;//jqgrid history data
                           $.jgrid.info_dialog('History','<span style="white-space: nowrap">' + msg +'</span>', $.jgrid.edit.bClose,{buttonalign:'center', width:'auto',resize: true , align: 'left'}); 
                       }
                   },
                   error: function () {
                      // alert("Error with AJAX callback");
                   }
                 });


           } else {
               var alertIDs = {themodal:'alertmod',modalhead:'alerthd',modalcontent:'alertcnt'};
                    $.jgrid.createModal(alertIDs,"<div>"+$.jgrid.nav.alerttext+"</div><span tabindex='0'><span tabindex='-1' id='jqg_alrt'></span></span>",
                        {gbox:"#gbox_"+$.jgrid.jqID(this.p.id),jqModal:true,drag:true,resize:true,
                        caption:$.jgrid.nav.alertcap,
                        top:300,left:500,width:200,height: 'auto',closeOnEscape:true,
                        zIndex: null},"","",true);
                $.jgrid.viewModal("#"+alertIDs.themodal,{gbox:"#gbox_"+$.jgrid.jqID(this.p.id),jqm:true});
                $("#jqg_alrt").focus();

           }
       } 
});