2013-04-26 35 views
1

这里是我的自定义按钮的代码,我想显示有关选定的行从服务器端到jqgrid对话框的具有类似的外观和感觉的记录对话。有人可以帮助一个示例代码来创建一个类似于从自定义按钮onclick中查看记录的对话框吗?JQgrid自定义按钮来显示额外的记录细节,因为在查看记录对话框

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(); 


      } 
     } 
}); 
+3

而你的问题是? – Mark 2013-04-26 14:08:42

+0

有人可以帮助一个示例代码来创建一个类似于从自定义按钮onclick查看记录对话框?用这个问题更新了帖子。 – Bruce 2013-04-29 05:52:51

+0

因此,您希望我们为您编写代码,该代码将显示一种可以异步地从选定行上的服务器获取额外数据的表单?到目前为止,您尝试过/写过什么? – Mark 2013-04-29 10:39:43

回答

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(); 


      } 
     } 
});