JQgrid自定义按钮,用于在视图记录对话框中显示其他记录详细信息

时间:2013-04-26 14:06:59

标签: jqgrid

这是我的自定义按钮的代码,我想显示有关从服务器端到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();


           }
       } 
});

1 个答案:

答案 0 :(得分:1)

找到解决方案。 这是更新的工作代码,我不得不使用jqgrid信息对话框,

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


           }
       } 
});