logo标签列表

改变 jqGrid 的样式

javascriptjquerycssjqgrid
20

我正在使用jqGrid 3.5版本。我能否使用jQuery、定制CSS或其他方式更改网格的样式和外观，使其更美观？

7个回答
32

jqGrid 3.5的一个重要特性是与jQuery UI主题的集成。您可以从此处构建和/或选择主题。然后只需在页面中添加对其的引用：

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

这将帮助你轻松获得一个外观非常好的网格，只需最少的努力。

那么这解决了你的问题吗？还是你需要更彻底地改变网格的外观和感觉？

1
是的，这是一个非常酷的工具，但它有一定的限制，你不能从那里解决任何样式问题。 - Zoltan Veres
同意，但它比 jqGrid 的开箱即用更好。从那里开始，这取决于您的需求，无论是 jQuery 主题是否足够好，还是您必须自己编写 CSS。 - Justin Ethier
如果我想在按下添加或更新按钮时更改JQGrid的添加表单的CSS，该怎么办？ - Bhavik Ambani
我可能会问一个问题: https://dev59.com/9GfWa4cB1Zd3GeqPejO_ - Justin Ethier
19
你需要更改网格表头（即时）。
这是我的代码。 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并“搜索”标题栏具有“ui-jqgrid-titlebar”类的div。然后，我删除了原始的“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;
  }

我已经测试过这个方法并且有效。希望这对你有帮助...

如果我想在按下添加或更新按钮时更改JQGrid的添加表单的CSS，该怎么办？ - Bhavik Ambani
1
仅出于优化的目的，可以使用单个选择器来完成此操作：$（“＃gview_jqgrid_ctrs .ui-jqgrid-titlebar”）.toggleClass（“ui-widget-header jqgrid-header”）; - Impirator
3

我相信你能做到。

你有两个选择：

第一种是修改网格的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代码：

这会生成以下 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");

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

如果我想在按下添加或更新按钮时更改JQGrid的添加表单的CSS，该怎么办？ - Bhavik Ambani
3

为了详细说明Justin Ethier所说的...

由于jqGrid使用Jquery-UI主题，改变网格外观的最佳方法是制作自定义主题。

我强烈建议您在尝试修改css之前先尝试这种方法...虽然如果jquery-ui主题看起来太受限制，您也可以这样做。

如果我想在按下“添加”或“更新”按钮时更改JQGrid的添加表单的CSS，该怎么办？ - Bhavik Ambani
1
/* 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");
}
0
你可以移除所有的ui-grid类：
$("[class^='ui-jqgrid']").removeAttr('class');

如果您的网格大小很大，这可能会导致性能问题。

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接