覆盖Struts 2 jqGrid CSS [英] Overriding Struts 2 jqGrid CSS
问题描述
我一直坚持为网格覆盖默认的 struts2-jquery-plugin 样式表.我尝试定义自己的样式表( jquery-ui-grid.css )并将其包含在我的JSP页面中，但是框架始终下载默认的CSS( ui.jqgrid.css )，并覆盖我自己的样式.
I'm stuck on overriding the default's struts2-jquery-plugin stylesheet for a grid. I tried defining my own stylesheet (jquery-ui-grid.css) and including it on my JSP page but the framework always downloads the default CSS (ui.jqgrid.css) last and overrides my own styles.
我已经使用Chrome开发者工具监视网络请求，因此可以验证是否同时下载了默认CSS和自定义CSS，但是仅应用了默认CSS(我想是因为它是最后下载的).由于此 default CSS是由Struts 2框架生成的，我不知道如何修改/覆盖它，因为我不知道该文件的路径.
I've used the Chrome developer tools to watch network requests so I could verify that both default CSS and my custom CSS are being downloaded, but only the default is applied (I guess because it's downloaded last). As this default CSS is generated by the Struts 2 framework, I have no idea how can I modify/override it as I don't know the path to this file.
我目前正在使用Maven来管理我的依赖项，并且Maven中包含了 struts2-jquery-plugin 和 struts2-jqgrid-plugin .
I'm currently using Maven to manage my dependencies and the struts2-jquery-plugin and struts2-jqgrid-plugin are being included from Maven.
我正在尝试更改网格的字体大小，这时我有点绝望...
I'm trying to change the font size for my grids and I'm getting a little bit desperate at this point...
如何覆盖/修改插件用来设置网格样式的默认CSS文件?我不想更改应用于HTML表的样式，我在寻找一种解决方案，该解决方案允许我专门修改 jqGrid 相关的CSS类.
How can I override/modify the default CSS file that the plugin is using to style the grids? I wouldn't like to change the styles applied to the HTML tables, I'm searching for a solution that allows me specifically modify the jqGrid related CSS classes.
如此问题中所述，我在 jquery-ui 之后添加了CSS(在< head/> 标记内):
As mentioned in this question, I included my CSS after the jquery-ui ones (inside the <head /> tag):
<head>
...
<s:head />
<sj:head jqueryui="true" jquerytheme="south-street" loadAtOnce="true" loadFromGoogle="false" locale="es"/>
<link href="<s:url value='/styles/main.css'/>" rel="stylesheet" type="text/css" media="all" />
...
</head>
在我的 main.css 中，所有CSS导入都位于其中:
And inside my main.css belong all the CSS imports:
/*
Css Framework
=============
- see http://www.contentwithstyle.co.uk/Articles/17/a-css-framework
for more info.
*/
@import url("tools.css");
@import url("typo.css");
@import url("forms.css");
@import url("layout.css");
/* This is my "custom" jqGrid stylesheet: */
@import url("ui.jqgrid.css");
@import url("dl-forms.css");
进度更新:
我仍然无法按照自己的意愿进行覆盖，因此，现在我不得不停止使用Internet提供的 jquery-ui 主题(我更喜欢这样，这样我就可以保持它是即时更新的，因为无需对我的webapp的jQuery UI CSS进行重大调整).
我下载了正在使用的主题并将其放在我的Web应用程序中( template/themes/myTheme-name/)，因此我可以强制框架使用该显式主题而不是下载它，并且确实有效，我现在可以为jqGrid修改我的 custom CSS.但是我觉得这只是一个解决方法，我想知道如何以干净的方式做到这一点.
I still hadn't been able to override as I wanted to, so for now I had to stop using a jquery-ui theme served from the internet (I prefer that way so I can keep it updated on the fly, as there is no need for major tweaks on the jQuery UI CSS for my webapp).
I downloaded the theme I'm using and put it inside my webapp (template/themes/myTheme-name/), so I could force the framework to use that explicit theme instead of downloading it, and that indeed worked, I can now modify my custom CSS for jqGrid. But I feel like this is just a workaround and I would like to know how to do it the clean way.
推荐答案
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<s:url var="context" value="/" />
<sj:head locale="de" jqueryui="true" jquerytheme="mytheme" customBasepath="%{context}template/themes"/>
</head>
<body>
</body>
</html>
您还可以使用 scriptPath 属性，在其中放置JS代码.与使用CSS的方法相同，只是复制到 js 文件夹中.
You can also play with scriptPath attribute where you can place your JS code. The same way as you doing it with CSS but copying into js folder.
这篇关于覆盖Struts 2 jqGrid CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
