Diente de león tablas de datos Personalizados jqueryUI tema
-
21-12-2019 - |
Pregunta
Recientemente he integrado tablas de datos con mi spring 4 mvc
+ Hibernate 4
+ Tiles 3
Proyecto.
Todo está funcionando bien.Pero tengo un problema.Mi jqueryUI themes
no están funcionando correctamente.
Por favor, eche un vistazo en imágenes a continuación.
1. Search filter
y export links
no están en una fila.Quiero que aparecen en una fila.
He probado con dom="ilfrtip"
Exportación de enlaces desaparecido!!No se de salida de lo que yo quería...!
- Y
datatable sorted column
aparece azul en todos los temas !!
También quiero resaltar la fila en desplazar el puntero del mouse como se muestra aquí, pero con mi color personalizado no azul.
También quiero rayas como se muestra aquí, pero con mis colores personalizados.
He utilizado cssStripes="odd,even"
, pero no de trabajo.:(
Así que quiero aplicar tema personalizado en lugar de básica themeoptions temas.
He descargado mi tema personalizado en ThemeRoller nombre PurpleTheme
.
¿Cómo puedo aplicar esto a datatables
?
Yo soy de la carga de temas a partir de la primavera del tema usando las propiedades de la primavera themeresolver
y themeinterceptor
.
<spring:theme code="theme" var="springTheme" />
<datatables:table id="users" data="${list}"
row="user" rowIdBase="userId" rowIdPrefix="user_"
displayLength="5" lengthMenu="5,10,15,25,50,100"
jqueryUI="true" theme="jqueryui" themeOption="${springTheme}"
filterable="true"
processing="true" autoWidth="true"
pageable="true" paginationType="full_numbers"
export="csv,xml,pdf,xls,xlsx" stateSave="true" deferRender="true" >
Cualquier ayuda es invitado.Gracias de antemano.....
Solución
Acabo de hacer una prueba por la descarga de un tema de ThemeRoller.Aquí sigue los pasos necesarios para aplicar un tema personalizado utilizando el diente de león & diente de león-tablas de datos v0.10.0.
1/ Descargar e instalar el jQueryUI los activos relacionados con el
Una vez que hayas descargado todos los activos de ThemeRoller, colocarlos dentro de su proyecto.En mi ejemplo, yo uso el siguiente estándar de Maven de la arquitectura:
src
|__ main
|__ webapp
|__ assets
|__ css
|__ jquery-ui-1.10.4.custom.css
|__ images
|__ ui-bg_*****.png
|__ ui-icons_****.png
Advertencia: Tuve que actualizar todos los vínculos de la imagen en el archivo CSS para que apunte a mi images
carpeta (../images/
en lugar de images/
).
2/ la preparación de un nuevo paquete de activos
Una vez que todos los activos están aquí, crear una nueva paquete llama custom-theme.json
en el src/main/resources/dandelion
carpeta.
En este archivo, sólo tiene que hacer referencia a su CSS personalizado.No olvides marcar este paquete como dependiente de la jqueryui
uno (que ya está activado cuando se utiliza el theme="jqueryui"
tabla de atributos).
{
"bundle" : "custom-theme",
"dependencies": [ "jqueryui" ],
"assets": [{
"name": "jquery-ui-custom",
"version": "0.10.0",
"type": "css",
"locations": {
"webapp": "/assets/css/jquery-ui-1.10.4.custom.css"
}
}]
}
3/ Crear una extensión para el diente de león-tablas de datos
Actualmente, la única manera de utilizar un tema personalizado opción para la jqueryui
el tema es crear una extensión.
Con el fin de aliviar la configuración (JSP lado), le sugiero que para crear una extensión (en realidad un tema), que se activan tanto jQueryUI y su tema personalizado, de modo que usted no necesita utilizar theme="jqueryui"
por más tiempo.
3.1/ Crear una clase que extienda AbstractExtension
package com.example;
public class CustomJqueryTheme extends AbstractExtension {
@Override
public String getName() {
return "myTheme";
}
@Override
public void setup(HtmlTable table) {
// Activate bundles
AssetRequestContext
.get(table.getTableConfiguration().getRequest())
.addBundle("ddl-dt-theme-jqueryui")
.addBundle("custom-theme");
// Add "bJQueryUI":true
addParameter(DTConstants.DT_JQUERYUI, true);
// Add class="display"
table.addCssClass("display");
}
}
3.2/ Registro de su extensión
Entonces, su extensión debe ser detectado por el diente de león-tablas de datos.Para ello, debe definir el [group].main.extension.package
propiedad en el archivo de configuración.Esta propiedad es en realidad un paquete donde diente de león-tablas de datos buscará extensiones.
Así que he añadido una nueva datatables.properties
archivo bajo el src/main/resources/dandelion/datatables/
carpeta, que contiene:
global.main.extension.package=com.example
4/ Activar la extensión
Una vez que el terreno está preparado, puede probar su extensión mediante la activación de ella gracias a la ext
la tabla de atributos.
<datatables:table ... ext="myTheme" ...>
...
</datatables:table>
Sólo tiene que pasar el nombre que le has dado anteriormente en la getName()
método de su extensión.
5/ Adaptar la configuración
Funciona bien sin necesidad de exportar los enlaces.Pero tan pronto como se activa la función de exportación, diente de león-tablas de datos se actualizará el sDom parámetro con una nueva carta: E
(para la Exportación), por lo tanto, romper la configuración establecida previamente por el tema jQuery.
Tan sólo necesita reemplazar esta configuración de la siguiente manera:
<datatables:table ... ext="myTheme" export="csv" dom="<\"H\"lEfr>t<\"F\"ip>">
...
</datatables:table>
Otra opción sería la de configurar el sDom parámetro directamente en la anterior CustomJqueryTheme
Clase de Java.
Por último, si desea actualizar el par/impar de filas, sólo tiene que utilizar el cssStripes tabla de atributos de la siguiente manera:
<datatables:table ... cssStripes="css-class-for-odd,css-class-for-even">
...
</datatables:table>
Sólo asegúrese de:
- ya sea para usar algo distinto a "raro" y "aun" (debido a que las tablas de datos el uso de estas clases)
- o si usted todavía desea utilizar "raro" y "hasta", asegúrese de reemplazar con reglas de CSS personalizadas.
Como se puede ver, no es muy fácil.:-/
Pero debería ser un poco más simple en las próximas versiones gracias a las mejoras en el mecanismo de extensión.
Tenga en cuenta que voy a actualizar esta respuesta una vez que este ejemplo que estará disponible en el oficial de diente de león-tablas de datos aplicaciones de ejemplo.
(Descargo de responsabilidad requerido por StackOverflow:Soy el autor de diente de león)