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 css
25             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      }
原文地址:https://www.cnblogs.com/linguoguo/p/4213641.html