我正在使用jqGrid 3.5。我可以使用 jQuery 或自定义 CSS 或其他方式更改网格的样式和外观并使其更漂亮吗？
问问题
100274 次
7 回答
32
jqGrid 3.5 的一大特点是与 jQuery UI 主题的集成。您可以从此处构建和/或选择主题。然后只需在您的页面中添加对它的引用：
<link rel="stylesheet" type="text/css" href="../css/redmond/jquery-ui-1.7.2.custom.css"/>
这将使您以最少的努力获得一个看起来非常好的网格。
这是否解决了您的问题，或者您是否需要进一步检查网格的外观？
于 2009-09-15T21:26:12.770 回答
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 并“搜索”标题 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;
}
我已经对此进行了测试并且可以正常工作。希望这会有用...
于 2010-02-10T17:03:37.713 回答
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：
<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");
我建议同时使用这两种技术。
于 2009-09-12T16:53:30.863 回答
3
详细说明 Justin Ethier 所说的……
由于 jqGrid 使用 Jquery-UI 主题，因此更改网格外观的最佳方法是制作自定义主题。
我强烈建议您在事后尝试修改 css 之前先看看这是否适合您……尽管您也可以这样做，如果 jquery-ui 主题外观对您来说太局限的话。
于 2009-09-21T19:27:21.867 回答
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");
}
于 2012-03-05T22:38:56.900 回答
0
您可以删除所有 ui-grid 类：
$("[class^='ui-jqgrid']").removeAttr('class');
如果您的网格尺寸很大，这可能会出现性能问题。
于 2014-01-01T15:55:55.273 回答
0
我以一种新的方式修改了 jQGrid 的 css，这也将支持引导程序设计。您需要以下内容来配置此 jQGrid
1）字体真棒风格
2) jQGrid 最新包
新设计的 jQGrid 如下图所示
此处包含新的完整 CSS 和完整 javascripts 编码http://www.techdoubts.net/2015/11/working-jqgrid-responsive-css-boostrap.html。
于 2017-05-02T11:04:36.470 回答