改变jqGrid的风格

Question

我正在使用jqGrid 3.5.我可以改变网格的样式和外观,并使用jQuery或自定义CSS或其他东西使其更美观吗？

Answer 1

jqGrid 3.5的一大特色是与jQuery UI主题的集成.您可以从此处构建和/或选择主题.然后只需在页面中添加对它的引用:

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

这将为您提供一个看起来非常好的网格,只需最少的努力.

这是否可以解决您的问题,还是需要更彻底地检查网格外观？

Answer 2

您需要更改网格标题(即时).

这是我的代码

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-titlebar"类.然后我删除了原来的"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 3

我相信你可以。

您有两个选择：

您可以修改网格的 CSS。如果必须对设计进行小的修改，这非常有用。主要修改不应该以这种方式完成，因为 JQGrid 的 CSS 类实际上是相互依赖的。

或者您可以从 HTML 中删除所有样式并用您自己的样式替换。

例如，您有一个 JQGrid，例如：

超文本标记语言

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

ETC。

创建自己的类后，您可以使用以下命令添加到 HTML 结构中：

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

我建议同时使用这两种技术。