首页 > 代码库 > jqgrid的外观重绘

jqgrid的外观重绘

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

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

 1    function showJqgrid(sort_data) 2      {                 3          jQuery(grid).jqGrid({ 4             url                : "./get_table_data", 5             datatype           : "json", 6             mtype            : "post", 7             postData         : {‘sort‘ : over_sort,  8                                 ‘sub_sort‘ : over_sub_sort, 9                                 ‘category‘ : over_category,10                                 ‘start_time‘ : over_start_time,11                                 ‘end_time‘   : over_end_time,12                                },13             caption             : sort_data.caption,14             height             : "5%",15             autowidth         : true,16             17             colNames  : sort_data.col_name,18             colModel  : sort_data.col_model,                   19                 20             viewrecords : true,21             pager        : "program_statistics_pager",22             rowNum      : 15,23             24             //design the whole table locally by css25             beforeRequest: function(){26                 setJqgridModel(grid, gview);27             },28             29             gridComplete: function(){30                 $(grid).closest(".ui-jqgrid-bdiv").css("overflow-x", "hidden");31             },32             33             loadComplete: function(data) {34                 var table = this;35                 36                 setTimeout(function(){                37                     if (data.records == 0)38                     {39                         jQuery("#program_statistics_table").clearGridData();40                     }41                     42                     updateActionIcons(table);43                     updatePagerIcons(table);44                     enableTooltips(table);45                 }, 0);46             },        47         });48                 49         function styleCheckbox(table) 50         {51             52         }53         54         function updateActionIcons(table) 55         {56             57         }58         59         function updatePagerIcons(table) 60         {61             var replacement = 62             {63                 ‘ui-icon-seek-first‘ : ‘fa fa-angle-double-left bigger-140‘,64                 ‘ui-icon-seek-prev‘ : ‘fa fa-angle-left bigger-140‘,65                 ‘ui-icon-seek-next‘ : ‘fa fa-angle-right bigger-140‘,66                 ‘ui-icon-seek-end‘ : ‘fa fa-angle-double-right bigger-140‘67             };68             $(‘.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon‘).each(function(){69                 var icon = $(this);70                 var $class = $.trim(icon.attr(‘class‘).replace(‘ui-icon‘, ‘‘));71                 72                 if($class in replacement) icon.attr(‘class‘, ‘ui-icon ‘+replacement[$class]);73             })74         }75 76         function enableTooltips(table) 77         {78             $(‘.navtable .ui-pg-button‘).tooltip({container:‘body‘});79             $(table).find(‘.ui-pg-div‘).tooltip({container:‘body‘});80         }81      }

 

jqgrid的外观重绘