1

カスタムボタンのコードは次のとおりです。選択した行に関する追加の詳細をサーバー側から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();


           }
       } 
});
4

1 に答える 1

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


           }
       } 
});
于 2013-05-02T13:18:51.710 に答える