覆盖Struts2 jqGrid CSS

本文介绍了覆盖Struts2 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(我想是因为它是最后下载的).由于此默认" CSS由struts2框架生成，因此我不知道如何修改/覆盖它，因为我不知道该文件的路径.我目前正在使用maven来管理我的依赖项，并且maven中包含了struts2-jquery-plugin和struts2-jqgrid-plugin.

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 struts2 framework, I have no idea how can I modify/override it as I don't know the path to this file.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中添加了我的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");

进度更新
我仍然无法按照自己的意愿进行覆盖，因此，现在我不得不停止使用从互联网提供的jquery-ui主题(我更喜欢这种方式，因此我可以随时对其进行更新，因为没有需要对我的webapp的jQuery UI CSS进行重大调整).
我下载了正在使用的主题并将其放在我的Web应用程序(template/themes/myTheme-name/)中，因此我可以强制框架使用该显式主题而不是下载它，并且确实有效，我现在可以修改自定义" CSS对于jqGrid..但是我觉得这只是一种解决方法，我想知道如何以干净的方式做到这一点.

PROGRESS UPDATE
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.

推荐答案

这些是创建/修改自定义主题:

在WebRoot路径template/themes/mytheme
提取下载的主题并切换到css文件夹
将jquery-ui-x.x.x.custom.css重命名为jquery-ui.css
将jquery-ui.css和images文件夹复制到template/themes/mytheme文件夹中.

Create a folder in your WebRoot path template/themes/mytheme
Extract downloaded theme and switch into the css folder
Rename jquery-ui-x.x.x.custom.css to jquery-ui.css
Copy jquery-ui.css and images folder into the template/themes/mytheme folder.

<%@ 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.

这篇关于覆盖Struts2 jqGrid CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..