更改jqGrid的樣式

Question

我正在使用jqGrid 3.5。我可以改變網格的樣式和外觀，並使用jQuery或自定義CSS或其他東西使它更漂亮嗎？

Answer 1

我相信你可以。

您有兩個選擇：

您可以修改網格的CSS。 如果必須對設計進行小修改，這非常有用。 不應該這樣做主要的修改，因爲JQGrid的CSS類真的相互依賴。

或者您可以從HTML中刪除所有樣式，並將其替換爲您自己的樣式。

比如你有一個類似的jqGrid：

HTML

<table id="list2" class="scroll" cellpadding="0" cellspacing="0"></table> 
<div id="pager2" class="scroll" style="text-align:center;"></div> 

jQuery的

jQuery("#list2").jqGrid({ url:'server.php?q=2', 
datatype: "json", 
colNames:['Inv No','Date'], 
colModel:[ {name:'id',index:'id', width:55},{name:'invdate',index:'invdate',width:90}], 
rowNum:10, 
rowList:[10,20,30], 
pager: jQuery('#pager2'), 
sortname: 'id', 
viewrecords: true, 
caption:"JSON Example" }).navGrid('#pager2',{edit:false,add:false,del:false}); 

這將產生類似下面的HTML：

<div class="ui-jqgrid-titlebar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"> 

.. 

</div> 

刪除所有CSS類：

JQuery("#list2").removeClass(".ui-jqgrid-titlebar"); 

等

你創建你自己的類後，您可以添加到HTML結構：

JQuery("#list2").addClass(".YourClass"); 

我建議同時使用技術。

Answer 2

jqGrid 3.5的一大特性是與jQuery UI主題的集成。您可以從here構建和/或選擇一個主題。然後只需在頁面中添加一個引用：

<link rel="stylesheet" type="text/css" href="../css/redmond/jquery-ui-1.7.2.custom.css"/> 

這將爲您提供一個看起來非常好的網格，並且極少費力。

這是否解決了您的問題，還是您需要更新網格外觀？

Answer 3

要闡述什麼賈斯汀·西爾說...

由於jqGrid的使用jQuery的UI主題，以更改網格的外觀將是使一個自定義theme的最佳途徑。

我強烈建議你在嘗試修改css之前，看看它是否適用於你......儘管你也可以這樣做，如果jquery-ui主題看起來太過於侷限於你。

Answer 4

您需要更改網格標題（即時）。

這是我的代碼

的HTML：

<table id="jqgrid_ctrs" class="scroll" cellpadding="0" cellspacing="0"></table> 
<div id="jqgrid_ctrs_pager" class="scroll" style="text-align:center;"></div> 

的jqGrid的：

jQuery("#jqgrid_ctrs").jqGrid({ 
     url:'php-modules/controllers_data.php?ctrtype=LED', 
     datatype: "json", 
     width:500, 
     height:"auto", 
     colNames:['CtrName','Type', 'Description', 'Location'], 
     colModel:[ 
      {name:'CtrName',index:'CTRNAME', width:70, editable:false}, 
      {name:'Type',index:'CTRTYPE', width:70, editable:false}, 
      {name:'Description',index:'CTRDESCR', width:250, editable:false}, 
      {name:'Location',index:'CTRLOCATION', width:70, editable:false} 
     ], 
     rowNum:10, 
     rowList:[10,20,30], 
     pager: jQuery('#jqgrid_ctrs_pager'), 
     sortname: 'CtrName', 
     viewrecords: true, 
     sortorder: 'desc', 
     caption:'System Controllers', 

    }).navGrid('#jqgrid_ctrs_pager', 
       {search:true,edit:false,add:false,del:false} 
      ); 

爲了瞭解哪個對象我有工作的，讓我們檢查由JavaScript代碼生成的HTML代碼：

<div id="gview_jqgrid_ctrs" class="ui-jqgrid-view" style="width: 760px;"> 
    <div class="ui-jqgrid-titlebar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"></div> 
    <div class="ui-state-default ui-jqgrid-hdiv" style="width: 760px;"> 

...

現在，指定一個ID唯一DIV是< DIV ID = 「gview_jqgrid_ctrs」 ......

這就是爲什麼下面不工作。

jQuery("#jqgrid_ctrs").removeClass('.ui-widget-header'); 
jQuery("#jqgrid_ctrs").addClass('.jqgrid-header'); 

我不得不選擇父DIV和「搜索到」報頭的div，具有指定的「UI-的jqGrid-標題欄」級。然後，我刪除了原來的「ui-widget-header」類，並用我自己的類替換。

$("#gview_jqgrid_ctrs .ui-jqgrid-titlebar").removeClass('ui-widget-header'); 
$("#gview_jqgrid_ctrs .ui-jqgrid-titlebar").addClass('jqgrid-header'); 

其中.jqgrid-header是以這種方式定義的樣式。

.jqgrid-header { 
    background:#FF9C00 url(images/new_header_bck.png) repeat-x scroll 50% 50%; 
    border:1px solid #4297D7; 
    color:#FF0000; 
    font-weight:bold; 
    } 

我已經測試過這個並且工作。希望這將是有益的......

Answer 5

/* Remove jquery-ui styles from jqgrid */ 
function removeJqgridUiStyles(){ 
    $(".ui-jqgrid").removeClass("ui-widget ui-widget-content"); 
    $(".ui-jqgrid-view").children().removeClass("ui-widget-header ui-state-default"); 
    $(".ui-jqgrid-labels, .ui-search-toolbar").children().removeClass("ui-state-default ui-th-column ui-th-ltr"); 
    $(".ui-jqgrid-pager").removeClass("ui-state-default"); 
} 

Answer 6

您可以刪除所有的用戶界面，網格類：

$("[class^='ui-jqgrid']").removeAttr('class'); 

這可能有性能問題，如果您的網格大小大。

Answer 7

我以新的方式修改了jQGrid的css，這也將支持bootastrap設計。你需要下面的東西來配置此jqGrid的

1）字體真棒風格

2）jqGrid的最新束

新設計的jqGrid看起來像下面的圖片

新的完整的CSS和完整的javascripts編碼在這裏包括http://www.techdoubts.net/2015/11/working-jqgrid-responsive-css-boostrap.html。