如何更改jqgrid的颜色主题和字体大小

时间:2014-01-28 07:41:14

标签: jqgrid jqgrid-asp.net jqgrid-formatter mvcjqgrid jqgrid-inlinenav

我在MVC 4,jquery和jqgrid中创建了应用程序。

我在其中一个页面中使用了jqgrid,如下所示:

          $('#g).jqGrid({
            ajaxGridOptions: {
                error: function () {
                    $('#g')[0].grid.hDiv.loading = false;
                    alert('An error has occurred.');
                }
            },
            url: '@Url.Action("Getvalues", "cntrollName")/' + 0,
            postData: { ID: rowID },
            datatype: 'json',
            jsonReader: { root: 'List', page: 'Page', total: 'TotalPages', records: 'TotalCount', repeatitems: false, id: 'ID' },
            mtype: 'GET',
            colNames: ['GrdID', Name],
            colModel: [
                { name: ID, index: ID, hidden: true },
                { name: 'FullName', index: 'FullName', width: 150 }
                                ],
            pager: $('#g),
            sortname: ID,
            rowNum: 10,
            width: '525',
            height: '100%',
            viewrecords: true,
            beforeSelectRow: function (rowid, e) {
                                   return true;
            },
            sortorder: 'desc'
        }).navGrid('#g, { edit: false, add: false, del: false, search: false, refresh: false });

请与我分享我如何更改jqgrid的颜色和字体大小。

目前,它只显示默认的浅蓝色主题及其默认字体大小。

由于

1 个答案:

答案 0 :(得分:2)

jqGrid基于jQuery UI Theme。要更改颜色,您可以下载主题(请参阅here并在页面底部的下拉列表中选择主题)或自定义您自己的主题here。通过这种方式,您可以轻松更改所有颜色。

要更改字体大小,您必须覆盖ui.jqgrid.css中定义的一些CSS样式。只需使用像素值搜索font-sizeheight即可。如果您需要增加字体大小,则需要增加网格部分的height个值。