Struts2-Jquery Grid CSS Editing [closed]

I have a Struts2-jquery Grid component on my webpage.

It works perfectly, but how can I edit the CSS rules for the Struts2-jQuery-Grid plugin ?

Can I apply my custom CSS rules to this grid view ?

To answer your question: how to create a new jquery theme?

Just like @Andrea mentioned, You should use jQuery ThemeRoller

Define your sj:head like this

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
  <head>
    <sj:head jqueryui="true" jquerytheme="mytheme" 
             customBasepath="template/themes"/>
  </head>
  <body>
  </body>
</html>

You should care following style classes.
- ui-widget-header
- ui-state-default
- ui-widget-content

If you want to adjust single style, you can use either CSS selector or jQuery selector to do this.

the plugin will do the rest. Just try it out.

You can change the default theme by using one of the other themes from jQuery, simply changing the import of the jQuery CSS.

You can see them in jQuery ThemeRoller (Gallery tab), and in the Struts2-jQuery Showcase too (using the themeroller combobox on top-right corner).

If none of them satisfies your needs,

just choose the theme closer to what you want, and define a CSS of your,

declaring it AFTER the jQuery CSS import (because order of import of CSSs matters, the last win),

and manually doing the override of every style declaration you need to change;

To easily and quickly see (and experiments with) them, you can use FireBug on FireFox, or similar tools on other browsers.

For example, if you use

.ui-jqgrid tr.ui-row-ltr td{
    border-right-style: dashed;
}

in your CSS, you will have dashed borders for your TDs, no matter which theme are you using.

You could even create your personal jQuery CSS Theme from nothing, but I doubt this is what you are looking for, it wouldn't be a quick work...

来源：https://stackoverflow.com/questions/15022445/struts2-jquery-grid-css-editing

标签

jquery

struts2

struts2-jquery

struts2-json-plugin

struts2-jquery-grid