更改jqGrid的样式
我相信你可以。
您有两个选择:
您可以修改网格的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");
我建议同时使用技术。
jqGrid 3.5的一大特性是与jQuery UI主题的集成。您可以从here构建和/或选择一个主题。然后只需在页面中添加一个引用:
<link rel="stylesheet" type="text/css" href="../css/redmond/jquery-ui-1.7.2.custom.css"/>
这将为您提供一个看起来非常好的网格,并且极少费力。
这是否解决了您的问题,还是您需要更新网格外观?
是的,这是一个非常酷的工具,但它有一定的局限性,你无法从那里解决任何样式问题。 – 2009-09-16 12:03:34
同意,但它比jqGrid带来的更好。从那里它取决于您的需求是否jQuery主题足够好或者如果您必须推出自己的CSS。 – 2009-09-16 13:20:39
如果我想在添加或更新按钮时更改JQGrid添加窗体的CSS,该怎么办? – 2012-08-13 05:27:05
要阐述什么贾斯汀·西尔说...
由于jqGrid的使用jQuery的UI主题,以更改网格的外观将是使一个自定义theme的最佳途径。
我强烈建议你在尝试修改css之前,看看它是否适用于你......尽管你也可以这样做,如果jquery-ui主题看起来太过于局限于你。
如果我想在添加或更新按钮时更改JQGrid添加窗体的CSS,该怎么办? – 2012-08-13 05:32:45
您需要更改网格标题(即时)。
这是我的代码
的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-标题栏”级。然后,我删除了原来的“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-05-24 00:55:32
如果我想在添加或更新按钮时更改JQGrid添加窗体的CSS,该怎么办? – 2012-08-13 05:28:03
只是为了优化,可以在一个选择器中完成:'$(“#gview_jqgrid_ctrs .ui-jqgrid-titlebar”)。toggleClass(“ui-widget-header jqgrid-header”); – Impirator 2013-03-18 21:44:30
/* 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");
}
您可以删除所有的用户界面,网格类:
$("[class^='ui-jqgrid']").removeAttr('class');
这可能有性能问题,如果您的网格大小大。
我以新的方式修改了jQGrid的css,这也将支持bootastrap设计。你需要下面的东西来配置此jqGrid的
1)字体真棒风格
2)jqGrid的最新束
新设计的jqGrid看起来像下面的图片
新的完整的CSS和完整的javascripts编码在这里包括http://www.techdoubts.net/2015/11/working-jqgrid-responsive-css-boostrap.html。
如果我想在添加或更新按钮时更改JQGrid添加窗体的CSS,该怎么办? – 2012-08-13 05:28:20