jqgrid的外观重绘

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

1、如果你想随时更改jqGrid的外观和列，可以先将jqGrid卸载掉再重新加载：$(grid).GridUnload(); $("#list_server_table").trigger("reloadGrid");

2、jqGrid的列：colName、colModel其实是 json 格式的数据，数据是数组（colModel的数组包含对象），因此可以向后台去获取相应的 colName、colModel 的数据，再去重绘jqGrid。

 　　　function showJqgrid(sort_data)

      {

          jQuery(grid).jqGrid({

             url                : "./get_table_data",

             datatype           : "json",

             mtype            : "post",

             postData         : {'sort' : over_sort,

                                 'sub_sort' : over_sub_sort,

                                 'category' : over_category,

                                 'start_time' : over_start_time,

                                 'end_time'   : over_end_time,

                                },

             caption             : sort_data.caption,

             height             : "5%",

             autowidth         : true,

             colNames  : sort_data.col_name,

             colModel  : sort_data.col_model,                   

             viewrecords : true,

             pager        : "program_statistics_pager",

             rowNum      : 15,

             //design the whole table locally by css

             beforeRequest: function(){

                 setJqgridModel(grid, gview);

             },

             gridComplete: function(){

                 $(grid).closest(".ui-jqgrid-bdiv").css("overflow-x", "hidden");

             },

             loadComplete: function(data) {

                 var table = this;

                 setTimeout(function(){

                     if (data.records == 0)

                     {

                         jQuery("#program_statistics_table").clearGridData();

                     }

                     updateActionIcons(table);

                     updatePagerIcons(table);

                     enableTooltips(table);

                 }, 0);

             },

         });

         function styleCheckbox(table)

         {

         }

         function updateActionIcons(table)

         {

         }

         function updatePagerIcons(table)

         {

             var replacement =

             {

                 'ui-icon-seek-first' : 'fa fa-angle-double-left bigger-140',

                 'ui-icon-seek-prev' : 'fa fa-angle-left bigger-140',

                 'ui-icon-seek-next' : 'fa fa-angle-right bigger-140',

                 'ui-icon-seek-end' : 'fa fa-angle-double-right bigger-140'

             };

             $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){

                 var icon = $(this);

                 var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

                 if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);

             })

         }

         function enableTooltips(table)

         {

             $('.navtable .ui-pg-button').tooltip({container:'body'});

             $(table).find('.ui-pg-div').tooltip({container:'body'});

         }

      }