改变jqGrid的风格
我正在使用jqGrid 3.5。 我可以改变网格的样式和外观，并使用jQuery或自定义CSS或其他东西使其更美观吗？
jqGrid 3.5的一大特色是与jQuery UI主题的集成。 您可以从此处构建和/或选择主题。 然后只需在页面中添加对它的引用：
这将为您提供一个看起来非常好的网格，只需最少的努力。
这是否可以解决您的问题，还是需要更彻底地检查网格外观？
您需要更改网格标题（即时）。
这是我的代码
HTML：
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代码：
…
现在，唯一具有指定ID的div是
这就是为什么以下不起作用的原因。
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; }
我已经测试了这个并且有效。 希望这会有用……
详细说明Justin Ethier所说的……
由于jqGrid使用Jquery-UI主题，因此更改网格外观的最佳方法是创建自定义主题 。
我强烈建议你在尝试修改css之前看看它是否适合你…虽然你也可以这样做，如果jquery-ui主题看起来太局限了你。
我相信你可以。
你有两个选择：
您可以修改网格的CSS。 如果必须对设计进行小的修改，这很有用。 不应该以这种方式进行主要修改，因为JQGrid的CSS类实际上是相互依赖的。
或者，您可以从HTML中删除所有样式并将其替换为您自己的样式。
例如，你有一个像JQGrid：
HTML
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：
删除所有CSS类：
JQuery("#list2").removeClass(".ui-jqgrid-titlebar");
等等
创建自己的类后，可以使用以下命令添加到HTML结构：
JQuery("#list2").addClass(".YourClass");
我建议使用这两种技术。
/* 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"); }
我以一种新的方式修改了jQGrid的css，它也支持bootastrap设计。 您需要以下内容来配置此jQGrid
1）字体真棒风格
2）jQGrid最新捆绑
新设计的jQGrid将如下图所示
新的完整CSS和完整的javascripts编码包含在http://www.techdoubts.net/2015/11/working-jqgrid-responsive-css-boostrap.html这里。
您可以删除所有ui-grid类：
$("[class^='ui-jqgrid']").removeAttr('class');
如果网格大小很大，这可能会出现性能问题。