Change style of jqGrid

Question

I am using jqGrid 3.5. Can I change the style and look of the grid and make it more beautiful using jQuery or custom CSS or something else?

Answer 1

You would need to change the grid header (on-the-fly).

This is my code

The HTML:

The 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}
              );

In order to understand which object I have to work in, let's inspect the HTML code generated by the JavaScript code:

...

Now, the only div with an ID specified is the

That's why the following DOESN'T WORK.

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

I had to select the parent div and "search into" the header div, having the "ui-jqgrid-titlebar" class specified. Then I removed the original "ui-widget-header" class and replace with my own class.

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

Where .jqgrid-header is a style defined in this way.

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

I've tested this and works. Hope this will be useful...

0 讨论(0)

查看其它7个回答

发布评论:

提交评论

---

•  加载中...